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

Calendar view ok

Browse Source
This commit is contained in:
Riccardo
2021-01-06 14:30:07 +01:00
parent 718ca146b1
commit a4a19482f5
7 changed files with 226 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@@ -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 <p>Loading ...</p>;
export default function Calendar() {
const { data, loading } = useQuery(APPOINTMENTS_QUERY);
// return (
// <>
// <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() {
var events = [];
if (loading) {
return <div>Loading...</div>
} else {
return (
<FullCalendar
plugins={[dayGridPlugin, interactionPlugin]}
initialView="dayGridMonth"
weekends={true}
eventClick={this.handleDateClick}
events={this.formatEvents}
events={[
{
"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"
}
]}
eventClick={function (e) {
alert(e.event.extendedProps.description);
}}
events={data.allAppointments}
/>
)
}

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

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

185
client/src/components/UpdateAppointment.js Normal file
View File

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