riccardo/calendar-demo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create Appointment works

Browse Source
This commit is contained in:
Riccardo
2021-01-06 11:09:19 +01:00
parent 07cbbf12de
commit f25a3055e5
10 changed files with 150 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/App.js
View File

@@ -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} />

2
client/src/components/Appointment.js
View File

@@ -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>
);

7
client/src/components/AppointmentList.js
View File

@@ -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 (
<div>
{

43
client/src/components/Calendar.js
View File

@@ -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
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"
}
]}
/>
)

95
client/src/components/CreateAppointment.js
View File

@@ -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 = () => {
/>
<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>
);

17
client/src/components/EventType.js Normal file
View File

@@ -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>
);
}

36
client/src/components/Events.js Normal file
View File

@@ -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;