rushilwiz/wheelshare-frontend
1
0
Fork 0
mirror of https://github.com/myfatemi04/wheelshare-frontend.git synced 2025-04-21 11:20:17 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

reorganize Group

Browse Source
This commit is contained in:
Michael Fatemi 2021-07-14 20:38:17 -04:00
parent 052236e20a
commit c1d7741f74
4 changed files with 83 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/App.tsx
View File

@ -9,7 +9,7 @@ import WheelShareLoggedOut from './WheelShareLoggedOut';
const Authenticator = lazy(() => import('./Authentication/Authenticator'));
const CarpoolPage = lazy(() => import('./Carpool/CarpoolPage'));
const EventPage = lazy(() => import('./Event/EventPage'));
const Group = lazy(() => import('./Group'));
const Group = lazy(() => import('./Group/GroupPage'));
const style: CSSProperties = {
display: 'flex',
@ -36,13 +36,13 @@ export default function App() {
component={user ? WheelShare : WheelShareLoggedOut}
/>
<Suspense fallback={null}>
<Route path="/groups/:id" component={Group} />
<Route
component={Authenticator}
path="/auth/:provider/callback"
/>
<Route path="/carpools/:id" component={CarpoolPage} />
<Route path="/events/:id" component={EventPage} />
<Route path="/groups/:id" component={Group} />
</Suspense>
</Switch>
</BrowserRouter>

67
src/components/Group.tsx
View File

@ -1,67 +0,0 @@
import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { getGroup, getGroupEvents } from './api';
import EventCreatorLink from './EventCreator/EventCreatorLink';
import EventStream from './EventStream';
import GroupSettingsLink from './GroupSettings/GroupSettingsLink';
import { IEvent, IGroup } from './types';
import UILink from './UI/UILink';
export default function Group() {
const { id } = useParams<{ id: string }>();
const [loading, setLoading] = useState(true);
const [group, setGroup] = useState<IGroup | null>(null);
const [events, setEvents] = useState<IEvent[]>([]);
useEffect(() => {
setLoading(true);
getGroup(+id)
.then(setGroup)
.finally(() => setLoading(false));
getGroupEvents(+id).then(setEvents);
}, [id]);
if (!group && !loading) {
return (
<div style={{ textAlign: 'center' }}>
<h1>Group Not Found</h1>
<Link to="/">Home</Link>
</div>
);
}
if (!group) {
return null;
}
const { name } = group;
return (
<div
style={{
textAlign: 'center',
maxWidth: '30rem',
marginLeft: 'auto',
marginRight: 'auto',
}}
>
<h1>{name}</h1>
<UILink href="/">Home</UILink>
<br />
<br />
<GroupSettingsLink group={group} />
<br />
<EventCreatorLink group={group} />
<br />
{events && events.length > 0 ? (
<EventStream events={events} />
) : (
<span>
There are no events yet. Click 'create event' above to add one!
</span>
)}
</div>
);
}

35
src/components/Group/Group.tsx Normal file
View File

@ -0,0 +1,35 @@
import events from 'events';
import EventCreatorLink from '../EventCreator/EventCreatorLink';
import EventStream from '../EventStream';
import GroupSettingsLink from '../GroupSettings/GroupSettingsLink';
import { IGroup } from '../types';
import UILink from '../UI/UILink';
export default function Group({ group }: { group: IGroup }) {
return (
<div
style={{
textAlign: 'center',
maxWidth: '30rem',
marginLeft: 'auto',
marginRight: 'auto',
}}
>
<h1>{group.name}</h1>
<UILink href="/">Home</UILink>
<br />
<br />
<GroupSettingsLink group={group} />
<br />
<EventCreatorLink group={group} />
<br />
{events && events.length > 0 ? (
<EventStream events={group.events} />
) : (
<span>
There are no events yet. Click 'create event' above to add one!
</span>
)}
</div>
);
}

46
src/components/Group/GroupPage.tsx Normal file
View File

@ -0,0 +1,46 @@
import { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import { Link } from 'react-router-dom';
import { getGroup, getGroupEvents } from '../api';
import { IGroup } from '../types';
import Group from './Group';
export default function GroupPage() {
const { id } = useParams<{ id: string }>();
const [loading, setLoading] = useState(true);
const [group, setGroup] = useState<IGroup | null>(null);
useEffect(() => {
async function load() {
setLoading(true);
try {
const group = await getGroup(+id);
const events = await getGroupEvents(+id);
setGroup({ ...group, events });
} catch (e) {
console.error(e);
setGroup(null);
}
setLoading(false);
}
load();
}, [id]);
if (!group && !loading) {
return (
<div style={{ textAlign: 'center' }}>
<h1>Group Not Found</h1>
<Link to="/">Home</Link>
</div>
);
}
if (!group) {
return null;
}
return <Group group={group} />;
}