├── .gitignore
├── db.js
├── functions
    ├── auth.js
    └── graphql.js
├── gatsby-config.js
├── netlify.toml
├── package.json
├── src
    ├── components
    │   ├── company-select.js
    │   ├── contact-form.js
    │   ├── contact-select.js
    │   ├── create-listing.js
    │   ├── listing-form.js
    │   ├── listing-menu.js
    │   ├── listings.js
    │   ├── login-form.js
    │   └── remove-contact-button.js
    ├── gatsby-theme-apollo
    │   └── client.js
    ├── pages
    │   └── index.js
    └── utils.js
├── utils.js
├── yarn-error.log
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .cache
3 | public
4 | .env*
5 | 
6 | # Local Netlify folder
7 | .netlify


--------------------------------------------------------------------------------
/db.js:
--------------------------------------------------------------------------------
 1 | const Sequelize = require("sequelize");
 2 | 
 3 | const sequelize = new Sequelize(process.env.DB_CONNECTION_STRING, {
 4 |   dialectOptions: {
 5 |     ssl: true,
 6 |   },
 7 | });
 8 | 
 9 | class User extends Sequelize.Model {}
10 | User.init(
11 |   {
12 |     email: Sequelize.STRING,
13 |     password: Sequelize.STRING,
14 |   },
15 |   {
16 |     sequelize,
17 |     modelName: "user",
18 |   }
19 | );
20 | 
21 | class Contact extends Sequelize.Model {}
22 | Contact.init(
23 |   {
24 |     name: Sequelize.STRING,
25 |     notes: Sequelize.TEXT,
26 |   },
27 |   {
28 |     sequelize,
29 |     modelName: "contact",
30 |   }
31 | );
32 | 
33 | Contact.belongsTo(User);
34 | User.hasMany(Contact);
35 | 
36 | class Listing extends Sequelize.Model {}
37 | Listing.init(
38 |   {
39 |     title: Sequelize.STRING,
40 |     description: Sequelize.TEXT,
41 |     url: Sequelize.STRING,
42 |     notes: Sequelize.TEXT,
43 |   },
44 |   {
45 |     sequelize,
46 |     modelName: "listing",
47 |   }
48 | );
49 | 
50 | Listing.belongsTo(User);
51 | User.hasMany(Listing);
52 | 
53 | Listing.belongsToMany(Contact, { through: "listing_contacts" });
54 | Contact.belongsToMany(Listing, { through: "listing_contacts" });
55 | 
56 | class Company extends Sequelize.Model {}
57 | Company.init(
58 |   {
59 |     name: Sequelize.STRING,
60 |   },
61 |   {
62 |     sequelize,
63 |     modelName: "company",
64 |   }
65 | );
66 | 
67 | Listing.belongsTo(Company);
68 | Company.hasMany(Listing);
69 | 
70 | sequelize.sync();
71 | 
72 | exports.sequelize = sequelize;
73 | exports.User = User;
74 | exports.Listing = Listing;
75 | exports.Company = Company;
76 | exports.Contact = Contact;
77 | 


--------------------------------------------------------------------------------
/functions/auth.js:
--------------------------------------------------------------------------------
 1 | const Sequelize = require("sequelize");
 2 | const bcrypt = require("bcryptjs");
 3 | const basicAuth = require("basic-auth");
 4 | const jwt = require("jsonwebtoken");
 5 | const { sequelize, User } = require("../db");
 6 | 
 7 | exports.handler = async (event) => {
 8 |   // this is a hack to reset DB and create a test user
 9 |   // await sequelize.sync({ force: true });
10 | 
11 |   // const salt = bcrypt.genSaltSync(10);
12 |   // const hash = bcrypt.hashSync("password", salt);
13 |   // const user = await User.create({
14 |   //   email: "test@theworst.dev",
15 |   //   password: hash,
16 |   // });
17 | 
18 |   try {
19 |     const { name, pass } = basicAuth(event);
20 |     const user = await User.findOne({
21 |       where: {
22 |         email: {
23 |           [Sequelize.Op.iLike]: name,
24 |         },
25 |       },
26 |     });
27 | 
28 |     if (user) {
29 |       const passwordsMatch = await bcrypt.compare(pass, user.password);
30 |       if (passwordsMatch) {
31 |         const token = jwt.sign(
32 |           {
33 |             id: user.id,
34 |             email: user.email,
35 |           },
36 |           process.env.JWT_SECRET
37 |         );
38 |         return {
39 |           statusCode: 200,
40 |           body: token,
41 |         };
42 |       }
43 |     }
44 | 
45 |     return {
46 |       statusCode: 401,
47 |       body: "Incorrect email/password combination",
48 |     };
49 |   } catch (err) {
50 |     return {
51 |       statusCode: 400,
52 |       body: `We encountered an error: ${err.message}`,
53 |     };
54 |   }
55 | };
56 | 


--------------------------------------------------------------------------------
/functions/graphql.js:
--------------------------------------------------------------------------------
  1 | const {
  2 |   ApolloServer,
  3 |   AuthenticationError,
  4 |   ForbiddenError,
  5 |   gql,
  6 | } = require("apollo-server-lambda");
  7 | const { Listing, User, Company, Contact } = require("../db");
  8 | const jwt = require("jsonwebtoken");
  9 | 
 10 | const typeDefs = gql`
 11 |   type Query {
 12 |     listings: [Listing!]!
 13 |     companies: [Company!]!
 14 |     contacts: [Contact!]!
 15 |   }
 16 | 
 17 |   type Mutation {
 18 |     createListing(input: CreateListingInput!): Listing!
 19 |     updateListing(input: UpdateListingInput!): Listing!
 20 |     deleteListing(id: ID!): Listing!
 21 |     createContact(input: CreateContactInput!): ListingContact!
 22 |     removeContact(input: RemoveContactInput!): ListingContact!
 23 |     addContactToListing(contactId: ID!, listingId: ID!): ListingContact!
 24 |   }
 25 | 
 26 |   input CreateListingInput {
 27 |     title: String!
 28 |     description: String
 29 |     url: String!
 30 |     notes: String
 31 |     newCompany: String
 32 |     companyId: ID
 33 |   }
 34 | 
 35 |   input UpdateListingInput {
 36 |     id: ID!
 37 |     title: String!
 38 |     description: String
 39 |     url: String!
 40 |     notes: String
 41 |     newCompany: String
 42 |     companyId: ID
 43 |   }
 44 | 
 45 |   input CreateContactInput {
 46 |     name: String!
 47 |     notes: String!
 48 |     listingId: ID!
 49 |   }
 50 | 
 51 |   input RemoveContactInput {
 52 |     id: ID!
 53 |     listingId: ID!
 54 |   }
 55 | 
 56 |   type Contact {
 57 |     id: ID!
 58 |     name: String!
 59 |     notes: String!
 60 |   }
 61 | 
 62 |   type ListingContact {
 63 |     contact: Contact!
 64 |     listingId: ID!
 65 |   }
 66 | 
 67 |   type Company {
 68 |     id: ID!
 69 |     name: String!
 70 |     listings: [Listing!]!
 71 |   }
 72 | 
 73 |   type Listing {
 74 |     id: ID!
 75 |     title: String!
 76 |     description: String
 77 |     url: String!
 78 |     notes: String
 79 |     company: Company
 80 |     contacts: [Contact!]!
 81 |   }
 82 | `;
 83 | 
 84 | const resolvers = {
 85 |   Listing: {
 86 |     company: (listing) => listing.getCompany(),
 87 |     contacts: (listing) => listing.getContacts(),
 88 |   },
 89 |   Query: {
 90 |     listings(_, __, { user }) {
 91 |       return user.getListings({
 92 |         order: [["id", "desc"]],
 93 |       });
 94 |     },
 95 |     companies: () => Company.findAll(),
 96 |     contacts: (_, __, { user }) => user.getContacts(),
 97 |   },
 98 |   Mutation: {
 99 |     async createContact(_, { input }, { user }) {
100 |       const { listingId, ...rest } = input;
101 |       const contact = await Contact.create({
102 |         ...rest,
103 |         userId: user.id,
104 |       });
105 | 
106 |       await contact.addListing(listingId);
107 |       return {
108 |         contact,
109 |         listingId,
110 |       };
111 |     },
112 |     async addContactToListing(_, { listingId, contactId }, { user }) {
113 |       const listing = await Listing.findOne({
114 |         where: {
115 |           id: listingId,
116 |           userId: user.id,
117 |         },
118 |       });
119 | 
120 |       if (!listing) {
121 |         throw new ForbiddenError("You do not have access to this listing");
122 |       }
123 | 
124 |       const contact = await Contact.findOne({
125 |         where: {
126 |           id: contactId,
127 |           userId: user.id,
128 |         },
129 |       });
130 | 
131 |       if (!contact) {
132 |         throw new ForbiddenError("You do not have access to this contact");
133 |       }
134 | 
135 |       await listing.addContact(contact);
136 | 
137 |       return {
138 |         listingId: listing.id,
139 |         contact,
140 |       };
141 |     },
142 |     async removeContact(_, { input }, { user }) {
143 |       const { id, listingId } = input;
144 | 
145 |       const listing = await Listing.findOne({
146 |         where: {
147 |           id: listingId,
148 |           userId: user.id,
149 |         },
150 |       });
151 | 
152 |       if (!listing) {
153 |         throw new ForbiddenError("You do not have access to this listing");
154 |       }
155 | 
156 |       const contact = await Contact.findByPk(id);
157 | 
158 |       await listing.removeContact(contact);
159 | 
160 |       return { contact, listingId };
161 |     },
162 |     async createListing(_, args, { user }) {
163 |       const { newCompany, ...input } = args.input;
164 | 
165 |       if (newCompany) {
166 |         const company = await Company.create({ name: newCompany });
167 |         input.companyId = company.id;
168 |       }
169 | 
170 |       const listing = await Listing.create({
171 |         ...input,
172 |         userId: user.id,
173 |       });
174 | 
175 |       return listing;
176 |     },
177 |     async updateListing(_, args, { user }) {
178 |       const { id, ...input } = args.input;
179 |       const listing = await Listing.findOne({
180 |         where: {
181 |           id,
182 |           userId: user.id,
183 |         },
184 |       });
185 | 
186 |       if (!listing) {
187 |         throw new ForbiddenError("You do not have access to this listing");
188 |       }
189 | 
190 |       return listing.update(input);
191 |     },
192 |     async deleteListing(_, { id }, { user }) {
193 |       const listing = await Listing.findOne({
194 |         where: {
195 |           id,
196 |           userId: user.id,
197 |         },
198 |       });
199 | 
200 |       if (!listing) {
201 |         throw new ForbiddenError("You do not have access to this listing");
202 |       }
203 | 
204 |       await listing.destroy();
205 |       return listing;
206 |     },
207 |   },
208 | };
209 | 
210 | const server = new ApolloServer({
211 |   typeDefs,
212 |   resolvers,
213 |   async context({ event }) {
214 |     try {
215 |       const token = event.headers.authorization.replace(/bearer\s+/i, "");
216 |       const decoded = jwt.verify(token, process.env.JWT_SECRET);
217 |       const user = await User.findByPk(decoded.id);
218 | 
219 |       if (!user) {
220 |         throw new Error("User not found");
221 |       }
222 | 
223 |       return { user };
224 |     } catch (error) {
225 |       throw new AuthenticationError("Unauthorized");
226 |     }
227 |   },
228 | });
229 | 
230 | exports.handler = server.createHandler();
231 | 


--------------------------------------------------------------------------------
/gatsby-config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   siteMetadata: {
 3 |     title: "Journey",
 4 |   },
 5 |   plugins: [
 6 |     "gatsby-plugin-react-helmet",
 7 |     "gatsby-theme-apollo",
 8 |     {
 9 |       resolve: "gatsby-plugin-chakra-ui",
10 |       options: {
11 |         isUsingColorMode: false,
12 |       },
13 |     },
14 |   ],
15 | };
16 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 |   command = 'gatsby build'
3 |   publish = 'public'
4 |   functions = 'functions'
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "start": "gatsby develop"
 4 |   },
 5 |   "dependencies": {
 6 |     "@apollo/client": "^3.0.0-beta.41",
 7 |     "@chakra-ui/core": "^0.7.0",
 8 |     "@emotion/core": "^10.0.28",
 9 |     "@emotion/styled": "^10.0.27",
10 |     "apollo-server-lambda": "^2.11.0",
11 |     "basic-auth": "^2.0.1",
12 |     "bcryptjs": "^2.4.3",
13 |     "emotion-theming": "^10.0.27",
14 |     "framer-motion": "^1.11.0",
15 |     "gatsby": "^2.20.7",
16 |     "gatsby-plugin-chakra-ui": "^0.1.4",
17 |     "gatsby-plugin-react-helmet": "^3.2.1",
18 |     "gatsby-theme-apollo": "^3.0.2",
19 |     "graphql": "^15.0.0",
20 |     "isomorphic-fetch": "^2.2.1",
21 |     "jsonwebtoken": "^8.5.1",
22 |     "pg": "^8.0.1",
23 |     "pg-hstore": "^2.3.3",
24 |     "react": "^16.13.1",
25 |     "react-dom": "^16.13.1",
26 |     "react-helmet": "^5.2.1",
27 |     "sequelize": "^5.21.6"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/company-select.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { gql, useQuery } from "@apollo/client";
 3 | import { Select } from "@chakra-ui/core";
 4 | 
 5 | const GET_COMPANIES = gql`
 6 |   query GetCompanies {
 7 |     companies {
 8 |       id
 9 |       name
10 |     }
11 |   }
12 | `;
13 | 
14 | export default function CompanySelect({ children, ...props }) {
15 |   const { data, loading, error } = useQuery(GET_COMPANIES);
16 |   return (
17 |     <Select isDisabled={loading || error} {...props}>
18 |       {children}
19 |       {data?.companies.map((company) => (
20 |         <option key={company.id} value={company.id}>
21 |           {company.name}
22 |         </option>
23 |       ))}
24 |     </Select>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/src/components/contact-form.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import {
  3 |   Button,
  4 |   Stack,
  5 |   ModalBody,
  6 |   ModalFooter,
  7 |   Textarea,
  8 |   Input,
  9 |   Text,
 10 | } from "@chakra-ui/core";
 11 | import { AnimatePresence, motion } from "framer-motion";
 12 | import ContactSelect from "./contact-select";
 13 | import { gql, useMutation } from "@apollo/client";
 14 | import { CONTACT_FRAGMENT, GET_CONTACTS, GET_LISTINGS } from "../utils";
 15 | 
 16 | function CreateOrSelectContact(props) {
 17 |   const [contactId, setContactId] = useState("");
 18 | 
 19 |   function handleContactChange(event) {
 20 |     setContactId(event.target.value);
 21 |   }
 22 | 
 23 |   return (
 24 |     <AnimatePresence>
 25 |       <Stack {...props}>
 26 |         <ContactSelect
 27 |           name="contactId"
 28 |           value={contactId}
 29 |           onChange={handleContactChange}
 30 |         >
 31 |           <option value="">Select a contact</option>
 32 |           <option value="new">Create new contact</option>
 33 |         </ContactSelect>
 34 |         {contactId === "new" && (
 35 |           <motion.div
 36 |             animate={{
 37 |               y: 0,
 38 |               opacity: 1,
 39 |             }}
 40 |             exit={{
 41 |               y: -10,
 42 |               opacity: 0,
 43 |             }}
 44 |             initial={{
 45 |               y: -10,
 46 |               opacity: 0,
 47 |             }}
 48 |           >
 49 |             <Stack {...props}>
 50 |               <Input placeholder="Contact name" name="name" />
 51 |               <Textarea placeholder="Contact notes" name="notes" />
 52 |             </Stack>
 53 |           </motion.div>
 54 |         )}
 55 |       </Stack>
 56 |     </AnimatePresence>
 57 |   );
 58 | }
 59 | 
 60 | const CREATE_CONTACT = gql`
 61 |   mutation CreateContact($input: CreateContactInput!) {
 62 |     createContact(input: $input) {
 63 |       listingId
 64 |       contact {
 65 |         ...ContactFragment
 66 |       }
 67 |     }
 68 |   }
 69 |   ${CONTACT_FRAGMENT}
 70 | `;
 71 | 
 72 | const ADD_CONTACT_TO_LISTING = gql`
 73 |   mutation AddContactToListing($listingId: ID!, $contactId: ID!) {
 74 |     createContact: addContactToListing(
 75 |       listingId: $listingId
 76 |       contactId: $contactId
 77 |     ) {
 78 |       listingId
 79 |       contact {
 80 |         ...ContactFragment
 81 |       }
 82 |     }
 83 |   }
 84 |   ${CONTACT_FRAGMENT}
 85 | `;
 86 | 
 87 | export default function ContactForm(props) {
 88 |   const [createContact, { loading, error }] = useMutation(CREATE_CONTACT, {
 89 |     onCompleted: props.onCompleted,
 90 |     update(cache, { data }) {
 91 |       const { listingId, contact } = data.createContact;
 92 | 
 93 |       const { listings } = cache.readQuery({ query: GET_LISTINGS });
 94 |       cache.writeQuery({
 95 |         query: GET_LISTINGS,
 96 |         data: {
 97 |           listings: listings.map((listing) => {
 98 |             if (listing.id !== listingId) {
 99 |               return listing;
100 |             }
101 | 
102 |             return {
103 |               ...listing,
104 |               contacts: [...listing.contacts, contact],
105 |             };
106 |           }),
107 |         },
108 |       });
109 | 
110 |       const { contacts } = cache.readQuery({ query: GET_CONTACTS });
111 |       cache.writeQuery({
112 |         query: GET_CONTACTS,
113 |         data: {
114 |           contacts: [...contacts, contact],
115 |         },
116 |       });
117 |     },
118 |   });
119 | 
120 |   function handleSubmit(event) {
121 |     event.preventDefault();
122 |     const { contactId, name, notes } = event.target;
123 |     if (contactId.value === "new") {
124 |       createContact({
125 |         variables: {
126 |           input: {
127 |             name: name.value,
128 |             notes: notes.value,
129 |             listingId: props.listingId,
130 |           },
131 |         },
132 |       });
133 |     } else if (contactId.value) {
134 |       createContact({
135 |         mutation: ADD_CONTACT_TO_LISTING,
136 |         variables: {
137 |           listingId: props.listingId,
138 |           contactId: contactId.value,
139 |         },
140 |       });
141 |     }
142 |   }
143 | 
144 |   return (
145 |     <form onSubmit={handleSubmit}>
146 |       <ModalBody>
147 |         {error && <Text>{error.message}</Text>}
148 |         <CreateOrSelectContact />
149 |       </ModalBody>
150 |       <ModalFooter>
151 |         <Button isLoading={loading} type="submit">
152 |           Add contact
153 |         </Button>
154 |       </ModalFooter>
155 |     </form>
156 |   );
157 | }
158 | 


--------------------------------------------------------------------------------
/src/components/contact-select.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { gql, useQuery } from "@apollo/client";
 3 | import { Select } from "@chakra-ui/core";
 4 | import { GET_CONTACTS } from "../utils";
 5 | 
 6 | export default function ContactSelect({ children, ...props }) {
 7 |   const { data, loading, error } = useQuery(GET_CONTACTS);
 8 |   return (
 9 |     <Select isDisabled={loading || error} {...props}>
10 |       {children}
11 |       {data?.contacts.map((contact) => (
12 |         <option key={contact.id} value={contact.id}>
13 |           {contact.name}
14 |         </option>
15 |       ))}
16 |     </Select>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/src/components/create-listing.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { gql } from "@apollo/client";
 3 | import ListingForm from "./listing-form";
 4 | import {
 5 |   ModalCloseButton,
 6 |   Modal,
 7 |   ModalHeader,
 8 |   ModalOverlay,
 9 |   ModalContent,
10 |   Button,
11 | } from "@chakra-ui/core";
12 | import { GET_LISTINGS, LISTING_FRAGMENT } from "../utils";
13 | 
14 | const CREATE_LISTING = gql`
15 |   mutation CreateListing($input: CreateListingInput!) {
16 |     createListing(input: $input) {
17 |       ...ListingFragment
18 |     }
19 |   }
20 |   ${LISTING_FRAGMENT}
21 | `;
22 | 
23 | export default function CreateListing() {
24 |   const [modalOpen, setModalOpen] = useState(false);
25 | 
26 |   function closeModal() {
27 |     setModalOpen(false);
28 |   }
29 | 
30 |   function openModal() {
31 |     setModalOpen(true);
32 |   }
33 | 
34 |   return (
35 |     <>
36 |       <Button mr="2" onClick={openModal} variantColor="purple" size="sm">
37 |         Create listing
38 |       </Button>
39 |       <Modal isOpen={modalOpen} onClose={closeModal}>
40 |         <ModalOverlay />
41 |         <ModalContent>
42 |           <ModalHeader>Create listing</ModalHeader>
43 |           <ModalCloseButton />
44 |           <ListingForm
45 |             buttonText="Create Listing"
46 |             onCancel={closeModal}
47 |             mutation={CREATE_LISTING}
48 |             mutationOptions={{
49 |               onCompleted: closeModal,
50 |               update: (cache, { data }) => {
51 |                 // TODO: update companies too
52 |                 const { listings } = cache.readQuery({ query: GET_LISTINGS });
53 |                 cache.writeQuery({
54 |                   query: GET_LISTINGS,
55 |                   data: {
56 |                     listings: [data.createListing, ...listings],
57 |                   },
58 |                 });
59 |               },
60 |             }}
61 |           />
62 |         </ModalContent>
63 |       </Modal>
64 |     </>
65 |   );
66 | }
67 | 


--------------------------------------------------------------------------------
/src/components/listing-form.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { useMutation } from "@apollo/client";
  3 | import {
  4 |   Input,
  5 |   Button,
  6 |   Stack,
  7 |   Text,
  8 |   Textarea,
  9 |   ModalFooter,
 10 |   ModalBody,
 11 | } from "@chakra-ui/core";
 12 | import { AnimatePresence, motion } from "framer-motion";
 13 | import CompanySelect from "./company-select";
 14 | 
 15 | function CreateOrSelectCompany(props) {
 16 |   const [companyId, setCompanyId] = useState("");
 17 | 
 18 |   function handleCompanyChange(event) {
 19 |     setCompanyId(event.target.value);
 20 |   }
 21 | 
 22 |   return (
 23 |     <AnimatePresence>
 24 |       <Stack {...props}>
 25 |         <CompanySelect
 26 |           name="companyId"
 27 |           value={companyId}
 28 |           onChange={handleCompanyChange}
 29 |         >
 30 |           <option value="">Select a company</option>
 31 |           <option value="new">Create new company</option>
 32 |         </CompanySelect>
 33 |         {companyId === "new" && (
 34 |           <motion.div
 35 |             animate={{
 36 |               y: 0,
 37 |               opacity: 1,
 38 |             }}
 39 |             exit={{
 40 |               y: -10,
 41 |               opacity: 0,
 42 |             }}
 43 |             initial={{
 44 |               y: -10,
 45 |               opacity: 0,
 46 |             }}
 47 |           >
 48 |             <Input autoFocus placeholder="Company name" name="newCompany" />
 49 |           </motion.div>
 50 |         )}
 51 |       </Stack>
 52 |     </AnimatePresence>
 53 |   );
 54 | }
 55 | 
 56 | export default function ListingForm(props) {
 57 |   const [mutate, { loading, error }] = useMutation(
 58 |     props.mutation,
 59 |     props.mutationOptions
 60 |   );
 61 | 
 62 |   const handleSubmit = (event) => {
 63 |     event.preventDefault();
 64 | 
 65 |     const {
 66 |       title,
 67 |       description,
 68 |       url,
 69 |       notes,
 70 |       newCompany,
 71 |       companyId,
 72 |     } = event.target;
 73 | 
 74 |     const input = {
 75 |       id: props.listing?.id,
 76 |       title: title.value,
 77 |       description: description.value,
 78 |       url: url.value,
 79 |       notes: notes.value,
 80 |     };
 81 | 
 82 |     if (newCompany) {
 83 |       input.newCompany = newCompany.value;
 84 |     } else if (companyId.value) {
 85 |       input.companyId = companyId.value;
 86 |     }
 87 | 
 88 |     mutate({ variables: { input } });
 89 |   };
 90 | 
 91 |   return (
 92 |     <form onSubmit={handleSubmit}>
 93 |       <ModalBody as={Stack}>
 94 |         {error && <Text color="red.500">{error.message}</Text>}
 95 |         <Input
 96 |           isRequired
 97 |           defaultValue={props.listing?.title}
 98 |           type="text"
 99 |           name="title"
100 |           placeholder="Job Title"
101 |         />
102 |         <Input
103 |           defaultValue={props.listing?.description}
104 |           type="text"
105 |           name="description"
106 |           placeholder="Job Description"
107 |         />
108 |         <Input
109 |           defaultValue={props.listing?.url}
110 |           isRequired
111 |           type="url"
112 |           name="url"
113 |           placeholder="Listing URL"
114 |         />
115 |         <Textarea
116 |           defaultValue={props.listing?.notes}
117 |           name="notes"
118 |           placeholder="Notes"
119 |         />
120 |         <CreateOrSelectCompany />
121 |       </ModalBody>
122 |       <ModalFooter>
123 |         <Button mr="2" onClick={props.onCancel}>
124 |           Cancel
125 |         </Button>
126 |         <Button variantColor="purple" isLoading={loading} type="submit">
127 |           {props.buttonText}
128 |         </Button>
129 |       </ModalFooter>
130 |     </form>
131 |   );
132 | }
133 | 


--------------------------------------------------------------------------------
/src/components/listing-menu.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { gql, useMutation } from "@apollo/client";
  3 | import {
  4 |   Menu,
  5 |   MenuButton,
  6 |   MenuList,
  7 |   MenuItem,
  8 |   IconButton,
  9 |   ModalCloseButton,
 10 |   Modal,
 11 |   ModalHeader,
 12 |   ModalOverlay,
 13 |   ModalContent,
 14 |   useToast,
 15 | } from "@chakra-ui/core";
 16 | import ListingForm from "./listing-form";
 17 | import { GET_LISTINGS, LISTING_FRAGMENT } from "../utils";
 18 | 
 19 | const UPDATE_LISTING = gql`
 20 |   mutation UpdateListing($input: UpdateListingInput!) {
 21 |     updateListing(input: $input) {
 22 |       ...ListingFragment
 23 |     }
 24 |   }
 25 |   ${LISTING_FRAGMENT}
 26 | `;
 27 | 
 28 | const DELETE_LISTING = gql`
 29 |   mutation DeleteListing($id: ID!) {
 30 |     deleteListing(id: $id) {
 31 |       ...ListingFragment
 32 |     }
 33 |   }
 34 |   ${LISTING_FRAGMENT}
 35 | `;
 36 | 
 37 | function DeleteButton({ id }) {
 38 |   const toast = useToast();
 39 |   const [deleteListing, { loading }] = useMutation(DELETE_LISTING, {
 40 |     variables: { id },
 41 |     onCompleted(data) {
 42 |       toast({
 43 |         title: "Listing deleted",
 44 |         description: `${data.deleteListing.title} was deleted`,
 45 |         status: "success",
 46 |       });
 47 |     },
 48 |     update: (cache, { data }) => {
 49 |       const { listings } = cache.readQuery({
 50 |         query: GET_LISTINGS,
 51 |       });
 52 | 
 53 |       cache.writeQuery({
 54 |         query: GET_LISTINGS,
 55 |         data: {
 56 |           listings: listings.filter(
 57 |             (listing) => listing.id !== data.deleteListing.id
 58 |           ),
 59 |         },
 60 |       });
 61 |     },
 62 |   });
 63 | 
 64 |   return (
 65 |     <MenuItem
 66 |       isDisabled={loading}
 67 |       onClick={() => {
 68 |         if (global.confirm("Are you sure?")) {
 69 |           deleteListing();
 70 |         }
 71 |       }}
 72 |     >
 73 |       Delete listing
 74 |     </MenuItem>
 75 |   );
 76 | }
 77 | 
 78 | export default function ListingMenu(props) {
 79 |   const toast = useToast();
 80 |   const [modalOpen, setModalOpen] = useState(false);
 81 | 
 82 |   function closeModal() {
 83 |     setModalOpen(false);
 84 |   }
 85 | 
 86 |   return (
 87 |     <>
 88 |       <Menu>
 89 |         <MenuButton as={IconButton} icon="chevron-down" />
 90 |         <MenuList>
 91 |           <MenuItem onClick={() => setModalOpen(true)}>Update listing</MenuItem>
 92 |           <DeleteButton id={props.listing.id} />
 93 |         </MenuList>
 94 |       </Menu>
 95 |       <Modal isOpen={modalOpen} onClose={closeModal}>
 96 |         <ModalOverlay />
 97 |         <ModalContent>
 98 |           <ModalHeader>Update listing</ModalHeader>
 99 |           <ModalCloseButton />
100 |           <ListingForm
101 |             onCancel={closeModal}
102 |             listing={props.listing}
103 |             buttonText="Save changes"
104 |             mutation={UPDATE_LISTING}
105 |             mutationOptions={{
106 |               onCompleted(data) {
107 |                 closeModal();
108 |                 toast({
109 |                   title: "Listing updated",
110 |                   description: `${data.updateListing.title} has been updated`,
111 |                   status: "success",
112 |                 });
113 |               },
114 |             }}
115 |           />
116 |         </ModalContent>
117 |       </Modal>
118 |     </>
119 |   );
120 | }
121 | 


--------------------------------------------------------------------------------
/src/components/listings.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import { useQuery } from "@apollo/client";
  3 | import {
  4 |   Box,
  5 |   Flex,
  6 |   Button,
  7 |   Heading,
  8 |   Text,
  9 |   Stack,
 10 |   FormLabel,
 11 |   Tag,
 12 |   TagLabel,
 13 |   Modal,
 14 |   ModalHeader,
 15 |   ModalOverlay,
 16 |   ModalContent,
 17 |   ModalCloseButton,
 18 |   useDisclosure,
 19 | } from "@chakra-ui/core";
 20 | import { AnimatePresence, motion } from "framer-motion";
 21 | import { GET_LISTINGS } from "../utils";
 22 | import ListingMenu from "./listing-menu";
 23 | import CompanySelect from "./company-select";
 24 | import ContactForm from "./contact-form";
 25 | import RemoveContactButton from "./remove-contact-button";
 26 | 
 27 | function AddContactButton(props) {
 28 |   const { isOpen, onClose, onOpen } = useDisclosure();
 29 |   return (
 30 |     <>
 31 |       <Button
 32 |         my="1"
 33 |         rounded="full"
 34 |         variant="outline"
 35 |         variantColor="purple"
 36 |         size="sm"
 37 |         fontSize="md"
 38 |         onClick={onOpen}
 39 |       >
 40 |         Add contact
 41 |       </Button>
 42 |       <Modal isOpen={isOpen} onClose={onClose}>
 43 |         <ModalOverlay />
 44 |         <ModalContent>
 45 |           <ModalHeader>Add a contact</ModalHeader>
 46 |           <ModalCloseButton />
 47 |           <ContactForm onCompleted={onClose} listingId={props.listingId} />
 48 |         </ModalContent>
 49 |       </Modal>
 50 |     </>
 51 |   );
 52 | }
 53 | 
 54 | export default function Listings() {
 55 |   const { data, loading, error } = useQuery(GET_LISTINGS);
 56 |   const [filter, setFilter] = useState("");
 57 | 
 58 |   if (loading) return <div>Loading the universe...</div>;
 59 |   if (error) {
 60 |     return (
 61 |       <>
 62 |         <div>Universe broken...</div>
 63 |         <p>{error.message}</p>
 64 |       </>
 65 |     );
 66 |   }
 67 | 
 68 |   const handleFilterChange = (event) => {
 69 |     setFilter(event.target.value);
 70 |   };
 71 | 
 72 |   return (
 73 |     <>
 74 |       <Box>
 75 |         <FormLabel>Filter:</FormLabel>
 76 |         <CompanySelect value={filter} onChange={handleFilterChange}>
 77 |           <option value="">All Companies</option>
 78 |         </CompanySelect>
 79 |       </Box>
 80 |       <AnimatePresence initial={false}>
 81 |         {data.listings
 82 |           .filter((listing) => !filter || listing.company?.id === filter)
 83 |           .map((listing) => (
 84 |             <motion.div
 85 |               animate={{
 86 |                 scale: 1,
 87 |                 opacity: 1,
 88 |               }}
 89 |               exit={{
 90 |                 scale: 0.5,
 91 |                 opacity: 0,
 92 |               }}
 93 |               initial={{
 94 |                 scale: 0.5,
 95 |                 opacity: 0,
 96 |               }}
 97 |               key={listing.id}
 98 |             >
 99 |               <Box p="4">
100 |                 <Flex>
101 |                   <ListingMenu listing={listing} />
102 |                   <Box ml="4">
103 |                     <Heading>
104 |                       <a href={listing.url}>{listing.title}</a>
105 |                     </Heading>
106 |                     {listing.description && <Text>{listing.description}</Text>}
107 |                     {listing.company && <Text>{listing.company.name}</Text>}
108 |                     <Stack isInline as="ul" flexWrap="wrap">
109 |                       {listing.contacts.map((contact) => (
110 |                         <Tag
111 |                           key={contact.id}
112 |                           rounded="full"
113 |                           variant="solid"
114 |                           variantColor="purple"
115 |                           my="1"
116 |                         >
117 |                           <TagLabel>{contact.name}</TagLabel>
118 |                           <RemoveContactButton
119 |                             input={{
120 |                               id: contact.id,
121 |                               listingId: listing.id,
122 |                             }}
123 |                           />
124 |                         </Tag>
125 |                       ))}
126 |                       <AddContactButton listingId={listing.id} />
127 |                     </Stack>
128 |                   </Box>
129 |                 </Flex>
130 |               </Box>
131 |             </motion.div>
132 |           ))}
133 |       </AnimatePresence>
134 |     </>
135 |   );
136 | }
137 | 


--------------------------------------------------------------------------------
/src/components/login-form.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | import { Flex, Button, Stack, Heading, Input, Text } from "@chakra-ui/core";
 3 | import { useApolloClient } from "@apollo/client";
 4 | 
 5 | export default function LoginForm() {
 6 |   const client = useApolloClient();
 7 |   const [loading, setLoading] = useState(false);
 8 |   const [error, setError] = useState(null);
 9 | 
10 |   async function handleSubmit(event) {
11 |     event.preventDefault();
12 | 
13 |     setLoading(true);
14 | 
15 |     const response = await fetch("/.netlify/functions/auth", {
16 |       headers: {
17 |         Authorization: `Basic ${btoa(
18 |           `${event.target.email.value}:${event.target.password.value}`
19 |         )}`,
20 |       },
21 |     });
22 | 
23 |     if (response.ok) {
24 |       const token = await response.text();
25 |       localStorage.setItem("journey:token", token);
26 |       client.resetStore();
27 |     } else {
28 |       const error = await response.text();
29 |       setError(new Error(error));
30 |       setLoading(false);
31 |     }
32 |   }
33 | 
34 |   return (
35 |     <Flex h="100vh" align="center" justify="center" bg="white">
36 |       <Stack
37 |         p="8"
38 |         rounded="lg"
39 |         shadow="-16px 16px 32px #ededed, 16px -16px 32px #ffffff"
40 |         maxW="320px"
41 |         w="full"
42 |         as="form"
43 |         spacing="4"
44 |         bg="white"
45 |         onSubmit={handleSubmit}
46 |       >
47 |         <Heading textAlign="center" fontSize="xl" pb="2">
48 |           Journey (v2)
49 |         </Heading>
50 |         {error && <Text color="red.500">{error.message}</Text>}
51 |         <Input placeholder="Email" type="email" name="email" />
52 |         <Input placeholder="Password" type="password" name="password" />
53 |         <Button mt="2" ml="auto" isLoading={loading} type="submit">
54 |           Log in
55 |         </Button>
56 |       </Stack>
57 |     </Flex>
58 |   );
59 | }
60 | 


--------------------------------------------------------------------------------
/src/components/remove-contact-button.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { TagCloseButton } from "@chakra-ui/core";
 3 | import { gql, useMutation } from "@apollo/client";
 4 | import { GET_LISTINGS } from "../utils";
 5 | 
 6 | const REMOVE_CONTACT = gql`
 7 |   mutation RemoveContact($input: RemoveContactInput!) {
 8 |     removeContact(input: $input) {
 9 |       contact {
10 |         id
11 |       }
12 |       listingId
13 |     }
14 |   }
15 | `;
16 | 
17 | export default function RemoveContactButton(props) {
18 |   const [removeContact, { loading }] = useMutation(REMOVE_CONTACT, {
19 |     variables: {
20 |       input: props.input,
21 |     },
22 |     update(cache, { data }) {
23 |       const { listings } = cache.readQuery({
24 |         query: GET_LISTINGS,
25 |       });
26 |       cache.writeQuery({
27 |         query: GET_LISTINGS,
28 |         data: {
29 |           listings: listings.map((listing) => {
30 |             if (listing.id === data.removeContact.listingId) {
31 |               return {
32 |                 ...listing,
33 |                 contacts: listing.contacts.filter(
34 |                   (contact) => contact.id !== data.removeContact.contact.id
35 |                 ),
36 |               };
37 |             }
38 |             return listing;
39 |           }),
40 |         },
41 |       });
42 |     },
43 |   });
44 |   return <TagCloseButton isDisabled={loading} onClick={removeContact} />;
45 | }
46 | 


--------------------------------------------------------------------------------
/src/gatsby-theme-apollo/client.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   ApolloClient,
 3 |   ApolloLink,
 4 |   HttpLink,
 5 |   InMemoryCache,
 6 | } from "@apollo/client";
 7 | import fetch from "isomorphic-fetch";
 8 | 
 9 | const httpLink = new HttpLink({
10 |   fetch,
11 |   uri: "/.netlify/functions/graphql",
12 | });
13 | 
14 | const authLink = new ApolloLink((operation, forward) => {
15 |   const token = localStorage.getItem("journey:token");
16 |   if (token) {
17 |     operation.setContext({
18 |       headers: {
19 |         Authorization: `Bearer ${token}`,
20 |       },
21 |     });
22 |   }
23 | 
24 |   return forward(operation);
25 | });
26 | 
27 | const client = new ApolloClient({
28 |   cache: new InMemoryCache(),
29 |   link: authLink.concat(httpLink),
30 |   resolvers: {
31 |     Query: {
32 |       isLoggedIn() {
33 |         const token = localStorage.getItem("journey:token");
34 |         return Boolean(token);
35 |       },
36 |     },
37 |   },
38 | });
39 | 
40 | export default client;
41 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { useQuery, gql } from "@apollo/client";
 3 | import { Box, Flex, Button, Heading } from "@chakra-ui/core";
 4 | import { Helmet } from "react-helmet";
 5 | import { graphql, useStaticQuery } from "gatsby";
 6 | 
 7 | import Listings from "../components/listings";
 8 | import CreateListing from "../components/create-listing";
 9 | import LoginForm from "../components/login-form";
10 | 
11 | const LOGGED_IN_QUERY = gql`
12 |   {
13 |     isLoggedIn @client
14 |   }
15 | `;
16 | 
17 | export default function Index() {
18 |   const { data, client } = useQuery(LOGGED_IN_QUERY);
19 | 
20 |   const { site } = useStaticQuery(
21 |     graphql`
22 |       {
23 |         site {
24 |           siteMetadata {
25 |             title
26 |           }
27 |         }
28 |       }
29 |     `
30 |   );
31 | 
32 |   const { title } = site.siteMetadata;
33 |   return (
34 |     <>
35 |       <Helmet>
36 |         <title>{title}</title>
37 |       </Helmet>
38 |       {data?.isLoggedIn ? (
39 |         <>
40 |           <Flex
41 |             as="header"
42 |             justify="space-between"
43 |             align="center"
44 |             px="4"
45 |             bg="gray.100"
46 |             h="12"
47 |           >
48 |             <Flex align="center">
49 |               <Heading fontSize="lg" mr={4}>
50 |                 {title}
51 |               </Heading>
52 |               <CreateListing />
53 |             </Flex>
54 |             <Button
55 |               size="sm"
56 |               onClick={() => {
57 |                 localStorage.removeItem("journey:token");
58 |                 client.resetStore();
59 |               }}
60 |             >
61 |               Log Out
62 |             </Button>
63 |           </Flex>
64 |           <Box maxW="containers.md" mx="auto">
65 |             <Listings />
66 |           </Box>
67 |         </>
68 |       ) : (
69 |         <LoginForm />
70 |       )}
71 |     </>
72 |   );
73 | }
74 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | import { gql } from "@apollo/client";
 2 | 
 3 | export const CONTACT_FRAGMENT = gql`
 4 |   fragment ContactFragment on Contact {
 5 |     id
 6 |     name
 7 |     notes
 8 |   }
 9 | `;
10 | 
11 | export const LISTING_FRAGMENT = gql`
12 |   fragment ListingFragment on Listing {
13 |     id
14 |     url
15 |     title
16 |     description
17 |     notes
18 |     company {
19 |       name
20 |       id
21 |     }
22 |     contacts {
23 |       ...ContactFragment
24 |     }
25 |   }
26 |   ${CONTACT_FRAGMENT}
27 | `;
28 | 
29 | export const GET_LISTINGS = gql`
30 |   {
31 |     listings {
32 |       ...ListingFragment
33 |     }
34 |   }
35 |   ${LISTING_FRAGMENT}
36 | `;
37 | 
38 | export const GET_CONTACTS = gql`
39 |   query GetContacts {
40 |     contacts {
41 |       id
42 |       name
43 |     }
44 |   }
45 | `;
46 | 


--------------------------------------------------------------------------------
/utils.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kkemple/journey-v2/9ffe936a4ed76984cff2bda07628d119eb0a4c3b/utils.js


--------------------------------------------------------------------------------