Started with Moment and datetime

client/package.json

@@ -8,7 +8,9 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "graphql": "^15.4.0",
+    "moment": "^2.29.1",
     "react": "^17.0.1",
+    "react-datetime": "^3.0.4",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

client/src/components/App.js

@@ -1,8 +1,8 @@
 import React from 'react';
-// import CreateAppointment from './CreateAppointment';
+import CreateAppointment from './CreateAppointment';
 import Header from './Header';
 import { Switch, Route } from 'react-router-dom';
-import ProductList from './ProductList';
+// import ProductList from './ProductList';
 import AppointmentList from './AppointmentList';
 
 const App = () => {
@@ -13,7 +13,7 @@ const App = () => {
         <Switch>
           {/* <Route exact path="/" component={ProductList} /> */}
           <Route exact path="/" component={AppointmentList} />
-          {/* <Route exact path="/create" component={CreateAppointment} /> */}
+          <Route exact path="/create" component={CreateAppointment} />
         </Switch>
       </div>
     </div>

client/src/components/AppointmentList.js

@@ -2,11 +2,13 @@ import React from 'react';
 import Appointment from './Appointment';
 import { useQuery, gql } from '@apollo/client';
 
-const APPOINTMENTS_QUERY = gql`
+export const APPOINTMENTS_QUERY = gql`
   {
     allAppointments{
       title
       description
+      # dateStart
+      # dateEnd
       timeStart
       timeEnd
     }

client/src/components/CreateAppointment.js

@@ -2,7 +2,9 @@ import React, { useState } from 'react';
 import { useHistory } from 'react-router';
 import { useMutation, gql } from '@apollo/client';
 import { APPOINTMENTS_PER_PAGE } from '../constants';
-import { FEED_QUERY } from './AppointmentList';
+import { APPOINTMENTS_QUERY } from './AppointmentList';
+import Datetime from 'react-datetime';
+import "react-datetime/css/react-datetime.css";
 
 const CREATE_APPOINTMENT_MUTATION = gql`
   mutation CreateAppointmentMutation(
@@ -13,7 +15,8 @@ const CREATE_APPOINTMENT_MUTATION = gql`
       id
       title
       description
-      createdAt
+      timeStart
+      timeEnd
     }
   }
 `;
@@ -24,16 +27,16 @@ const CreateAppointment = () => {
     const [formState, setFormState] = useState({
         title: '',
         description: '',
-        start: '',
+        timeStart: '',
-        end: ''
+        timeEnd: ''
     });
 
     const [createAppointment] = useMutation(CREATE_APPOINTMENT_MUTATION, {
         variables: {
             title: formState.title,
             description: formState.description,
-            start: formState.start,
+            timeStart: formState.timeStart,
-            end: formState.end
+            timeEnd: formState.timeEnd
         },
         update: (cache, { data: { createAppointment } }) => {
             const take = APPOINTMENTS_PER_PAGE;
@@ -41,7 +44,7 @@ const CreateAppointment = () => {
             const orderBy = { createdAt: 'desc' };
 
             const data = cache.readQuery({
-                query: FEED_QUERY,
+                query: APPOINTMENTS_QUERY,
                 variables: {
                     take,
                     skip,
@@ -50,10 +53,10 @@ const CreateAppointment = () => {
             });
 
             cache.writeQuery({
-                query: FEED_QUERY,
+                query: APPOINTMENTS_QUERY,
                 data: {
-                    feed: {
+                    allAppointments: {
-                        appointments: [createAppointment, ...data.feed.appointments]
+                        appointments: [createAppointment, ...data.allAppointments.appointments]
                     }
                 },
                 variables: {
@@ -85,7 +88,7 @@ const CreateAppointment = () => {
                             })
                         }
                         type="text"
-                        placeholder="The title for the appointment"
+                        placeholder="Input title"
                     />
                     <input
                         className="mb2"
@@ -97,32 +100,40 @@ const CreateAppointment = () => {
                             })
                         }
                         type="text"
-                        placeholder="A description for the appointment"
+                        placeholder="Input description"
                     />
-                    <input
+                    <Datetime
                         className="mb2"
-                        value={formState.start}
+                        value={formState.timeStart}
                         onChange={(e) =>
                             setFormState({
                                 ...formState,
-                                start: e.target.value
+                                timeStart: e
                             })
                         }
-                        type="text"
-                        placeholder="The start for the appointment"
                     />
-                    <input
+                    <Datetime
                         className="mb2"
-                        value={formState.end}
+                        value={formState.timeStart}
                         onChange={(e) =>
                             setFormState({
                                 ...formState,
-                                end: e.target.value
+                                timeEnd: e
+                            })
+                        }
+                    />
+                    {/* <input
+                        className="mb2"
+                        value={formState.timeEnd}
+                        onChange={(e) =>
+                            setFormState({
+                                ...formState,
+                                timeStart: e.target.value
                             })
                         }
                         type="text"
-                        placeholder="The end for the appointment"
+                        placeholder="Input end time"
-                    />
+                    /> */}
                 </div>
                 <button type="submit">Submit</button>
             </form>

client/src/components/Header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 // import { useHistory } from 'react-router';
-// import { Link, withRouter } from 'react-router-dom';
+import { Link, withRouter } from 'react-router-dom';
 
 const Header = () => {
     // const history = useHistory();
@@ -8,16 +8,16 @@ const Header = () => {
         <div className="flex pa1 justify-between nowrap orange">
             <div className="flex flex-fixed black">
                 <div className="fw7 mr1">Store!</div>
-                {/* <Link to="/" className="ml1 no-underline black">
+                <Link to="/" className="ml1 no-underline black">
-                    new
+                    Top list
         </Link>
-                <div className="ml1">|</div>
+                <div className="ml1"> --- </div>
                 <Link
                     to="/create"
                     className="ml1 no-underline black"
                 >
-                    submit
+                    Create new
-        </Link> */}
+        </Link>
             </div>
         </div>
     );

client/yarn.lock

@@ -7328,6 +7328,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
+moment@^2.29.1:
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -8846,7 +8851,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9012,6 +9017,13 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-datetime@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-3.0.4.tgz#176159d08d35c9e750f0be2f0b974e4f9532ffa5"
+  integrity sha512-v6MVwCve+DRaLN2f22LTO5TlrPpkUXumPkp1zfrbhaFtSYGl2grZ2JtwJfLxRj/T4ACyePAV4srCR6cMSiQ/Iw==
+  dependencies:
+    prop-types "^15.5.7"
+
 react-dev-utils@^11.0.1:
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.1.tgz#30106c2055acfd6b047d2dc478a85c356e66fe45"

server/src/resolvers.js

@@ -1,17 +1,40 @@
 // import Appointment from '../../client/src/components/Appointment.js';
 import Product from './models/product.js';
 import Appointment from './models/appointment.js';
+// import { createAppointment } from './resolvers/Mutation.js';
 
 export const resolvers = {
     Query: {
-        async allProducts() {
-            return await Product.find();
-        },
         async allAppointments() {
             return await Appointment.find();
         },
+        async allProducts() {
+            return await Product.find();
+        },
     },
     Mutation: {
+        async createAppointment(root, {
+            input
+        }) {
+            return await Appointment.create(input);
+        },
+        async updateAppointment(root, {
+            _id,
+            input
+        }) {
+            return await Appointment.findOneAndUpdate({
+                _id
+            }, input, {
+                new: true
+            })
+        },
+        async deleteAppointment(root, {
+            _id
+        }) {
+            return await Product.findOneAndRemove({
+                _id
+            });
+        },
         async createProduct(root, {
             input
         }) {

server/src/schema.graphql

@@ -19,11 +19,15 @@ type Feed {
 
 type Mutation {
   createAppointment(
-    title: String!, 
+    input: AppointmentInput
-    description: String!,
-    timeStart: DateTime!,
-    timeEnd: DateTime!,
   ): Appointment!
+  updateAppointment(
+    _id: ID!, 
+    input: AppointmentInput
+  ): Appointment
+  deleteAppointment(
+    _id: ID!
+  ) : Appointment
   createProduct(
     input: ProductInput
   ) : Product
@@ -65,23 +69,39 @@ type User {
   appointments: [Appointment!]!
 }
 
+# Appointment model
 type Appointment {
   _id: ID!
   title: String!
   description: String!
-  timeStart: DateTime!
+  # dateStart: Date!
-  timeEnd: DateTime!
+  # dateEnd: Date!
+  timeStart: Time!
+  timeEnd: Time!
   deleted: Boolean
   # createdBy: User
   # follows: [Follow!]!
   # createdAt: DateTime!
 }
+input AppointmentInput {
+  title: String!
+  description: String!
+  # dateStart: Date!
+  # dateEnd: Date!
+  timeStart: Time!
+  timeEnd: Time!
+ }
 
+# Product model
 type Product {
   _id: ID!
   title: String!
   qty: Int
 }
+input ProductInput {
+  title: String!
+  qty: Int
+ }
 
 type Follow {
   _id: ID!
@@ -89,11 +109,6 @@ type Follow {
   user: User!
 }
 
-input ProductInput {
-  title: String!
-  qty: Int
- }
-
 
 input AppointmentOrderByInput {
   description: Sort
@@ -107,3 +122,4 @@ enum Sort {
 }
 
 scalar DateTime
+scalar Time