adding component folder with footer file, setup in app.js

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "clean": "rm -rf build/* public/* node_modules dev.sqlite3",
     "build.client": "webpack --mode=production",
-    "build.server": "mkdir -p build && babel -d ./build ./src -s",
+    "build.server": "mkdir build && babel -d ./build ./src -s",
     "build": "npm run build.server && npm run build.client",
     "knex": "babel-node node_modules/knex/bin/cli.js",
     "migration": "npm run knex migrate:make",
@@ -21,16 +21,17 @@
     "web:container": "docker build -t tshelburne/csci-e39:master .",
     "web:run": "docker run -t -i --expose 3000 -p 3000:3000 --expose 35729 -p 35729:35729 tshelburne/csci-e39:master",
     "web:publish": "docker push tshelburne/csci-e39:master",
-    "web:deploy": "heroku container:push web",
+    "web:deploy": "heroku container:push web && heroku container:release web",
     "web:migrate": "heroku run npm run db.migrate"
   },
   "author": "Tim Shelburne",
   "license": "UNLICENSED",
   "dependencies": {
     "bookshelf": "^0.14.1",
     "class-autobind": "^0.1.4",
+    "classnames": "^2.2.6",
     "cloudinary": "^1.13.2",
-    "debug": "^3.0.1",
+    "debug": "^4.1.1",
     "js-beautify": "^1.8.9",
     "jsx-to-string": "^1.4.0",
     "kcors": "^2.2.2",
@@ -40,8 +41,8 @@
     "koa-static": "^5.0.0",
     "pg": "^7.7.1",
     "prop-types": "^15.6.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "socket.io": "^2.2.0",
     "supports-color": "^5.5.0",
     "xstream": "^11.7.0"
@@ -66,7 +67,7 @@
     "style-loader": "^0.23.1",
     "webpack": "^4.27.1",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "webpack-dev-server": "^3.3.1"
   },
   "babel": {
     "presets": [

src/assignments/design-patterns/app.scss

@@ -2,6 +2,14 @@
 
 $padding: 20px;
 $margin: 10px;
+$primary-accent: SlateGrey;
+$main-color: mistyrose;
+$hover-color: Salmon;
+$button-color: lighten($hover-color, 11);
+$head-foot-background: rgba(200, 54, 54, 0.5); /*transparent pink background with 50% opacity*/
+$default-font: "Muli", sans-serif;
+$border-radius: 10px;
+
 
 .style-guide {
 	width: 90%;
@@ -28,7 +36,7 @@ $margin: 10px;
 		margin-bottom: $margin;
 
 		.active {
-			background: pink;
+			background: $main-color;
 		}
 	}
 
@@ -37,4 +45,118 @@ $margin: 10px;
 		background: #eee;
 		border: thin dotted #ccc;
 	}
+}
+
+pre {
+	overflow: hidden;
+}
+
+body {
+	font-family: $default-font;
+	color: $primary-accent;
+}
+
+h1 {
+	display: flex;
+	align-items: center;
+	color: $button-color;
+	letter-spacing: 2px;
+}
+
+.sakura {
+	max-width: 50px;
+}
+
+button {
+	background-color: $button-color;
+	transition: background-color .3s ease;
+	padding: 10px 15px;
+	border-radius: 12px;
+	border: 0px;
+	font-size: 14px;
+	font-weight: bold;
+	letter-spacing: 2px;
+	color: $primary-accent;
+	box-shadow: 1px 1px 2px 0 darken($primary-accent, 11);
+	margin-bottom: 10px;
+	margin-right: 10px;
+}
+button:hover {
+	background-color: $hover-color;
+}
+
+.secondary-button {
+	border: 2px solid $primary-accent;
+	border-radius: 12px;
+}
+
+.polaroid {
+	background-color: $main-color;
+	box-shadow: 1px 2px 3px 1px hsla(0,0,10%, .5);
+	min-width: 200px;
+	text-align: center;
+	margin: 0 auto;
+	display: inline-block;
+	margin: 20px;
+}
+img {
+	width: 100%; // allows img to resize with screen stretch/shrink
+	height: auto;
+	max-width: 180px;
+	margin: 10px;
+}
+
+.img-details {
+	text-align: left;
+	padding: 20px;
+}
+
+.align-follow-btn {
+	float: right;
+}
+
+.interact-buttons{
+	flex-direction: row;
+	margin-right: -10px;
+}
+
+.post {
+	display: flex;
+	flex-direction: row;
+	background-color: white;
+}
+
+@media (max-width:600px)
+{
+	.post {
+		flex-direction: column;
+	}
+	.polaroid {
+		min-width: 150px;
+	}
+	img {
+		max-width: 130px;
+	}
+}
+
+footer {
+	padding: 20px 30px 50px; // top | right | {bottom=top} | {left=right}
+	margin-top: 10px;
+	border-radius: 30px 0 /30px 60px;
+	box-shadow: 0px 1px 2px 1px darken($primary-accent, 7);
+	margin-right: 10px;
+	background-color: $head-foot-background;
+	li {
+		display: inline-block;
+		margin-right: 15px;
+		margin-bottom: 10px;
+		letter-spacing: 2px;
+	}
+	a {
+		color: white;
+		text-decoration: none;
+	}
+	a:hover {
+		color: $primary-accent;
+	}
 }

src/assignments/design-patterns/components/button.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Button = (props) => {
+    return <button className={props.button_cls} onClick={props.button_fxn}>{props.button_text}</button>
+}
+
+export default Button
+
+export const SecondaryButton = (props) => 
+    <Button button_cls="secondary-button" button_fxn={props.button_fxn} button_text={props.button_text} />
+
+Button.PropTypes = {
+    button_text: PropTypes.string.isRequired,
+    button_fxn: PropTypes.func
+}

src/assignments/design-patterns/components/footer.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+const Footer = (props) => {
+    return <footer>
+        <ul>
+            <li>
+                <a href={"/"+props.element1}>{props.element1.toUpperCase()}</a>
+            </li>
+            <li>
+                <a href={"/"+props.element2}>{props.element2.toUpperCase()}</a>
+            </li>
+            <li>
+                <a href={"/"+props.element3}>{props.element3.toUpperCase()}</a>
+            </li>
+            <li>
+                <a href={"/"+props.element4}>{props.element4.toUpperCase()}</a>
+            </li>
+        </ul>	
+    </footer>
+}
+
+export default Footer

src/assignments/design-patterns/components/gallerypost.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import {SecondaryButton} from './button';
+import Polaroid from './polaroid';
+
+let follow_btn_props = {
+	button_text: 'Follow',
+	button_fxn: () => alert('You are now following this user.'),
+	button_cls: 'follow-btn'
+}
+
+var today = new Date();
+var dd = String(today.getDate()).padStart(2, '0');
+var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+var yyyy = today.getFullYear();
+today = mm + '/' + dd + '/' + yyyy;
+
+const GalleryPost = (props) => {
+    console.log(props)
+    return <figure class="polaroid post">
+        <Polaroid {...props} />
+        <article class="img-details">
+            <div class="img-title">
+                <h3>{props.img_title}</h3>
+                <h4>Posted by {props.usr_name} on {today}</h4>
+            </div>
+            <p>{props.img_description}</p>
+
+            <div class="align-follow-btn">
+                <SecondaryButton button_fxn={follow_btn_props.button_fxn} button_text={follow_btn_props.button_text + ' ' + props.usr_name} />
+            </div>
+        </article>     
+    </figure>
+}
+
+export default GalleryPost

src/assignments/design-patterns/components/polaroid.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import Button from './button';
+
+let share_btn_props = {
+	button_text: 'Share',
+	button_fxn: () => alert('Opens Share Dialogue'),
+	button_cls: false
+}
+
+let like_btn_props = {
+	button_text: 'Like',
+	button_fxn: () => alert('Liked!'),
+	button_cls: false
+}
+
+const Polaroid = (props) => {
+    return <figure class="polaroid">
+        <img src={props.img_url} alt={props.img_description} />
+        <div class="interact-buttons">
+            <Button button_fxn={like_btn_props.button_fxn} button_text={like_btn_props.button_text} />
+            <Button button_fxn={share_btn_props.button_fxn} button_text={share_btn_props.button_text} />
+        </div>                
+
+    </figure>
+}
+
+export default Polaroid