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-03 20:53:38 +01:00
parent e72890fe28
commit 61acbf02d8
12 changed files with 282 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,9 @@
// import logo from './../logo.svg';
// import './../styles/App.css';
import React, { Component } from 'react';
import AppointmentList from './AppointmentList';
import CreateAppointment from './CreateAppointment'
import React from 'react';
// import CreateAppointment from './CreateAppointment';
import Header from './Header';
import Login from './Login'
import Search from './Search';
import { Redirect, Route, Switch } from 'react-router-dom';
// import AppointmentList from './AppointmentList';
import ProductList from './ProductList';
import { Switch, Route } from 'react-router-dom';
const App = () => {
return (
@@ -15,19 +11,9 @@ const App = () => {
<Header />
<div className="ph3 pv1 background-gray">
<Switch>
<Route exact path="/" component={AppointmentList} />
<Route
exact
path="/create"
component={CreateAppointment}
/>
<Route exact path="/login" component={Login} />
<Route exact path="/search" component={Search} />
<Route
exact
path="/new/:page"
component={AppointmentList}
/>
<Route exact path="/" component={ProductList} />
{/* <Route exact path="/" component={AppointmentList} /> */}
{/* <Route exact path="/create" component={CreateAppointment} /> */}
</Switch>
</div>
</div>
@@ -35,3 +21,42 @@ const App = () => {
};
export default App;
// // import logo from './../logo.svg';
// // import './../styles/App.css';
// import React, { Component } from 'react';
// import AppointmentList from './AppointmentList';
// import CreateAppointment from './CreateAppointment'
// // import Header from './Header';
// import Login from './Login'
// import Search from './Search';
// import { Redirect, Route, Switch } from 'react-router-dom';
// const App = () => {
// return (
// <div className="center w85">
// <Header />
// <div className="ph3 pv1 background-gray">
// <Switch>
// <Route exact path="/" component={AppointmentList} />
// <Route
// exact
// path="/create"
// component={CreateAppointment}
// />
// <Route exact path="/login" component={Login} />
// <Route exact path="/search" component={Search} />
// <Route
// exact
// path="/new/:page"
// component={AppointmentList}
// />
// </Switch>
// </div>
// </div>
// );
// };
// export default App;

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

@@ -6,56 +6,56 @@ import { useQuery, gql } from '@apollo/client';
import { Link } from 'react-router-dom';
export const FEED_QUERY = gql`
query FeedQuery(
query AppointmentManyQuery(
$take: Int
$skip: Int
$orderBy: AppointmentOrderByInput
) {
feed(take: $take, skip: $skip, orderBy: $orderBy) {
appointmentMany(take: $take, skip: $skip, orderBy: $orderBy) {
id
appointments {
id
createdAt
title
start
end
# start
# end
description
createdBy {
id
name
}
follows {
id
user {
id
}
}
# createdBy {
# id
# name
# }
# follows {
# id
# user {
# id
# }
# }
}
count
}
}
`;
const NEW_APPOINTMENTS_SUBSCRIPTION = gql`
subscription {
newAppointment {
id
url
description
createdAt
createdBy {
id
name
}
follows {
id
user {
id
}
}
}
}
`;
// const NEW_APPOINTMENTS_SUBSCRIPTION = gql`
// subscription {
// newAppointment {
// id
// url
// description
// createdAt
// createdBy {
// id
// name
// }
// follows {
// id
// user {
// id
// }
// }
// }
// }
// `;
const getQueryVariables = (isNewPage, page) => {
const skip = isNewPage ? (page - 1) * APPOINTMENTS_PER_PAGE : 0;
@@ -102,25 +102,25 @@ const AppointmentList = () => {
return rankedAppointments;
};
subscribeToMore({
document: NEW_APPOINTMENTS_SUBSCRIPTION,
updateQuery: (prev, { subscriptionData }) => {
if (!subscriptionData.data) return prev;
const newAppointment = subscriptionData.data.newAppointment;
const exists = prev.feed.appointments.find(
({ id }) => id === newAppointment.id
);
if (exists) return prev;
// subscribeToMore({
// document: NEW_APPOINTMENTS_SUBSCRIPTION,
// updateQuery: (prev, { subscriptionData }) => {
// if (!subscriptionData.data) return prev;
// const newAppointment = subscriptionData.data.newAppointment;
// const exists = prev.feed.appointments.find(
// ({ id }) => id === newAppointment.id
// );
// if (exists) return prev;
return Object.assign({}, prev, {
feed: {
appointments: [newAppointment, ...prev.feed.appointments],
count: prev.feed.appointments.length + 1,
__typename: prev.feed.__typename
}
});
}
});
// return Object.assign({}, prev, {
// feed: {
// appointments: [newAppointment, ...prev.feed.appointments],
// count: prev.feed.appointments.length + 1,
// __typename: prev.feed.__typename
// }
// });
// }
// });
return (
<>

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

@@ -1,11 +1,9 @@
import React from 'react';
import { useHistory } from 'react-router';
import { Link } from 'react-router-dom';
import { AUTH_TOKEN } from '../constants';
import { Link, withRouter } from 'react-router-dom';
const Header = () => {
const history = useHistory();
const authToken = localStorage.getItem(AUTH_TOKEN);
return (
<div className="flex pa1 justify-between nowrap orange">
<div className="flex flex-fixed black">
@@ -14,47 +12,15 @@ const Header = () => {
new
</Link>
<div className="ml1">|</div>
<Link to="/top" className="ml1 no-underline black">
top
</Link>
<div className="ml1">|</div>
<Link to="/search" className="ml1 no-underline black">
search
</Link>
{authToken && (
<div className="flex">
<div className="ml1">|</div>
<Link
to="/create"
className="ml1 no-underline black"
>
submit
</Link>
</div>
)}
</div>
<div className="flex flex-fixed">
{authToken ? (
<div
className="ml1 pointer black"
onClick={() => {
localStorage.removeItem(AUTH_TOKEN);
history.push(`/`);
}}
>
logout
</div>
) : (
<Link
to="/login"
className="ml1 no-underline black"
>
login
</Link>
)}
<Link
to="/create"
className="ml1 no-underline black"
>
submit
</Link>
</div>
</div>
);
};
export default Header;
export default Header;

14
client/src/components/Product.js Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react';
const Product = (props) => {
const { product } = props;
return (
<div>
<div>
<b>{product.title}</b>: only {product.qty}!
</div>
</div>
);
};
export default Product;

29
client/src/components/ProductList.js Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import Product from './Product';
import { useQuery, gql } from '@apollo/client';
const FEED_QUERY = gql`
{
allProducts{
title
qty
}
}
`;
const ProductList = () => {
const { data } = useQuery(FEED_QUERY);
console.log("Fah!", data);
return (
<div>
{data.allProducts.map((product) => (
<Product key={product.id} product={product} />
))}
</div>
);
};
export default ProductList;

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

@@ -52,10 +52,10 @@ const Search = () => {
OK
</button>
</div>
{data &&
{/* {data &&
data.feed.appointments.map((appointment, index) => (
<Link key={appointment.id} link={appointment} index={index} />
))}
))} */}
</>
);
};

11
client/src/index.js
View File

@@ -2,6 +2,7 @@ import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './components/App';
import { BrowserRouter } from 'react-router-dom';
// import * as serviceWorker from './serviceWorker';
// 1
@@ -14,7 +15,7 @@ import {
// 2
const httpLink = createHttpLink({
uri: 'http://localhost:4000'
uri: 'http://localhost:5000/graphql'
});
// 3
@@ -25,9 +26,11 @@ const client = new ApolloClient({
// 4
ReactDOM.render(
<ApolloProvider client={client}>
<App />
</ApolloProvider>,
<BrowserRouter>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</BrowserRouter>,
document.getElementById('root')
);
// serviceWorker.unregister();