Started with Moment and datetime
This commit is contained in:
Riccardo
@@ -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",
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user