Beta

NOTES.md

@@ -0,0 +1,64 @@
+Hi, I'm Jess
+    degree in graphic design 
+    completed a front end dev bootcamp last summer
+    great meetup
+    thanks Tyler for the opportunity to work on a project and present
+
+
+-- Structure --
+changed the directory structure to isolate the non-js files
+
+- Components - 
+index
+App - routes, state for counts for logged in user passed down as props
+    Layout - counts passed down as props
+
+        Navigation - recieves props and displays counts, shows logged in user, link to login/logout, nav (on every page)
+
+        Welcome - informational page
+        Login - shows list of users, click one to login
+        Dictionary - gets all the term components and displays them, functionality to add new terms
+        Term Component - Displays term, author, definition components, functionality to add new definitions
+        Definition Component - Displays definition, author
+        Term Container - Component to display a single term, takes a parameter in the URL and gets the info from the api
+
+-- Approach/Process --
+First
+    Read documentation
+    Added notes at the top about how to get started quickly 
+    tested the api with direct calls in the browser
+    created a list of calls and put them in the ReadMe for reference
+
+Re-usability, one of the cool things about react
+    A few flexible components are used again and again
+
+-- Problem/Solution --
+
+Steady progress on app until I noticed the counts in the nav were not updating 
+Stuck there for a long time
+    tried a lot of different ways of passing the data around
+
+wanted to avoid hitting the api too often
+    can slow down the app
+    ended up making a call to the API every time app mounted to keep the counts constantly updated
+
+re-factoring counts
+    get the counts on login
+    update them with state
+    avoid hitting the api for that purpose again until a refresh or a new login
+
+other refactoring
+    chunk of code that is repeated and very nearly the same
+        make into a tidy function
+        takes parameters  
+    add loading animations 
+    add error messages for various problems
+    add field validation
+    add more functionality
+
+-- Learned -- 
+have not used context or react-bootstrap before
+    not sure about context - I was liking it then it wasn't behaving as gracefully as state
+    really like react bootstrap
+learned I could pass props down routes
+    made it possible to pass the counts to the navigation bar

README.md

@@ -1,5 +1,23 @@
 # Dev Dictionary
 
+# After Installation QuickStart
+npm run json-server // starts API server
+PORT=4500 npm start // starts front-end server
+
+# Dev Notes - TO DO
+
+Consider the real-world issues. 
+    What happens when a fetch or POST fails? 
+    What if the fetch takes a while? Show the user some type of spinner. 
+    Determine how to force errors or slow-loading during presentation.
+
+Stretch Goals
+    Implement edit and delete for terms.
+    Implement edit and delete for definitions.
+    Implement edit and delete for users.
+
+
+
 ## TL;DR
 
 If you are considering taking on this challenge, you'll be writing some code to fetch data and feeding it to pre-built components.
@@ -30,7 +48,7 @@ Expected time: 2-8 hours
 
     This spins up a simple API server, using [json-server](https://github.com/typicode/json-server). It serves the data from `data/db.json`. It runs on port 4501, but you can change that in `package.json`.
 
-1. Familiarize yourself with URLs for fetching data from json-server. Read their doc. It's simple. E.g. fetching terms would use `http://localhost:4501/terms`. To embed definitions, use `http://localhost:4501/terms?_expand=definitions`.
+1. Familiarize yourself with URLs for fetching data from json-server. Read their doc. It's simple. E.g. fetching terms would use `http://localhost:4501/terms`. To embed definitions, use `http://localhost:4501/terms?_embed=definitions`.
 1. Start the frontend dev server.
 
         $ PORT=4500 npm start
@@ -92,4 +110,47 @@ The idea for the site came from Jess in Eric McKay's Learn Web Development meetu
 I like the light-hearted definitions too. Here are a few responses to "What does full stack mean to you?" from @samrocksc on azwebdevs slack #random on 2017-01-12:
 - Full stack means not having to get your changes past the Java team (Joe Fleming)
 - Full stack means your cheapass boss won't pay a proper devops person and makes you do that part too (Luis Montes)
-- Full stack means adding an extra line to your resume after reading a hello world tutorial on Express. (Nick Klepinger)
+- Full stack means adding an extra line to your resume after reading a hello world tutorial on Express. (Nick Klepinger)
+
+# Sample API Calls
+
+NOTE: <values> are in plain text, no quotes
+
+All terms:
+http://localhost:4501/terms
+
+All definitions: 
+http://localhost:4501/definitions
+
+All users:
+http://localhost:4501/users
+
+
+All terms and definitions:
+http://localhost:4501/terms?_embed=definitions
+
+All users and definitions:
+http://localhost:4501/users?_embed=definitions
+
+All users and terms:
+http://localhost:4501/users?_embed=terms
+
+
+Seerch for a specific term:
+http://localhost:4501/terms?q=<value>
+
+Search for a specific term and get all matching and their definitions:
+http://localhost:4501/terms?q=<term-value>&_embed=definitions
+
+Search for a specific definition:
+http://localhost:4501/definitions?q=<value>
+
+Search for a specific user:
+http://localhost:4501/users?q=<value>
+
+Search for a specific user and get all matching and their definitions:
+http://localhost:4501/users?q=<user-value>&_embed=definitions
+
+Search for a specific user and get all matching and their terms:
+http://localhost:4501/users?q=<user-value>&_embed=terms
+

data/db.json

@@ -1,17 +1,132 @@
 {
-	"terms": [
-		{ "id": 1, "name": "Full stack", "userId": 1 },
-		{ "id": 2, "name": "Design pattern", "userId": 2 }
-	],
-	"definitions": [
-		{ "id": 1, "content": "Able to wear a stack of responsibility hats", "termId": 1, "userId": 1 },
-		{ "id": 2, "content": "Fully able to do the part of the job you like, as well as the stack of crud you don't", "termId": 1, "userId": 2 },
-		{ "id": 3, "content": "3rd definition", "termId": 2, "userId": 1 },
-		{ "id": 4, "content": "4th definition", "termId": 2, "userId": 2 }
-	],
-	"users": [
-		{ "id": 1, "name": "Alice",  "avatarUrl": "alice.png" },
-		{ "id": 2, "name": "Dilbert",  "avatarUrl": "dilbert.png" },
-		{ "id": 3, "name": "Wally",  "avatarUrl": "wally.png" }
-	]
+  "terms": [
+    {
+      "id": 1,
+      "name": "Full stack",
+      "userId": 1
+    },
+    {
+      "id": 2,
+      "name": "Design pattern",
+      "userId": 2
+    },
+    {
+      "id": 3,
+      "name": "Smoke test",
+      "userId": 4
+    },
+    {
+      "id": 4,
+      "name": "Unit test",
+      "userId": 4
+    },
+    {
+      "name": "Tech debt",
+      "userId": 4,
+      "id": 5
+    },
+    {
+      "name": "Waterfall",
+      "userId": 4,
+      "id": 6
+    },
+    {
+      "name": "UX",
+      "userId": 3,
+      "id": 7
+    },
+    {
+      "name": "DRY",
+      "userId": 2,
+      "id": 8
+    },
+    {
+      "name": "hi",
+      "userId": 4,
+      "id": 9
+    },
+    {
+      "name": "asdfg",
+      "userId": 4,
+      "id": 10
+    }
+  ],
+  "definitions": [
+    {
+      "id": 1,
+      "content": "Able to wear a stack of responsibility hats",
+      "termId": 1,
+      "userId": 1
+    },
+    {
+      "id": 2,
+      "content": "Fully able to do the part of the job you like, as well as the stack of crud you don't",
+      "termId": 1,
+      "userId": 2
+    },
+    {
+      "id": 3,
+      "content": "3rd definition",
+      "termId": 2,
+      "userId": 4
+    },
+    {
+      "id": 4,
+      "content": "4th definition",
+      "termId": 2,
+      "userId": 2
+    },
+    {
+      "id": 5,
+      "content": "A quick manual test done immediately after pushing a change to the live site to check for any obvious problems. Often followed up with formal QA.",
+      "termId": 3,
+      "userId": 4
+    },
+    {
+      "id": 6,
+      "content": "Testing set up to check for proper output throughout an application to catch accidental errors as soon as they are introduced.",
+      "termId": 4,
+      "userId": 4
+    },
+    {
+      "id": 7,
+      "content": "That thing everyone says we should do that we never have time to get around doing even though it would probably save us time in the long run. See also 'tech debt'.",
+      "termId": 4,
+      "userId": 4
+    },
+    {
+      "userId": 4,
+      "content": "A general solution to a common problem; applicable to many situations.",
+      "termId": 2,
+      "id": 8
+    },
+    {
+      "userId": 4,
+      "content": "Don't Repeat Yourself",
+      "termId": 8,
+      "id": 9
+    }
+  ],
+  "users": [
+    {
+      "id": 1,
+      "name": "Alice",
+      "avatarUrl": "alice.png"
+    },
+    {
+      "id": 2,
+      "name": "Dilbert",
+      "avatarUrl": "dilbert.png"
+    },
+    {
+      "id": 3,
+      "name": "Wally",
+      "avatarUrl": "wally.png"
+    },
+    {
+      "id": 4,
+      "name": "Penny",
+      "avatarUrl": "penny.png"
+    }
+  ]
 }

public/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"><link href="https://fonts.googleapis.com/css?family=Titillium+Web:200,700" rel="stylesheet"> 
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.