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

Progress

Browse Source
This commit is contained in:
Riccardo
2021-01-06 16:00:35 +01:00
parent a4a19482f5
commit 9c0e997f10
15 changed files with 207 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,12 @@
import React from 'react';
import Header from './Header';
import Header from './layout/Header';
import Login from './Login';
import AppointmentList from './AppointmentList';
import CreateAppointment from './CreateAppointment';
import UpdateAppointemnt from './UpdateAppointment';
import AppointmentList from './appointment/AppointmentList';
import CreateAppointment from './appointment/CreateAppointment';
import UpdateAppointemnt from './appointment/UpdateAppointment';
import Calendar from './Calendar';
import { Switch, Route } from 'react-router-dom';
// import ProductList from './ProductList';
import Events from './Events';
const App = () => {
return (
@@ -17,7 +16,6 @@ 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="/update/:_id" component={UpdateAppointemnt} />
<Route exact path="/login" component={Login} />

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

@@ -2,8 +2,8 @@ import React from 'react'
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction";
import { useQuery, gql } from '@apollo/client';
import { APPOINTMENTS_QUERY } from './AppointmentList';
import { useQuery } from '@apollo/client';
import { APPOINTMENTS_QUERY } from './appointment/AppointmentList';
export default function Calendar() {
const { data, loading } = useQuery(APPOINTMENTS_QUERY);

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

@@ -1,36 +0,0 @@
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;

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

@@ -1,185 +0,0 @@
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;

0
client/src/components/Appointment.js → client/src/components/appointment/Appointment.js
View File

5
client/src/components/AppointmentList.js → client/src/components/appointment/AppointmentList.js
View File

@@ -16,7 +16,7 @@ export const APPOINTMENTS_QUERY = gql`
const AppointmentList = () => {
const { data } = useQuery(APPOINTMENTS_QUERY);
const { data, loading } = useQuery(APPOINTMENTS_QUERY);
if (data !== undefined) {
return (
@@ -40,11 +40,8 @@ const AppointmentList = () => {
export default AppointmentList;
// import React from 'react';
// import Appointment from './Appointment';
// import { useHistory } from 'react-router';
// import { APPOINTMENTS_PER_PAGE } from '../constants';
// import { useQuery, gql } from '@apollo/client';
// import { Link } from 'react-router-dom';
// export const FEED_QUERY = gql`

26
client/src/components/CreateAppointment.js → client/src/components/appointment/CreateAppointment.js
View File

@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useHistory } from 'react-router';
import { useMutation, gql } from '@apollo/client';
import { APPOINTMENTS_PER_PAGE } from '../constants';
import { APPOINTMENTS_PER_PAGE } from '../../constants';
import { APPOINTMENTS_QUERY } from './AppointmentList';
import Datetime from 'react-datetime';
import "react-datetime/css/react-datetime.css";
@@ -9,13 +9,15 @@ import "react-datetime/css/react-datetime.css";
const CREATE_APPOINTMENT_MUTATION = gql`
mutation CreateAppointmentMutation(
$title: String!
$description: String!
$start: String!
$end: String!
$description: String
$type: String!
$start: DateTime!
$end: DateTime!
) {
createAppointment(title: $title, description: $description, start: $start, end: $end) {
createAppointment(title: $title, description: $description, type: $type, start: $start, end: $end) {
title
description
type
start
end
}
@@ -28,6 +30,7 @@ const CreateAppointment = () => {
const [formState, setFormState] = useState({
title: '',
description: '',
type: '',
start: '',
end: ''
});
@@ -36,6 +39,7 @@ const CreateAppointment = () => {
variables: {
title: formState.title,
description: formState.description,
type: formState.type,
start: formState.start,
end: formState.end
},
@@ -103,6 +107,18 @@ const CreateAppointment = () => {
type="text"
placeholder="Input description"
/>
<input
className="mb2"
value={formState.type}
onChange={(e) =>
setFormState({
...formState,
type: e.target.value
})
}
type="text"
placeholder="Input Type"
/>
<Datetime
className="mb2"
value={formState.start}

141
client/src/components/appointment/UpdateAppointment.js Normal file
View File

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

6
client/src/components/Header.js → client/src/components/layout/Header.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { useHistory } from 'react-router';
import { Link, withRouter } from 'react-router-dom';
import { AUTH_TOKEN } from '../constants';
import { AUTH_TOKEN } from '../../constants';
const Header = () => {
const history = useHistory();
@@ -9,13 +9,13 @@ const Header = () => {
return (
<div className="flex pa1 justify-between nowrap orange">
<div className="flex flex-fixed black">
<Link to="/" className="ml1 no-underline black">Top list</Link>
<Link to="/" className="ml1 no-underline black">List</Link>
</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>
<Link to="/create" className="ml1 no-underline black">New</Link>
</div>
<div className="flex flex-fixed">
{authToken ? (