Create Appointment works

client/src/components/App.js

@@ -4,6 +4,7 @@ import Header from './Header';
 import { Switch, Route } from 'react-router-dom';
 // import ProductList from './ProductList';
 import AppointmentList from './AppointmentList';
+import Events from './Events';
 import Login from './Login';
 import Calendar from './Calendar';
 
@@ -15,6 +16,7 @@ const App = () => {
         <Switch>
           {/* <Route exact path="/" component={ProductList} /> */}
           <Route exact path="/" component={AppointmentList} />
+          {/* <Route exact path="/events" component={Events} /> */}
           <Route exact path="/create" component={CreateAppointment} />
           <Route exact path="/login" component={Login} />
           <Route exact path="/calendar" component={Calendar} />

client/src/components/Appointment.js

@@ -5,7 +5,7 @@ const Appointment = (props) => {
     return (
         <div>
             <div>
-                <b>{appointment.title}</b> starts at {appointment.timeStart}, ends at {appointment.timeEnd}. It is described as "{appointment.description}"
+                <b>{appointment.title}</b> starts at {appointment.start}, ends at {appointment.end}. It is described as "{appointment.description}"
       </div>
         </div>
     );

client/src/components/AppointmentList.js

@@ -7,8 +7,8 @@ export const APPOINTMENTS_QUERY = gql`
     allAppointments{
       title
       description
-      timeStart
+      start
-      timeEnd
+      end
     }
   }
 `;
@@ -17,9 +17,8 @@ const AppointmentList = () => {
 
   const { data } = useQuery(APPOINTMENTS_QUERY);
 
-  console.log("Data:", data);
-
   if (data !== undefined) {
+    console.log(data.allAppointments);
     return (
       <div>
         {

client/src/components/Calendar.js

@@ -4,6 +4,7 @@ import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from "@fullcalendar/interaction";
 import { useQuery, gql } from '@apollo/client';
 import { APPOINTMENTS_QUERY } from './AppointmentList';
+import Events from './Events'
 
 // function renderEventContent() {
 //     const { loading, error, data } = useQuery(APPOINTMENTS_QUERY, {
@@ -16,14 +17,34 @@ import { APPOINTMENTS_QUERY } from './AppointmentList';
 //             <b>{eventInfo.timeText}</b>
 //             <i>{eventInfo.event.title}</i>
 //         </>
-//     )
+//     )s
 //     // return <h1>Hello {data.greeting.message}!</h1>;
 // }
 
+
 export default class Calendar extends React.Component {
 
-    handleDateClick = (arg) => { // bind with an arrow function
+    // formatEvents() {
-        alert(arg.dateStr)
+
+    //     // const { data } = useQuery(APPOINTMENTS_QUERY);
+    //     return this.props.appointments.map(appointment => {
+    //         const { title, end, start } = appointment
+
+    //         let startTime = new Date(start)
+    //         let endTime = new Date(end)
+
+    //         return {
+    //             title,
+    //             start: startTime,
+    //             end: endTime,
+    //             extendedProps: { ...appointment }
+    //         }
+    //     })
+    // }
+
+    handleDateClick = (arg) => {
+        arg.jsEvent.preventDefault();
+        alert(arg.event.extendedProps.description)
     }
 
     render() {
@@ -34,10 +55,20 @@ export default class Calendar extends React.Component {
                 initialView="dayGridMonth"
                 weekends={true}
                 eventClick={this.handleDateClick}
-                // eventContent={renderEventContent}
+                events={this.formatEvents}
                 events={[
-                    { title: 'event 1', start: '2021-01-03 13:45:00', end: '2021-01-03 16:15:00' },
+                    {
-                    { title: 'event 2', start: '2021-01-05 09:00:00', end: '2021-01-03 10:30:00' }
+                        "title": "fyufyjd",
+                        "description": "kr7y i7r77tk ruru",
+                        "start": "2021-01-05T12:45:51.000Z",
+                        "end": "2021-01-05T17:00:00.000Z"
+                    },
+                    {
+                        "title": "dyt",
+                        "description": "uudtkdjtdtukduk",
+                        "start": "2021-01-04T17:45:51.000Z",
+                        "end": "2021-01-04T20:00:00.000Z"
+                    }
                 ]}
             />
         )

client/src/components/CreateAppointment.js

@@ -10,15 +10,14 @@ const CREATE_APPOINTMENT_MUTATION = gql`
   mutation CreateAppointmentMutation(
     $title: String!
     $description: String!
-    $timeStart: String!
+    $start: String!
-    $timeEnd: String!
+    $end: String!
   ) {
-    createAppointment(title: $title, description: $description, timeStart: $timeStart, timeEnd: $timeEnd) {
+    createAppointment(title: $title, description: $description, start: $start, end: $end) {
-      id
       title
       description
-      timeStart
+      start
-      timeEnd
+      end
     }
   }
 `;
@@ -29,46 +28,46 @@ const CreateAppointment = () => {
     const [formState, setFormState] = useState({
         title: '',
         description: '',
-        timeStart: '',
+        start: '',
-        timeEnd: ''
+        end: ''
     });
 
     const [createAppointment] = useMutation(CREATE_APPOINTMENT_MUTATION, {
         variables: {
             title: formState.title,
             description: formState.description,
-            timeStart: formState.timeStart,
+            start: formState.start,
-            timeEnd: formState.timeEnd
+            end: formState.end
         },
-        update: (cache, { data: { createAppointment } }) => {
+        // update: (cache, { data: { createAppointment } }) => {
-            const take = APPOINTMENTS_PER_PAGE;
+        //     const take = APPOINTMENTS_PER_PAGE;
-            const skip = 0;
+        //     const skip = 0;
-            const orderBy = { createdAt: 'desc' };
+        //     const orderBy = { createdAt: 'desc' };
 
-            const data = cache.readQuery({
+        //     const data = cache.readQuery({
-                query: APPOINTMENTS_QUERY,
+        //         query: APPOINTMENTS_QUERY,
-                variables: {
+        //         variables: {
-                    take,
+        //             take,
-                    skip,
+        //             skip,
-                    orderBy
+        //             orderBy
-                }
+        //         }
-            });
+        //     });
 
-            cache.writeQuery({
+        //     cache.writeQuery({
-                query: APPOINTMENTS_QUERY,
+        //         query: APPOINTMENTS_QUERY,
-                data: {
+        //         data: {
-                    allAppointments: {
+        //             allAppointments: {
-                        appointments: [createAppointment, ...data.allAppointments.appointments]
+        //                 appointments: [createAppointment, ...data.allAppointments]
-                    }
+        //             }
-                },
+        //         },
-                variables: {
+        //         variables: {
-                    take,
+        //             take,
-                    skip,
+        //             skip,
-                    orderBy
+        //             orderBy
-                }
+        //         }
-            });
+        //     });
-        },
+        // },
-        onCompleted: () => history.push('/new/1')
+        onCompleted: () => history.push('/')
     });
 
     return (
@@ -106,38 +105,26 @@ const CreateAppointment = () => {
                     />
                     <Datetime
                         className="mb2"
-                        value={formState.timeStart}
+                        value={formState.start}
                         onChange={(e) =>
                             setFormState({
                                 ...formState,
-                                timeStart: e
+                                start: e
                             })
                         }
                     />
                     <Datetime
                         className="mb2"
-                        value={formState.timeStart}
+                        value={formState.end}
                         onChange={(e) =>
                             setFormState({
                                 ...formState,
-                                timeEnd: e
+                                end: e
                             })
                         }
                     />
-                    {/* <input
-                        className="mb2"
-                        value={formState.timeEnd}
-                        onChange={(e) =>
-                            setFormState({
-                                ...formState,
-                                timeStart: e.target.value
-                            })
-                        }
-                        type="text"
-                        placeholder="Input end time"
-                    /> */}
                 </div>
-                <button type="submit">Submit</button>
+                <button type="submit">Create appointment</button>
             </form>
         </div>
     );

client/src/components/EventType.js

@@ -0,0 +1,17 @@
+import { useQuery } from '@apollo/react-hooks';
+function EventType({ types }) {
+  const { loading, error, data } = useQuery(GET_EVENT_TYPES);
+
+  if (loading) return 'Loading...';
+  if (error) return `Error! ${error.message}`;
+
+  return (
+    <select name="type" onChange={onTypeSelected}>
+      {data.types.map(type => (
+        <option key={type.id} value={type.name}>
+          {type.name}
+        </option>
+      ))}
+    </select>
+  );
+}

client/src/components/Events.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useQuery, gql } from '@apollo/client';
+
+export const APPOINTMENTS_QUERY = gql`
+  {
+    allAppointments{
+      title
+      description
+      start
+      end
+    }
+  }
+`;
+
+var EventsList = [];
+
+const Events = () => {
+
+    const { data } = useQuery(APPOINTMENTS_QUERY);
+
+
+    // if (data !== undefined) {
+    console.log("Data:", data.allAppointments);
+    EventsList = data.allAppointments;
+    return (
+        EventsList
+    );
+    // } else {
+    //     return (
+    //         EventsList
+    //     )
+    // }
+
+};
+
+export default EventsList;

server/src/models/appointment.js

@@ -9,11 +9,11 @@ const AppointmentSchema = new Schema({
         type: String,
         required: false
     },
-    timeStart: {
+    start: {
         type: Date,
         required: true
     },
-    timeEnd: {
+    end: {
         type: Date,
         required: true
     },

server/src/resolvers.js

@@ -97,10 +97,8 @@ export const resolvers = {
         //     };
         // },
 
-        async createAppointment(root, {
+        async createAppointment(parent, args, context, info) {
-            input
+            return await Appointment.create(args);
-        }) {
-            return await Appointment.create(input);
         },
         async updateAppointment(root, {
             _id,

server/src/schema.graphql

@@ -20,7 +20,11 @@ type Feed {
 
 type Mutation {
   createAppointment(
-    input: AppointmentInput
+    title: String!
+    description: String!
+    start: String!
+    end: String!
+    # input: AppointmentInput
   ): Appointment!
   updateAppointment(
     _id: ID!, 
@@ -82,8 +86,8 @@ type Appointment {
   _id: ID!
   title: String!
   description: String!
-  timeStart: Time!
+  start: Time!
-  timeEnd: Time!
+  end: Time!
   deleted: Boolean
   # createdBy: User
   # follows: [Follow!]!
@@ -92,8 +96,8 @@ type Appointment {
 input AppointmentInput {
   title: String!
   description: String!
-  timeStart: Time!
+  start: Time!
-  timeEnd: Time!
+  end: Time!
  }
 input AppointmentOrderByInput {
   description: Sort