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

Started with Moment and datetime

Browse Source
This commit is contained in:
Riccardo
2021-01-04 19:48:22 +01:00
parent 82055b4040
commit 4d021d6043
8 changed files with 113 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/package.json
View File

@@ -8,7 +8,9 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"graphql": "^15.4.0",
"moment": "^2.29.1",
"react": "^17.0.1",
"react-datetime": "^3.0.4",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",

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

@@ -1,8 +1,8 @@
import React from 'react';
// import CreateAppointment from './CreateAppointment';
import CreateAppointment from './CreateAppointment';
import Header from './Header';
import { Switch, Route } from 'react-router-dom';
import ProductList from './ProductList';
// import ProductList from './ProductList';
import AppointmentList from './AppointmentList';
const App = () => {
@@ -13,7 +13,7 @@ const App = () => {
<Switch>
{/* <Route exact path="/" component={ProductList} /> */}
<Route exact path="/" component={AppointmentList} />
{/* <Route exact path="/create" component={CreateAppointment} /> */}
<Route exact path="/create" component={CreateAppointment} />
</Switch>
</div>
</div>

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

@@ -2,11 +2,13 @@ import React from 'react';
import Appointment from './Appointment';
import { useQuery, gql } from '@apollo/client';
const APPOINTMENTS_QUERY = gql`
export const APPOINTMENTS_QUERY = gql`
{
allAppointments{
title
description
# dateStart
# dateEnd
timeStart
timeEnd
}

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

@@ -2,7 +2,9 @@ import React, { useState } from 'react';
import { useHistory } from 'react-router';
import { useMutation, gql } from '@apollo/client';
import { APPOINTMENTS_PER_PAGE } from '../constants';
import { FEED_QUERY } from './AppointmentList';
import { APPOINTMENTS_QUERY } from './AppointmentList';
import Datetime from 'react-datetime';
import "react-datetime/css/react-datetime.css";
const CREATE_APPOINTMENT_MUTATION = gql`
mutation CreateAppointmentMutation(
@@ -13,7 +15,8 @@ const CREATE_APPOINTMENT_MUTATION = gql`
id
title
description
createdAt
timeStart
timeEnd
}
}
`;
@@ -24,16 +27,16 @@ const CreateAppointment = () => {
const [formState, setFormState] = useState({
title: '',
description: '',
start: '',
end: ''
timeStart: '',
timeEnd: ''
});
const [createAppointment] = useMutation(CREATE_APPOINTMENT_MUTATION, {
variables: {
title: formState.title,
description: formState.description,
start: formState.start,
end: formState.end
timeStart: formState.timeStart,
timeEnd: formState.timeEnd
},
update: (cache, { data: { createAppointment } }) => {
const take = APPOINTMENTS_PER_PAGE;
@@ -41,7 +44,7 @@ const CreateAppointment = () => {
const orderBy = { createdAt: 'desc' };
const data = cache.readQuery({
query: FEED_QUERY,
query: APPOINTMENTS_QUERY,
variables: {
take,
skip,
@@ -50,10 +53,10 @@ const CreateAppointment = () => {
});
cache.writeQuery({
query: FEED_QUERY,
query: APPOINTMENTS_QUERY,
data: {
feed: {
appointments: [createAppointment, ...data.feed.appointments]
allAppointments: {
appointments: [createAppointment, ...data.allAppointments.appointments]
}
},
variables: {
@@ -85,7 +88,7 @@ const CreateAppointment = () => {
})
}
type="text"
placeholder="The title for the appointment"
placeholder="Input title"
/>
<input
className="mb2"
@@ -97,32 +100,40 @@ const CreateAppointment = () => {
})
}
type="text"
placeholder="A description for the appointment"
placeholder="Input description"
/>
<input
<Datetime
className="mb2"
value={formState.start}
value={formState.timeStart}
onChange={(e) =>
setFormState({
...formState,
start: e.target.value
timeStart: e
})
}
type="text"
placeholder="The start for the appointment"
/>
<input
<Datetime
className="mb2"
value={formState.end}
value={formState.timeStart}
onChange={(e) =>
setFormState({
...formState,
end: e.target.value
timeEnd: e
})
}
/>
{/* <input
className="mb2"
value={formState.timeEnd}
onChange={(e) =>
setFormState({
...formState,
timeStart: e.target.value
})
}
type="text"
placeholder="The end for the appointment"
/>
placeholder="Input end time"
/> */}
</div>
<button type="submit">Submit</button>
</form>

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

@@ -1,6 +1,6 @@
import React from 'react';
// import { useHistory } from 'react-router';
// import { Link, withRouter } from 'react-router-dom';
import { Link, withRouter } from 'react-router-dom';
const Header = () => {
// const history = useHistory();
@@ -8,16 +8,16 @@ const Header = () => {
<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">
new
<Link to="/" className="ml1 no-underline black">
Top list
</Link>
<div className="ml1">|</div>
<div className="ml1"> --- </div>
<Link
to="/create"
className="ml1 no-underline black"
>
submit
</Link> */}
Create new
</Link>
</div>
</div>
);

14
client/yarn.lock
View File

@@ -7328,6 +7328,11 @@ mkdirp@^1.0.3, mkdirp@^1.0.4:
resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
moment@^2.29.1:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
move-concurrently@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -8846,7 +8851,7 @@ prompts@2.4.0, prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.6.2, prop-types@^15.7.2:
prop-types@^15.5.7, prop-types@^15.6.2, prop-types@^15.7.2:
version "15.7.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9012,6 +9017,13 @@ react-app-polyfill@^2.0.0:
regenerator-runtime "^0.13.7"
whatwg-fetch "^3.4.1"
react-datetime@^3.0.4:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-datetime/-/react-datetime-3.0.4.tgz#176159d08d35c9e750f0be2f0b974e4f9532ffa5"
integrity sha512-v6MVwCve+DRaLN2f22LTO5TlrPpkUXumPkp1zfrbhaFtSYGl2grZ2JtwJfLxRj/T4ACyePAV4srCR6cMSiQ/Iw==
dependencies:
prop-types "^15.5.7"
react-dev-utils@^11.0.1:
version "11.0.1"
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.1.tgz#30106c2055acfd6b047d2dc478a85c356e66fe45"

29
server/src/resolvers.js
View File

@@ -1,17 +1,40 @@
// import Appointment from '../../client/src/components/Appointment.js';
import Product from './models/product.js';
import Appointment from './models/appointment.js';
// import { createAppointment } from './resolvers/Mutation.js';
export const resolvers = {
Query: {
async allProducts() {
return await Product.find();
},
async allAppointments() {
return await Appointment.find();
},
async allProducts() {
return await Product.find();
},
},
Mutation: {
async createAppointment(root, {
input
}) {
return await Appointment.create(input);
},
async updateAppointment(root, {
_id,
input
}) {
return await Appointment.findOneAndUpdate({
_id
}, input, {
new: true
})
},
async deleteAppointment(root, {
_id
}) {
return await Product.findOneAndRemove({
_id
});
},
async createProduct(root, {
input
}) {

38
server/src/schema.graphql
View File

@@ -19,11 +19,15 @@ type Feed {
type Mutation {
createAppointment(
title: String!,
description: String!,
timeStart: DateTime!,
timeEnd: DateTime!,
input: AppointmentInput
): Appointment!
updateAppointment(
_id: ID!,
input: AppointmentInput
): Appointment
deleteAppointment(
_id: ID!
) : Appointment
createProduct(
input: ProductInput
) : Product
@@ -65,23 +69,39 @@ type User {
appointments: [Appointment!]!
}
# Appointment model
type Appointment {
_id: ID!
title: String!
description: String!
timeStart: DateTime!
timeEnd: DateTime!
# dateStart: Date!
# dateEnd: Date!
timeStart: Time!
timeEnd: Time!
deleted: Boolean
# createdBy: User
# follows: [Follow!]!
# createdAt: DateTime!
}
input AppointmentInput {
title: String!
description: String!
# dateStart: Date!
# dateEnd: Date!
timeStart: Time!
timeEnd: Time!
}
# Product model
type Product {
_id: ID!
title: String!
qty: Int
}
input ProductInput {
title: String!
qty: Int
}
type Follow {
_id: ID!
@@ -89,11 +109,6 @@ type Follow {
user: User!
}
input ProductInput {
title: String!
qty: Int
}
input AppointmentOrderByInput {
description: Sort
@@ -107,3 +122,4 @@ enum Sort {
}
scalar DateTime
scalar Time