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

better ui in carpool

Browse Source
This commit is contained in:
Michael Fatemi 2021-07-24 18:33:21 -04:00
parent 54ed65a037
commit 9fd6daa826
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Carpool/CarpoolRouteEstimator.tsx
View File

@ -46,11 +46,20 @@ export default function CarpoolRouteEstimator() {
return ( return (
<div <div
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }} style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
boxSizing: 'border-box',
padding: '0rem 2rem',
}}
> >
<h2>Route Optimization</h2> <h2>Route Optimization</h2>
{path ? ( {path ? (
<div style={{ display: 'flex', flexDirection: 'column' }}> <div
style={{ display: 'flex', flexDirection: 'column', width: '100%' }}
>
<span>Best route: {path.distance.toFixed(1)} miles</span> <span>Best route: {path.distance.toFixed(1)} miles</span>
<br /> <br />
{(() => { {(() => {

27
src/components/Carpool/MemberList.tsx
View File

@ -1,5 +1,6 @@
import AccountCircleIcon from '@material-ui/icons/AccountCircle'; import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import { useContext } from 'react'; import { useContext, useMemo, useState } from 'react';
import UIPressable from '../UI/UIPressable';
import { CarpoolContext } from './Carpool'; import { CarpoolContext } from './Carpool';
function MemberRow({ member }: { member: { id: number; name: string } }) { function MemberRow({ member }: { member: { id: number; name: string } }) {
@ -27,8 +28,13 @@ const shownMembersCount = 2;
export default function MemberList() { export default function MemberList() {
const { carpool } = useContext(CarpoolContext); const { carpool } = useContext(CarpoolContext);
const [expanded, setExpanded] = useState(false);
const members = carpool.members; const members = carpool.members;
const membersToShow = members.slice(0, shownMembersCount); const membersToShow = useMemo(
() => (expanded ? members : members.slice(0, shownMembersCount)),
[members, expanded]
);
const hiddenMemberCount = members.length - membersToShow.length; const hiddenMemberCount = members.length - membersToShow.length;
return ( return (
@ -38,15 +44,28 @@ export default function MemberList() {
flexDirection: 'column', flexDirection: 'column',
alignSelf: 'center', alignSelf: 'center',
alignItems: 'center', alignItems: 'center',
boxSizing: 'border-box',
padding: '0rem 2rem',
width: '100%',
}} }}
> >
<h2 style={{ marginBlockEnd: '0.5rem' }}>Members</h2> <h2 style={{ marginBlockEnd: '0.5rem' }}>Members</h2>
{members.length > 0 ? ( {members.length > 0 ? (
<div style={{ display: 'flex', flexDirection: 'column' }}> <div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
// alignItems: 'center',
}}
>
{membersToShow.map((member) => ( {membersToShow.map((member) => (
<MemberRow member={member} key={member.id} /> <MemberRow member={member} key={member.id} />
))} ))}
{formatOthers(hiddenMemberCount)} <br />
<UIPressable onClick={() => setExpanded((e) => !e)}>
{expanded ? 'Hide' : formatOthers(hiddenMemberCount)}
</UIPressable>
</div> </div>
) : ( ) : (
'This carpool has no members.' 'This carpool has no members.'