From a4a19482f5a3049b223c10304ee851970e335fe9 Mon Sep 17 00:00:00 2001 From: Riccardo Date: Wed, 6 Jan 2021 14:30:07 +0100 Subject: [PATCH] Calendar view ok --- client/src/components/App.js | 10 +- client/src/components/Appointment.js | 16 +- client/src/components/Calendar.js | 68 ++------ client/src/components/Header.js | 7 +- client/src/components/UpdateAppointment.js | 185 +++++++++++++++++++++ server/src/resolvers.js | 6 + server/src/schema.graphql | 3 + 7 files changed, 226 insertions(+), 69 deletions(-) create mode 100644 client/src/components/UpdateAppointment.js diff --git a/client/src/components/App.js b/client/src/components/App.js index 797cfd0..87a921e 100644 --- a/client/src/components/App.js +++ b/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 = () => { {/* */} + diff --git a/client/src/components/Appointment.js b/client/src/components/Appointment.js index 251f89d..e243701 100644 --- a/client/src/components/Appointment.js +++ b/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 (
-
[X]
{appointment.title} starts at {appointment.start}, ends at {appointment.end}. It is described as "{appointment.description}" + {appointment.title} starts at {appointment.start}, ends at {appointment.end}. It is described as "{appointment.description}"
); @@ -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' diff --git a/client/src/components/Calendar.js b/client/src/components/Calendar.js index 63ce444..93648fa 100644 --- a/client/src/components/Calendar.js +++ b/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() { -// const { loading, error, data } = useQuery(APPOINTMENTS_QUERY, { -// variables: { language: 'english' }, -// }); -// if (loading) return

Loading ...

; +export default function Calendar() { + const { data, loading } = useQuery(APPOINTMENTS_QUERY); -// return ( -// <> -// {eventInfo.timeText} -// {eventInfo.event.title} -// -// )s -// // return

Hello {data.greeting.message}!

; -// } - - -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() { + var events = []; + if (loading) { + return
Loading...
+ } else { return ( ) } diff --git a/client/src/components/Header.js b/client/src/components/Header.js index aa16ecb..e0bc8d2 100644 --- a/client/src/components/Header.js +++ b/client/src/components/Header.js @@ -9,9 +9,12 @@ const Header = () => { return (
-
Store!
Top list -
---
+
+
+ Calendar +
+
Create new
diff --git a/client/src/components/UpdateAppointment.js b/client/src/components/UpdateAppointment.js new file mode 100644 index 0000000..acdcb7b --- /dev/null +++ b/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 ( +
+
{ + e.preventDefault(); + updateAppointment(); + }} + > +
+ + setFormState({ + ...formState, + title: e.target.value + }) + } + type="text" + placeholder="Input title" + /> + + setFormState({ + ...formState, + description: e.target.value + }) + } + type="text" + placeholder="Input description" + /> + + setFormState({ + ...formState, + start: e + }) + } + /> + + setFormState({ + ...formState, + end: e + }) + } + /> +
+ +
+
+ ); +}; + +export default UpdateAppointment; \ No newline at end of file diff --git a/server/src/resolvers.js b/server/src/resolvers.js index 1d389ed..208da0e 100644 --- a/server/src/resolvers.js +++ b/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(); }, diff --git a/server/src/schema.graphql b/server/src/schema.graphql index fc420a0..bbf4ebc 100644 --- a/server/src/schema.graphql +++ b/server/src/schema.graphql @@ -8,6 +8,9 @@ type Query { ): Feed! allProducts: [Product] allAppointments: [Appointment] + oneAppointment( + _id: ID! + ): Appointment allUsers: [User] users: [User!]! }