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 React from 'react';
import Header from './Header'; import Header from './layout/Header';
import Login from './Login'; import Login from './Login';
import AppointmentList from './AppointmentList'; import AppointmentList from './appointment/AppointmentList';
import CreateAppointment from './CreateAppointment'; import CreateAppointment from './appointment/CreateAppointment';
import UpdateAppointemnt from './UpdateAppointment'; import UpdateAppointemnt from './appointment/UpdateAppointment';
import Calendar from './Calendar'; import Calendar from './Calendar';
import { Switch, Route } from 'react-router-dom'; import { Switch, Route } from 'react-router-dom';
// import ProductList from './ProductList'; // import ProductList from './ProductList';
import Events from './Events';
const App = () => { const App = () => {
return ( return (
@@ -17,7 +16,6 @@ const App = () => {
<Switch> <Switch>
{/* <Route exact path="/" component={ProductList} /> */} {/* <Route exact path="/" component={ProductList} /> */}
<Route exact path="/" component={AppointmentList} /> <Route exact path="/" component={AppointmentList} />
{/* <Route exact path="/events" component={Events} /> */}
<Route exact path="/create" component={CreateAppointment} /> <Route exact path="/create" component={CreateAppointment} />
<Route exact path="/update/:_id" component={UpdateAppointemnt} /> <Route exact path="/update/:_id" component={UpdateAppointemnt} />
<Route exact path="/login" component={Login} /> <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 FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid' import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction";
import { useQuery, gql } from '@apollo/client'; import { useQuery } from '@apollo/client';
import { APPOINTMENTS_QUERY } from './AppointmentList'; import { APPOINTMENTS_QUERY } from './appointment/AppointmentList';
export default function Calendar() { export default function Calendar() {
const { data, loading } = useQuery(APPOINTMENTS_QUERY); 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 AppointmentList = () => {
const { data } = useQuery(APPOINTMENTS_QUERY); const { data, loading } = useQuery(APPOINTMENTS_QUERY);
if (data !== undefined) { if (data !== undefined) {
return ( return (
@@ -40,11 +40,8 @@ const AppointmentList = () => {
export default AppointmentList; export default AppointmentList;
// import React from 'react';
// import Appointment from './Appointment';
// import { useHistory } from 'react-router'; // import { useHistory } from 'react-router';
// import { APPOINTMENTS_PER_PAGE } from '../constants'; // import { APPOINTMENTS_PER_PAGE } from '../constants';
// import { useQuery, gql } from '@apollo/client';
// import { Link } from 'react-router-dom'; // import { Link } from 'react-router-dom';
// export const FEED_QUERY = gql` // 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 React, { useState } from 'react';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { useMutation, gql } from '@apollo/client'; import { useMutation, gql } from '@apollo/client';
import { APPOINTMENTS_PER_PAGE } from '../constants'; import { APPOINTMENTS_PER_PAGE } from '../../constants';
import { APPOINTMENTS_QUERY } from './AppointmentList'; import { APPOINTMENTS_QUERY } from './AppointmentList';
import Datetime from 'react-datetime'; import Datetime from 'react-datetime';
import "react-datetime/css/react-datetime.css"; import "react-datetime/css/react-datetime.css";
@@ -9,13 +9,15 @@ import "react-datetime/css/react-datetime.css";
const CREATE_APPOINTMENT_MUTATION = gql` const CREATE_APPOINTMENT_MUTATION = gql`
mutation CreateAppointmentMutation( mutation CreateAppointmentMutation(
$title: String! $title: String!
$description: String! $description: String
$start: String! $type: String!
$end: 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 title
description description
type
start start
end end
} }
@@ -28,6 +30,7 @@ const CreateAppointment = () => {
const [formState, setFormState] = useState({ const [formState, setFormState] = useState({
title: '', title: '',
description: '', description: '',
type: '',
start: '', start: '',
end: '' end: ''
}); });
@@ -36,6 +39,7 @@ const CreateAppointment = () => {
variables: { variables: {
title: formState.title, title: formState.title,
description: formState.description, description: formState.description,
type: formState.type,
start: formState.start, start: formState.start,
end: formState.end end: formState.end
}, },
@@ -103,6 +107,18 @@ const CreateAppointment = () => {
type="text" type="text"
placeholder="Input description" placeholder="Input description"
/> />
<input
className="mb2"
value={formState.type}
onChange={(e) =>
setFormState({
...formState,
type: e.target.value
})
}
type="text"
placeholder="Input Type"
/>
<Datetime <Datetime
className="mb2" className="mb2"
value={formState.start} 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 React from 'react';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { Link, withRouter } from 'react-router-dom'; import { Link, withRouter } from 'react-router-dom';
import { AUTH_TOKEN } from '../constants'; import { AUTH_TOKEN } from '../../constants';
const Header = () => { const Header = () => {
const history = useHistory(); const history = useHistory();
@@ -9,13 +9,13 @@ const Header = () => {
return ( return (
<div className="flex pa1 justify-between nowrap orange"> <div className="flex pa1 justify-between nowrap orange">
<div className="flex flex-fixed black"> <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>
<div className="flex flex-fixed black"> <div className="flex flex-fixed black">
<Link to="/calendar" className="ml1 no-underline black">Calendar</Link> <Link to="/calendar" className="ml1 no-underline black">Calendar</Link>
</div> </div>
<div className="flex flex-fixed"> <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>
<div className="flex flex-fixed"> <div className="flex flex-fixed">
{authToken ? ( {authToken ? (

4
server/src/models/appointment.js
View File

@@ -9,6 +9,10 @@ const AppointmentSchema = new Schema({
type: String, type: String,
required: false required: false
}, },
type: {
type: String,
required: true
},
start: { start: {
type: Date, type: Date,
required: true required: true

13
server/src/resolvers.js
View File

@@ -10,10 +10,10 @@ import dotenv from 'dotenv';
export const resolvers = { export const resolvers = {
Query: { Query: {
async allAppointments() { async allAppointments() {
return await Appointment.find(); return await Appointment.find({ deleted: false })
// return await Appointment.find();
}, },
async oneAppointment(root, args, context, info) { async oneAppointment(root, args, context, info) {
console.log(args);
return await Appointment.findOne({ return await Appointment.findOne({
_id: args._id _id: args._id
}); });
@@ -73,6 +73,7 @@ export const resolvers = {
}, },
async createAppointment(parent, args, context, info) { async createAppointment(parent, args, context, info) {
args.deleted = false;
return await Appointment.create(args); return await Appointment.create(args);
}, },
async updateAppointment(parent, args, context, info) { async updateAppointment(parent, args, context, info) {
@@ -83,12 +84,8 @@ export const resolvers = {
}) })
}, },
async deleteAppointment(parent, args, context, info) { async deleteAppointment(parent, args, context, info) {
console.log(args); return await Appointment.findOneAndUpdate({ _id: args._id }, { deleted: true })
return await Appointment.deleteOne({ _id: args._id }).then(function () { // return await Appointment.deleteOne({ _id: args._id });
console.log("Data deleted"); // Success
}).catch(function (error) {
console.log(error); // Failure
});
}, },
async createProduct(root, { async createProduct(root, {
input input

1
server/src/resolvers/Mutation.js
View File

@@ -17,7 +17,6 @@ function createAppointment(parent, args, context, info) {
} }
async function signup(parent, args, context, info) { async function signup(parent, args, context, info) {
console.log(context.mongo);
const password = await bcrypt.hash(args.password, 10); const password = await bcrypt.hash(args.password, 10);
const user = await context.mongo.user.create({ const user = await context.mongo.user.create({
data: { ...args, password } data: { ...args, password }

2
server/src/resolvers/Query.js
View File

@@ -8,7 +8,7 @@ async function feed(parent, args, context, info) {
] ]
} }
: {}; : {};
console.log(context.mongo);
const appointments = await context.mongo.appointment.findMany({ const appointments = await context.mongo.appointment.findMany({
where, where,
skip: args.skip, skip: args.skip,

36
server/src/schema.graphql
View File

@@ -24,15 +24,20 @@ type Feed {
type Mutation { type Mutation {
createAppointment( createAppointment(
title: String! title: String!
description: String! description: String
start: String! type: String!
end: String! start: DateTime!
end: DateTime!
deleted: Boolean
): Appointment! ): Appointment!
updateAppointment( updateAppointment(
_id: ID!, _id: ID!,
title: String! title: String!
description: String! description: String
start: String! type: String!
start: DateTime!
end: DateTime!
deleted: Boolean
): Appointment ): Appointment
deleteAppointment( deleteAppointment(
_id: ID! _id: ID!
@@ -89,9 +94,10 @@ type AuthPayload {
type Appointment { type Appointment {
_id: ID! _id: ID!
title: String! title: String!
description: String! description: String
start: Time! type: String!
end: Time! start: DateTime!
end: DateTime!
deleted: Boolean deleted: Boolean
# createdBy: User # createdBy: User
# follows: [Follow!]! # follows: [Follow!]!
@@ -99,14 +105,16 @@ type Appointment {
} }
input AppointmentInput { input AppointmentInput {
title: String! title: String!
description: String! description: String
start: Time! type: String!
end: Time! start: DateTime!
end: DateTime!
deleted: Boolean
} }
input AppointmentOrderByInput { input AppointmentOrderByInput {
description: Sort title: Sort
url: Sort desc: Sort
createdAt: Sort # createdAt: Sort
} }
# Product schemas # Product schemas

3
server/src/utils/db.js
View File

@@ -19,6 +19,9 @@ const connection = mongoose.connect(process.env.MONGODB_URI, {
}); });
mongoose.set('useCreateIndex', true); mongoose.set('useCreateIndex', true);
mongoose.set('useNewUrlParser', true);
mongoose.set('useFindAndModify', false);
mongoose.set('useUnifiedTopology', true);
connection connection
.then(db => db) .then(db => db)