Progress

2021-01-06 16:00:35 +01:00
parent a4a19482f5
commit 9c0e997f10
15 changed files with 207 additions and 265 deletions
--- a/client/src/components/appointment/UpdateAppointment.js
+++ b/client/src/components/appointment/UpdateAppointment.js
@@ -0,0 +1,141 @@
+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!
+    ){
+    oneAppointment(_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 } } }) => {
+    const history = useHistory();
+
+    const { data } = useQuery(ONE_APPOINTMENT_QUERY, {
+        variables: {
+            _id: _id
+        }
+    });
+
+    let [formState, setFormState] = useState({
+        _id: '',
+        title: '',
+        description: '',
+        start: '',
+        end: ''
+    });
+
+    const [updateAppointment] = useMutation(UPDATE_APPOINTMENT_MUTATION, {
+        variables: {
+            _id: formState._id,
+            title: formState.title,
+            description: formState.description,
+            start: formState.start,
+            end: formState.end
+        },
+        onCompleted: () => history.push('/')
+    });
+
+    if (data === undefined) {
+        return <div>Loading...</div>
+    } else {
+
+        return (
+            <div>
+                <form
+                    onSubmit={(e) => {
+                        e.preventDefault();
+                        updateAppointment();
+                    }}
+                >
+                    <div className="flex flex-column mt3">
+                        <input
+                            hidden
+                            readOnly
+                            className="mb2"
+                            value={data.oneAppointment._id}
+                            type="text"
+                        />
+                        <input
+                            className="mb2"
+                            value={data.oneAppointment.title}
+                            onChange={(e) =>
+                                setFormState({
+                                    ...formState,
+                                    title: e.target.value
+                                })
+                            }
+                            type="text"
+                            placeholder="Input title"
+                        />
+                        <input
+                            className="mb2"
+                            value={data.oneAppointment.description}
+                            onChange={(e) =>
+                                setFormState({
+                                    ...formState,
+                                    description: e.target.value
+                                })
+                            }
+                            type="text"
+                            placeholder="Input description"
+                        />
+                        <Datetime
+                            className="mb2"
+                            value={data.oneAppointment.start}
+                            onChange={(e) =>
+                                setFormState({
+                                    ...formState,
+                                    start: e
+                                })
+                            }
+                        />
+                        <Datetime
+                            className="mb2"
+                            value={data.oneAppointment.end}
+                            onChange={(e) =>
+                                setFormState({
+                                    ...formState,
+                                    end: e
+                                })
+                            }
+                        />
+                    </div>
+                    <button type="submit">Update appointment</button>
+                </form>
+            </div>
+        );
+    }
+};
+
+export default UpdateAppointment;