Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Made meetup demo functional again #2607

Merged
merged 5 commits into from
Mar 30, 2020
Merged

Made meetup demo functional again #2607

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ebed771
Refactored out last @apollo/react-hoc usecase
Vultraz Mar 30, 2020
dea058b
Made meetup demo functional again
Vultraz Mar 30, 2020
695e4e7
Changeset
Vultraz Mar 30, 2020
b5c7cee
Formatting
Vultraz Mar 30, 2020
8715b8c
Merge branch 'master' into remove-apollo-hoc
timleslie Mar 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/gold-olives-fix.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@keystonejs/demo-project-meetup': patch
---

Made the Meetup demo functional again, and refactored out last use of withApollo.
1 change: 0 additions & 1 deletion demo-projects/meetup/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
"start": "cross-env NODE_ENV=production keystone start"
},
"dependencies": {
"@apollo/react-hoc": "^3.1.3",
"@apollo/react-hooks": "^3.1.3",
"@apollo/react-ssr": "^3.1.3",
"@emotion/core": "^10.0.27",
Expand Down
8 changes: 6 additions & 2 deletions demo-projects/meetup/site/components/Meta.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,17 +31,21 @@ const rootTags = [
<meta name="twitter:image" content={logoPath} />,
];

const addKeys = tags => {
return tags.map(({ type: Tag, key, props }, idx) => <Tag key={key || idx} {...props} />);
};

function getUniqueTags(children) {
// NOTE: the concatenation order is important for the unique filter;
// we want to give `children` precedence over root tags.
const tags = Children.toArray(children.concat(rootTags));
const uniqueTags = uniqBy(tags, t => t.props.name || t.props.property);
return uniqueTags.map((tag, idx) => <tag.type key={tag.key || idx} {...tag.props} />);
return addKeys(uniqueTags);
}

export default function PageMeta({ children, description, title, titleExclusive }) {
const titleContent = titleExclusive ? titleExclusive : title ? `${title} | ${meetup.name}` : null;
const uniqueTags = children ? getUniqueTags(children) : rootTags;
const uniqueTags = children ? getUniqueTags(children) : addKeys(rootTags);

return (
<Head>
Expand Down
8 changes: 5 additions & 3 deletions demo-projects/meetup/site/components/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/** @jsx jsx */

import { useContext, createContext } from 'react';
import { useContext, createContext, forwardRef } from 'react';
import getConfig from 'next/config';
import { jsx } from '@emotion/core';

Expand All @@ -18,13 +18,14 @@ const useTheme = () => useContext(ThemeContext);
const { publicRuntimeConfig } = getConfig();
const { meetup } = publicRuntimeConfig;

const NavAnchor = props => {
const NavAnchor = forwardRef((props, ref) => {
const { foreground } = useTheme();
const paddingHorizontal = [gridSize, gridSize, gridSize * 3];
const paddingVertical = gridSize;

return (
<a
ref={ref}
css={mq({
color: foreground,
display: 'inline-block',
Expand All @@ -42,7 +43,8 @@ const NavAnchor = props => {
{...props}
/>
);
};
});

const NavLink = ({ href, as, ...props }) => (
<Link href={href} as={as} passHref>
<NavAnchor {...props} />
Expand Down
39 changes: 20 additions & 19 deletions demo-projects/meetup/site/components/Rsvp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/** @jsx jsx */
import { useMutation, useQuery } from '@apollo/react-hooks';
import { useMutation, useLazyQuery } from '@apollo/react-hooks';
import { jsx } from '@emotion/core';

import { Button as ButtonPrimitive, CheckmarkIcon, Loading } from '../primitives';
Expand Down Expand Up @@ -28,22 +28,16 @@ const Rsvp = ({ children, event, text, themeColor }) => {
const eventId = event.id;
const isPast = new Date() > new Date(event.startTime);

const { data, loading: loadingData, error } = useQuery(GET_RSVPS, {
variables: { event: eventId, user: user.id },
});
const [
getRsvps,
{ data: { userRsvps, eventRsvps, event: RSVPEvent } = {}, called, loading: loadingData, error },
] = useLazyQuery(GET_RSVPS);

const refetch = () => [
{
query: GET_RSVPS,
variables: { event: eventId, user: user.id },
},
];
const userResponse = userRsvps && userRsvps[0];
const hasResponded = Boolean(userResponse);

const [updateRsvp, { error: mutationError, loading: mutationLoading }] = useMutation(
hasResponded ? UPDATE_RSVP : ADD_RSVP,
{
refetchQueries: refetch,
}
hasResponded ? UPDATE_RSVP : ADD_RSVP
);

if (isLoading) {
Expand All @@ -69,6 +63,11 @@ const Rsvp = ({ children, event, text, themeColor }) => {
});
}

// Launch the query now that we know `user` isn't null (happens if there's no authed user)
if (!called) {
getRsvps({ variables: { event: eventId, user: user.id } });
}

if (error) {
console.error(error);
return null;
Expand All @@ -85,11 +84,7 @@ const Rsvp = ({ children, event, text, themeColor }) => {
});
}

// TODO: is this event the same as the event passed to this component?
const { userRsvps, eventRsvps, event: eventName } = data;
const userResponse = userRsvps && userRsvps[0];
const hasResponded = Boolean(userResponse);
const { okay, message } = validateRsvp({ userRsvps, eventRsvps, eventName });
const { okay, message } = validateRsvp({ userRsvps, eventRsvps, event: RSVPEvent });

if (!okay) {
return children({ message });
Expand All @@ -107,6 +102,12 @@ const Rsvp = ({ children, event, text, themeColor }) => {
user: user.id,
status,
},
refetchQueries: [
{
query: GET_RSVPS,
variables: { event: eventId, user: user.id },
},
],
});
const respondYes = () => doRespond('yes');
const respondNo = () => doRespond('no');
Expand Down
2 changes: 1 addition & 1 deletion demo-projects/meetup/site/components/auth/signin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default ({ onSuccess, onClickForgot }) => {

setIsLoading(true);
try {
await signin({ email, password });
await signin({ variables: { email, password } });
setIsLoading(false);
setErrorState(false);
if (onSuccess && typeof onSuccess === 'function') {
Expand Down
2 changes: 1 addition & 1 deletion demo-projects/meetup/site/components/auth/signup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default () => {
const handleSignin = async () => {
setIsLoading(true);
try {
await signin({ email, password });
await signin({ variables: { email, password } });
setIsLoading(false);
setErrorState(false);
} catch (error) {
Expand Down
Loading