diff --git a/client/src/components/App.js b/client/src/components/App.js index cc56aee..797cfd0 100644 --- a/client/src/components/App.js +++ b/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 = () => { {/* */} + {/* */} diff --git a/client/src/components/Appointment.js b/client/src/components/Appointment.js index 7bde2a8..17078bd 100644 --- a/client/src/components/Appointment.js +++ b/client/src/components/Appointment.js @@ -5,7 +5,7 @@ const Appointment = (props) => { return (
- {appointment.title} starts at {appointment.timeStart}, ends at {appointment.timeEnd}. It is described as "{appointment.description}" + {appointment.title} starts at {appointment.start}, ends at {appointment.end}. It is described as "{appointment.description}"
); diff --git a/client/src/components/AppointmentList.js b/client/src/components/AppointmentList.js index 9b210f6..52c863b 100644 --- a/client/src/components/AppointmentList.js +++ b/client/src/components/AppointmentList.js @@ -7,8 +7,8 @@ export const APPOINTMENTS_QUERY = gql` allAppointments{ title description - timeStart - timeEnd + start + end } } `; @@ -17,9 +17,8 @@ const AppointmentList = () => { const { data } = useQuery(APPOINTMENTS_QUERY); - console.log("Data:", data); - if (data !== undefined) { + console.log(data.allAppointments); return (
{ diff --git a/client/src/components/Calendar.js b/client/src/components/Calendar.js index 3b61581..63ce444 100644 --- a/client/src/components/Calendar.js +++ b/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'; // {eventInfo.timeText} // {eventInfo.event.title} // -// ) +// )s // // return

Hello {data.greeting.message}!

; // } + export default class Calendar extends React.Component { - handleDateClick = (arg) => { // bind with an arrow function - alert(arg.dateStr) + // 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() { @@ -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" + } ]} /> ) diff --git a/client/src/components/CreateAppointment.js b/client/src/components/CreateAppointment.js index 7c2e7c8..f11f248 100644 --- a/client/src/components/CreateAppointment.js +++ b/client/src/components/CreateAppointment.js @@ -10,15 +10,14 @@ const CREATE_APPOINTMENT_MUTATION = gql` mutation CreateAppointmentMutation( $title: String! $description: String! - $timeStart: String! - $timeEnd: String! + $start: String! + $end: String! ) { - createAppointment(title: $title, description: $description, timeStart: $timeStart, timeEnd: $timeEnd) { - id + createAppointment(title: $title, description: $description, start: $start, end: $end) { title description - timeStart - timeEnd + start + end } } `; @@ -29,46 +28,46 @@ const CreateAppointment = () => { const [formState, setFormState] = useState({ title: '', description: '', - timeStart: '', - timeEnd: '' + start: '', + end: '' }); const [createAppointment] = useMutation(CREATE_APPOINTMENT_MUTATION, { variables: { title: formState.title, description: formState.description, - timeStart: formState.timeStart, - timeEnd: formState.timeEnd + start: formState.start, + end: formState.end }, - update: (cache, { data: { createAppointment } }) => { - const take = APPOINTMENTS_PER_PAGE; - const skip = 0; - const orderBy = { createdAt: 'desc' }; + // 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 - } - }); + // const data = cache.readQuery({ + // query: APPOINTMENTS_QUERY, + // variables: { + // take, + // skip, + // orderBy + // } + // }); - cache.writeQuery({ - query: APPOINTMENTS_QUERY, - data: { - allAppointments: { - appointments: [createAppointment, ...data.allAppointments.appointments] - } - }, - variables: { - take, - skip, - orderBy - } - }); - }, - onCompleted: () => history.push('/new/1') + // cache.writeQuery({ + // query: APPOINTMENTS_QUERY, + // data: { + // allAppointments: { + // appointments: [createAppointment, ...data.allAppointments] + // } + // }, + // variables: { + // take, + // skip, + // orderBy + // } + // }); + // }, + onCompleted: () => history.push('/') }); return ( @@ -106,38 +105,26 @@ const CreateAppointment = () => { /> setFormState({ ...formState, - timeStart: e + start: e }) } /> setFormState({ ...formState, - timeEnd: e + end: e }) } /> - {/* - setFormState({ - ...formState, - timeStart: e.target.value - }) - } - type="text" - placeholder="Input end time" - /> */}
- + ); diff --git a/client/src/components/EventType.js b/client/src/components/EventType.js new file mode 100644 index 0000000..dd9da02 --- /dev/null +++ b/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 ( + + ); +} \ No newline at end of file diff --git a/client/src/components/Events.js b/client/src/components/Events.js new file mode 100644 index 0000000..87e3213 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/server/src/models/appointment.js b/server/src/models/appointment.js index 5a3a26a..65836c5 100644 --- a/server/src/models/appointment.js +++ b/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 }, diff --git a/server/src/resolvers.js b/server/src/resolvers.js index 27c66da..759fa18 100644 --- a/server/src/resolvers.js +++ b/server/src/resolvers.js @@ -97,10 +97,8 @@ export const resolvers = { // }; // }, - async createAppointment(root, { - input - }) { - return await Appointment.create(input); + async createAppointment(parent, args, context, info) { + return await Appointment.create(args); }, async updateAppointment(root, { _id, diff --git a/server/src/schema.graphql b/server/src/schema.graphql index 9aa12da..239aff8 100644 --- a/server/src/schema.graphql +++ b/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! - timeEnd: Time! + start: Time! + end: Time! deleted: Boolean # createdBy: User # follows: [Follow!]! @@ -92,8 +96,8 @@ type Appointment { input AppointmentInput { title: String! description: String! - timeStart: Time! - timeEnd: Time! + start: Time! + end: Time! } input AppointmentOrderByInput { description: Sort