chore

Author: Hendrixer

.gitignore

@@ -0,0 +1,66 @@
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+dist
+coverage
+.cache

api/src/db/db.json

@@ -0,0 +1,7 @@
+{
+  "user": {
+    "id": "jBWMVGjm50l6LGwepDoty",
+    "username": "frontendmaster"
+  },
+  "pet": []
+}

api/src/db/index.js

@@ -0,0 +1,16 @@
+const low = require('lowdb')
+const FileSync = require('lowdb/adapters/FileSync')
+
+const adapter = new FileSync('api/src/db/db.json')
+const db = low(adapter)
+
+const createPetModel = require('./pet')
+const createUserModel = require('./user')
+
+module.exports = {
+  models: {
+    Pet: createPetModel(db),
+    User: createUserModel(db),
+  },
+  db
+}

api/src/db/pet.js

@@ -0,0 +1,29 @@
+const nanoid = require('nanoid')
+
+const createPetModel = db => {
+  return {
+    findMany(filter) {
+      return db.get('pet')
+        .filter(filter)
+        .value()
+    },
+
+    findOne(filter) {
+      return db.get('pet')
+        .find(filter)
+        .value()
+    },
+
+    create(pet) {
+      const newPet = {id: nanoid(), createdAt: Date.now(), ...pet}
+      
+      db.get('pet')
+        .push(newPet)
+        .write()
+
+      return newPet
+    }
+  }
+}
+
+module.exports = createPetModel

api/src/db/user.js

@@ -0,0 +1,20 @@
+const nanoid = require('nanoid')
+
+const createUserModel = db => {
+  return {
+    findOne() {
+      return db.get('user')
+        .value()
+    },
+
+    create(user) {
+      const newUser = {id: nanoid(), createdAt: Date.now(), ...user}
+      db.set('user', newUser)
+        .write()
+  
+      return newUser
+    }
+  }
+}
+
+module.exports = createUserModel

api/src/resolvers.js

@@ -0,0 +1,34 @@
+module.exports = {
+  Query: {
+    pets(_, {input}, {models}) {
+      return models.Pet.findMany(input || {})
+    },
+    pet(_, {id}, {models}) {
+      return models.Pet.findOne({id})
+    },
+    user(_, __, {models}) {
+      return models.User.findOne()
+    }
+  },
+  Mutation: {
+    addPet(_, {input}, {models, user}) {
+      const pet = models.Pet.create({...input, user: user.id})
+      return pet
+    }
+  },
+  Pet: {
+    owner(pet, _, {models}) {
+      return models.User.findOne({id: pet.user})
+    },
+    img(pet) {
+      return pet.type === 'DOG'
+        ? 'https://placedog.net/300/300'
+        : 'http://placekitten.com/300/300'
+    }
+  },
+  User: {
+    pets(user, _, {models}) {
+      return models.Pet.findMany({user: user.id})
+    }
+  }
+}

api/src/schema.js

@@ -0,0 +1,44 @@
+const { gql } = require('apollo-server')
+
+const typeDefs = gql`
+  enum PetType {
+    CAT
+    DOG
+  }
+
+type User {
+  id: ID!
+  username: String!
+  pets: [Pet]!
+}
+
+type Pet {
+  id: ID!
+  type: PetType!
+  name: String!
+  owner: User!
+  img: String!
+  createdAt: Int!
+}
+
+input NewPetInput {
+  name: String!
+  type: PetType!
+}
+
+input PetsInput {
+  type: PetType
+}
+
+type Query {
+  user: User!
+  pets(input: PetsInput): [Pet]!
+  pet(id: ID!): Pet!
+}
+
+type Mutation {
+  addPet(input: NewPetInput!): Pet!
+}
+`;
+
+module.exports = typeDefs

api/src/server.js

@@ -0,0 +1,17 @@
+const { ApolloServer } = require('apollo-server')
+const typeDefs = require('./schema')
+const resolvers = require('./resolvers')
+const {models, db} = require('./db')
+
+const server = new ApolloServer({
+  typeDefs,
+  resolvers,
+  context() {
+    const user = db.get('user').value()
+    return {models, db, user}
+  }
+})
+
+server.listen().then(({ url }) => {
+  console.log(`🚀 Server ready at ${url}`);
+})

api/tests/mutations.test.js

@@ -0,0 +1,5 @@
+describe('mutations', () => {
+  test('hello', () => {
+    expect(1).toBe(1)
+  })
+})

api/tests/queries.test.js

@@ -0,0 +1,5 @@
+describe('queries', () => {
+  test('hello', () => {
+    expect(1).toBe(1)
+  })
+})

api/tests/resolvers.test.js

@@ -0,0 +1,5 @@
+describe('resolvers', () => {
+  test('hello', () => {
+    expect(1).toBe(1)
+  })
+})

client/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["env", "react"],
+  "plugins": ["emotion", "transform-object-rest-spread"]
+}

client/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>React starter app</title>
+</head>
+<body>
+<div id="app"></div>
+<script src="./src/index.js"></script>
+</body>
+</html>

client/src/client.js

@@ -0,0 +1,15 @@
+import { ApolloClient } from 'apollo-client'
+import { InMemoryCache } from 'apollo-cache-inmemory'
+import { HttpLink } from 'apollo-link-http'
+
+const cache = new InMemoryCache()
+const link = new HttpLink({
+  uri: 'http://localhost:4000/'
+})
+
+const client = new ApolloClient({
+  cache,
+  link
+})
+
+export default client

client/src/components/App.js

@@ -0,0 +1,17 @@
+import { Switch, Route } from 'react-router-dom'
+import React, {Fragment} from 'react'
+import Header from './Header'
+import Pets from '../pages/Pets'
+
+const App = () => (
+  <Fragment>
+    <Header />
+    <div>
+      <Switch>
+        <Route exact path="/" component={Pets} />
+      </Switch>
+    </div>
+  </Fragment>
+)
+
+export default App

client/src/components/Error.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+import { withRouter } from 'react-router'
+
+const Header = () =>
+  <header>
+    <div className="row">
+      <div className="col-xs">
+        <Link to="/" >
+          Home
+        </Link>
+      </div>
+    </div>
+  </header>
+
+export default withRouter(Header)

client/src/components/Header.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import ClipLoader from 'react-spinners/ClipLoader'
+
+const Loader = () => 
+  <div className='full-page-loader'>
+    <ClipLoader
+      sizeUnit={"px"}
+      size={150}
+      color={'#3454D1'}
+      loading={true}
+    />
+  </div> 
+
+export default Loader

client/src/components/Loader.js

@@ -0,0 +1,51 @@
+import React, {useState} from 'react'
+import Select from 'react-select'
+
+const options = [
+  { value: 'CAT', label: 'Cat' },
+  { value: 'DOG', label: 'Dog' }
+]
+
+export default function NewPet({onSubmit, onCancel}) {
+  const [type, setType] = useState('DOG')
+  const [name, setName] = useState('')
+
+  const activeOption = options.find(o => o.value === type)
+
+  const submit = e => {
+    e.preventDefault()
+    onSubmit({name, type})
+  }
+
+  const cancel = e => {
+    e.preventDefault()
+    onCancel()
+  }
+
+  return (
+    <div className="new-pet page">
+      <h1>New Pet</h1>
+      <div className="box">
+        <form onSubmit={submit}>
+          <Select
+            value={activeOption}
+            defaultValue={options[0]}
+            onChange={e => setType(e.value)}
+            options={options}
+          />
+
+          <input
+            className="input"
+            type="text"
+            placeholder="pet name"
+            value={name}
+            onChange={e => setName(e.target.value)}
+            required
+          />
+          <a className="error button" onClick={cancel}>cancel</a>          
+          <button type="submit" name="submit">add pet</button>
+        </form>
+      </div>
+    </div>
+  )
+}