Calendar view ok

client/src/components/App.js

@@ -1,12 +1,13 @@
 import React from 'react';
-import CreateAppointment from './CreateAppointment';
 import Header from './Header';
+import Login from './Login';
+import AppointmentList from './AppointmentList';
+import CreateAppointment from './CreateAppointment';
+import UpdateAppointemnt from './UpdateAppointment';
+import Calendar from './Calendar';
 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';
 
 const App = () => {
   return (
@@ -18,6 +19,7 @@ const App = () => {
           <Route exact path="/" component={AppointmentList} />
           {/* <Route exact path="/events" component={Events} /> */}
           <Route exact path="/create" component={CreateAppointment} />
+          <Route exact path="/update/:_id" component={UpdateAppointemnt} />
           <Route exact path="/login" component={Login} />
           <Route exact path="/calendar" component={Calendar} />
         </Switch>

client/src/components/Appointment.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHistory } from 'react-router';
 import { useMutation, gql } from '@apollo/client';
 
 const DELETE_APPOINTMENT_MUTATION = gql`
@@ -11,17 +12,24 @@ const DELETE_APPOINTMENT_MUTATION = gql`
 
 const Appointment = (props) => {
     const { appointment } = props;
+    const history = useHistory();
 
     const [deleteAppointment] = useMutation(DELETE_APPOINTMENT_MUTATION, {
-        variables: { _id: appointment._id }
+        variables: {
+            _id: appointment._id
+        },
+        onCompleted: () => history.push('/')
     })
 
-    console.log(appointment._id);
+    const updateAppointment = () => {
+        let path = `/update/${appointment._id}`;
+        history.push(path);
+    }
 
     return (
         <div>
             <div>
-                <b><div className="ml1 gray f11" style={{ cursor: 'pointer' }} onClick={deleteAppointment}>[X]</div>{appointment.title}</b> starts at {appointment.start}, ends at {appointment.end}. It is described as "{appointment.description}"
+                <b>{appointment.title}</b> starts at {appointment.start}, ends at {appointment.end}. It is described as "{appointment.description}"<button onClick={deleteAppointment}>DELETE</button><button onClick={updateAppointment}>EDIT</button>
             </div>
         </div>
     );
@@ -29,8 +37,6 @@ const Appointment = (props) => {
 
 export default Appointment;
 
-// import React from 'react';
-// import { useMutation, gql } from '@apollo/client';
 // import { AUTH_TOKEN, APPOINTMENTS_PER_PAGE } from '../constants';
 // import { timeDifferenceForDate } from '../utils'
 // import { FEED_QUERY } from './AppointmentList'

client/src/components/Calendar.js

@@ -4,72 +4,24 @@ 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() {
+export default function Calendar() {
-//     const { loading, error, data } = useQuery(APPOINTMENTS_QUERY, {
+    const { data, loading } = useQuery(APPOINTMENTS_QUERY);
-//         variables: { language: 'english' },
-//     });
-//     if (loading) return <p>Loading ...</p>;
 
-//     return (
+    var events = [];
-//         <>
-//             <b>{eventInfo.timeText}</b>
-//             <i>{eventInfo.event.title}</i>
-//         </>
-//     )s
-//     // return <h1>Hello {data.greeting.message}!</h1>;
-// }
-
-
-export default class Calendar extends React.Component {
-
-    // formatEvents() {
-
-    //     // 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() {
 
+    if (loading) {
+        return <div>Loading...</div>
+    } else {
         return (
             <FullCalendar
                 plugins={[dayGridPlugin, interactionPlugin]}
                 initialView="dayGridMonth"
                 weekends={true}
-                eventClick={this.handleDateClick}
+                eventClick={function (e) {
-                events={this.formatEvents}
+                    alert(e.event.extendedProps.description);
-                events={[
+                }}
-                    {
+                events={data.allAppointments}
-                        "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/Header.js

@@ -9,9 +9,12 @@ const Header = () => {
     return (
         <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">Top list</Link>
-                <div className="ml1"> --- </div>
+            </div>
+            <div className="flex flex-fixed black">
+                <Link to="/calendar" className="ml1 no-underline black">Calendar</Link>
+            </div>
+            <div className="flex flex-fixed">
                 <Link to="/create" className="ml1 no-underline black">Create new</Link>
             </div>
             <div className="flex flex-fixed">

client/src/components/UpdateAppointment.js

@@ -0,0 +1,185 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router';
+import { useMutation, gql, useQuery } from '@apollo/client';
+import { APPOINTMENTS_PER_PAGE } from '../constants';
+import { APPOINTMENTS_QUERY } from './AppointmentList';
+import Datetime from 'react-datetime';
+import "react-datetime/css/react-datetime.css";
+
+const ONE_APPOINTMENT_QUERY = gql`
+  query OneAppointmentQuery(
+      $_id: ID!
+    ){
+    oneAppointments(_id: $id){
+      _id
+      title
+      description
+      start
+      end
+    }
+  }
+`;
+
+const UPDATE_APPOINTMENT_MUTATION = gql`
+  mutation UpdateAppointmentMutation(
+    $_id: ID!
+    $title: String!
+    $description: String!
+    $start: String!
+    $end: String!
+  ) {
+    updateAppointment(title: $title, description: $description, start: $start, end: $end) {
+      _id
+      title
+      description
+      start
+      end
+    }
+  }
+`;
+
+const UpdateAppointment = ({ match: { params: { _id } } }) => {
+    console.log(_id);
+    const history = useHistory();
+
+    // const { data } = useQuery(ONE_APPOINTMENT_QUERY, {
+    //     variables: {
+    //         _id: _id
+    //     }
+    // });
+
+    let [formState, setFormState] = useState({
+        _id: '',
+        title: '',
+        description: '',
+        start: '',
+        end: ''
+    });
+
+    const {
+        data,
+        loading,
+        error
+    } = useQuery(ONE_APPOINTMENT_QUERY, {
+        variables: {
+            _id: _id
+        }
+    });
+
+    if (loading) {
+        console.log("yes")
+    } else {
+        console.log(data);
+        // [formState, setFormState] = useState({
+        //     _id: data._id,
+        //     title: data.title,
+        //     description: data.description,
+        //     start: data.start,
+        //     end: data.end
+        // });
+        // formState.setFormState({
+        //     title: "ykkg"
+        // })
+    }
+
+
+    const [updateAppointment] = useMutation(UPDATE_APPOINTMENT_MUTATION, {
+        variables: {
+            _id: formState._id,
+            title: formState.title,
+            description: formState.description,
+            start: formState.start,
+            end: formState.end
+        },
+        // update: (cache, { data: { createAppointment } }) => {
+        //     const take = APPOINTMENTS_PER_PAGE;
+        //     const skip = 0;
+        //     const orderBy = { createdAt: 'desc' };
+
+        //     const data = cache.readQuery({
+        //         query: APPOINTMENTS_QUERY,
+        //         variables: {
+        //             take,
+        //             skip,
+        //             orderBy
+        //         }
+        //     });
+
+        //     cache.writeQuery({
+        //         query: APPOINTMENTS_QUERY,
+        //         data: {
+        //             allAppointments: {
+        //                 appointments: [createAppointment, ...data.allAppointments]
+        //             }
+        //         },
+        //         variables: {
+        //             take,
+        //             skip,
+        //             orderBy
+        //         }
+        //     });
+        // },
+        onCompleted: () => history.push('/')
+    });
+
+    return (
+        <div>
+            <form
+                onSubmit={(e) => {
+                    e.preventDefault();
+                    updateAppointment();
+                }}
+            >
+                <div className="flex flex-column mt3">
+                    <input
+                        className="mb2"
+                        value={formState.title}
+                        onChange={(e) =>
+                            setFormState({
+                                ...formState,
+                                title: e.target.value
+                            })
+                        }
+                        type="text"
+                        placeholder="Input title"
+                    />
+                    <input
+                        className="mb2"
+                        value={formState.description}
+                        onChange={(e) =>
+                            setFormState({
+                                ...formState,
+                                description: e.target.value
+                            })
+                        }
+                        type="text"
+                        placeholder="Input description"
+                    />
+                    <Datetime
+                        className="mb2"
+                        value={formState.start}
+                        onChange={(e) =>
+                            setFormState({
+                                ...formState,
+                                start: e
+                            })
+                        }
+                    />
+                    <Datetime
+                        className="mb2"
+                        value={formState.end}
+                        onChange={(e) =>
+                            setFormState({
+                                ...formState,
+                                end: e
+                            })
+                        }
+                    />
+                </div>
+                <button type="submit">Update appointment</button>
+            </form>
+        </div>
+    );
+};
+
+export default UpdateAppointment;

server/src/resolvers.js

@@ -12,6 +12,12 @@ export const resolvers = {
         async allAppointments() {
             return await Appointment.find();
         },
+        async oneAppointment(root, args, context, info) {
+            console.log(args);
+            return await Appointment.findOne({
+                _id: args._id
+            });
+        },
         async allProducts() {
             return await Product.find();
         },

server/src/schema.graphql

@@ -8,6 +8,9 @@ type Query {
   ): Feed!
   allProducts: [Product]
   allAppointments: [Appointment]
+  oneAppointment(
+    _id: ID!
+  ): Appointment
   allUsers: [User]
   users: [User!]!
 }