feat(matches): improve usability/redesign (#431)

boklisten · May 30, 2024 · d60d957 · d60d957
1 parent 7570625
commit d60d957
Show file tree

Hide file tree

Showing 13 changed files with 243 additions and 213 deletions.
diff --git a/src/components/matches/MatchDetail.tsx b/src/components/matches/MatchDetail.tsx
@@ -1,13 +1,6 @@
 import { MatchVariant, MatchWithDetails } from "@boklisten/bl-model";
 import { ArrowBack } from "@mui/icons-material";
-import {
-  Alert,
-  Button,
-  Card,
-  Container,
-  Skeleton,
-  Typography,
-} from "@mui/material";
+import { Alert, Button, Card, Container, Skeleton } from "@mui/material";
 import React from "react";
 import useSWR from "swr";
 
@@ -66,7 +59,6 @@ const MatchDetail = ({ matchId }: { matchId: string }) => {
         >
           <Button startIcon={<ArrowBack />}>Alle overleveringer</Button>
         </DynamicLink>
-        <Typography variant="h1">Overlevering av bøker</Typography>
 
         {match._variant === MatchVariant.StandMatch && (
           <StandMatchDetail match={match} currentUserId={userId} />

diff --git a/src/components/matches/MeetingInfo.tsx b/src/components/matches/MeetingInfo.tsx
@@ -5,39 +5,39 @@ import { Box, Typography } from "@mui/material";
 import React from "react";
 
 import DynamicLink from "@/components/DynamicLink";
-import { formatDatetime } from "@/components/matches/matchesList/helper";
+import { FormattedDatetime } from "@/components/matches/matchesList/helper";
 
 const MeetingInfo = ({ match }: { match: MatchWithDetails }) => {
   const meetingTime = match.meetingInfo.date;
   const meetingLocation = match.meetingInfo.location;
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "left" }}>
-      <Box sx={{ display: "flex", marginTop: ".2rem", alignItems: "center" }}>
-        <PlaceIcon sx={{ marginRight: ".2rem" }} />
-        <Typography fontWeight="bold" variant={"subtitle1"}>
-          {meetingLocation}
-        </Typography>
-      </Box>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "left",
+        my: ".2rem",
+        fontSize: "inherit",
+      }}
+    >
       <Box sx={{ display: "flex", marginTop: ".2rem", alignItems: "center" }}>
         <ScheduleIcon sx={{ marginRight: ".2rem" }} />
         {(meetingTime && (
-          <>
-            <Typography fontWeight="bold" variant={"subtitle1"}>
-              {formatDatetime(new Date(meetingTime))}
-            </Typography>
-          </>
+          <FormattedDatetime date={new Date(meetingTime)} />
         )) || (
-          <>
-            <Typography sx={{ whiteSpace: "pre" }}>
-              Du kan møte opp når som helst i{" "}
-              <DynamicLink variant="body1" href="/info/branch/select">
-                skolens åpningstider
-              </DynamicLink>
-            </Typography>
-          </>
+          <Typography>
+            Du kan møte opp når som helst i{" "}
+            <DynamicLink variant="body1" href="/info/branch/select">
+              skolens åpningstider
+            </DynamicLink>
+          </Typography>
         )}
       </Box>
+      <Box sx={{ display: "flex", marginTop: ".2rem", alignItems: "center" }}>
+        <PlaceIcon sx={{ marginRight: ".2rem" }} />
+        <Typography>{meetingLocation}</Typography>
+      </Box>
     </Box>
   );
 };

diff --git a/src/components/matches/OtherPersonContact.tsx b/src/components/matches/OtherPersonContact.tsx
@@ -27,15 +27,37 @@ const OtherPersonContact = ({
       sx={{ display: "flex", alignItems: "center", justifyContent: "left" }}
     >
       <PhoneIphoneIcon sx={{ marginRight: ".2rem" }} />
-      <Box>
-        <Typography>{otherPerson.name}</Typography>
-
-        <DynamicLink href={`tel:+47${otherPerson.phone}`}>
-          {otherPerson.phone}
+      <Typography>
+        {otherPerson.name},{" "}
+        <DynamicLink
+          sx={{ fontSize: "inherit" }}
+          href={`tel:+47${otherPerson.phone}`}
+        >
+          {formatPhoneNumber(otherPerson.phone)}
         </DynamicLink>
-      </Box>
+      </Typography>
     </Box>
   );
 };
 
+function formatPhoneNumber(number: string): string {
+  if (/\d{8}/.exec(number) !== null) {
+    return (
+      number.slice(0, 3) + " " + number.slice(3, 5) + " " + number.slice(5, 8)
+    );
+  }
+  if (/\d{10}/.exec(number) !== null) {
+    return (
+      number.slice(2) +
+      " " +
+      number.slice(2, 5) +
+      " " +
+      number.slice(5, 7) +
+      " " +
+      number.slice(7, 10)
+    );
+  }
+  return number;
+}
+
 export default OtherPersonContact;
diff --git a/src/components/matches/StandMatchDetail.tsx b/src/components/matches/StandMatchDetail.tsx
@@ -1,4 +1,4 @@
-import { Alert } from "@mui/material";
+import { Alert, Typography } from "@mui/material";
 import React from "react";
 
 import {
@@ -7,6 +7,7 @@ import {
   ItemStatus,
   MatchHeader,
 } from "@/components/matches/matches-helper";
+import { StandMatchTitle } from "@/components/matches/matchesList/helper";
 import ProgressBar from "@/components/matches/matchesList/ProgressBar";
 import MatchItemTable from "@/components/matches/MatchItemTable";
 import MeetingInfo from "@/components/matches/MeetingInfo";
@@ -49,6 +50,10 @@ const StandMatchDetail = ({
 
   return (
     <>
+      <Typography variant="h1">
+        <StandMatchTitle match={match} />
+      </Typography>
+
       {isFulfilled && (
         <Alert sx={{ marginTop: "1rem", marginBottom: "1rem" }}>
           Du har mottatt og levert alle bøkene for denne overleveringen.
@@ -99,7 +104,7 @@ const StandMatchDetail = ({
         </>
       )}
 
-      <MatchHeader>Du skal på stand ved</MatchHeader>
+      <MatchHeader>Du skal på stand:</MatchHeader>
       <MeetingInfo match={match} />
 
       <MatchHeader>Kontaktinformasjon</MatchHeader>

diff --git a/src/components/matches/UserMatchDetail.tsx b/src/components/matches/UserMatchDetail.tsx
@@ -7,6 +7,7 @@ import {
   ItemStatus,
   MatchHeader,
 } from "@/components/matches/matches-helper";
+import { UserMatchTitle } from "@/components/matches/matchesList/helper";
 import ProgressBar from "@/components/matches/matchesList/ProgressBar";
 import MatchItemTable from "@/components/matches/MatchItemTable";
 import MeetingInfo from "@/components/matches/MeetingInfo";
@@ -48,6 +49,10 @@ const UserMatchDetail = ({
 
   return (
     <>
+      <Typography variant="h1">
+        <UserMatchTitle match={match} isSender={isSender} />
+      </Typography>
+
       {isFulfilled && (
         <Alert sx={{ marginTop: "1rem", marginBottom: "1rem" }}>
           Du har {isSender ? "levert" : "mottatt"} alle bøkene for denne
@@ -83,8 +88,8 @@ const UserMatchDetail = ({
         </Typography>
       </Box>
       <MatchHeader>Du skal møte</MatchHeader>
-      <OtherPersonContact match={match} currentUserId={currentUserId} />
       <MeetingInfo match={match} />
+      <OtherPersonContact match={match} currentUserId={currentUserId} />
 
       {!isSender && !isFulfilled && (
         <>

diff --git a/src/components/matches/matchesList/MatchListItemBox.tsx b/src/components/matches/matchesList/MatchListItemBox.tsx
@@ -1,26 +1,38 @@
-import { Button, Card, CardActions, CardContent } from "@mui/material";
+import {
+  Button,
+  Card,
+  CardActionArea,
+  CardActions,
+  CardContent,
+} from "@mui/material";
+import { green, grey } from "@mui/material/colors";
 import React, { PropsWithChildren } from "react";
 
 import DynamicLink from "@/components/DynamicLink";
-
 const MatchListItemBox: React.FC<
   PropsWithChildren<{ finished: boolean; matchId: string }>
 > = ({ finished, matchId, children }) => {
   return (
     <Card
       variant={finished ? "outlined" : "elevation"}
       elevation={finished ? 0 : 8}
+      sx={{ backgroundColor: finished ? green["50"] : grey["100"] }}
     >
-      <CardContent>{children}</CardContent>
-      <CardActions>
-        <Button
-          component={DynamicLink}
-          href={`/matches/${matchId}`}
-          size="small"
-        >
-          Detaljer
-        </Button>
-      </CardActions>
+      <CardActionArea component={DynamicLink} href={`/matches/${matchId}`}>
+        <CardContent>{children}</CardContent>
+        <CardActions>
+          <Button
+            component={DynamicLink}
+            href={`/matches/${matchId}`}
+            size="small"
+            variant={finished ? "text" : "contained"}
+            sx={{ width: "100%" }}
+            color="success"
+          >
+            Åpne
+          </Button>
+        </CardActions>
+      </CardActionArea>
     </Card>
   );
 };

diff --git a/src/components/matches/matchesList/MatchListItemGroups.tsx b/src/components/matches/matchesList/MatchListItemGroups.tsx
@@ -2,50 +2,33 @@ import { MatchVariant, MatchWithDetails } from "@boklisten/bl-model";
 import { Typography } from "@mui/material";
 import React from "react";
 
-import {
-  formatDatetime,
-  sectionStyle,
-  getSortedMatchGroups,
-} from "@/components/matches/matchesList/helper";
+import { sectionStyle } from "@/components/matches/matchesList/helper";
 import StandMatchListItem from "@/components/matches/matchesList/StandMatchListItem";
 import UserMatchListItem from "@/components/matches/matchesList/UserMatchListItem";
-import { GroupedMatches } from "@/utils/types";
 
 export const MatchListItemGroups: React.FC<{
-  groups: GroupedMatches<MatchWithDetails>;
+  matches: MatchWithDetails[];
   userId: string;
-  heading: string;
-}> = ({ groups, userId, heading }) => {
+  heading?: string;
+}> = ({ matches, userId, heading }) => {
   return (
     <section style={sectionStyle}>
-      <Typography variant="h2">{heading}</Typography>
-      {getSortedMatchGroups(groups).map((key) => {
-        const { time, location } = groups.keyToData.get(key)!;
-        return (
-          <section key={key} style={sectionStyle}>
-            <Typography variant="h3">
-              {time ? formatDatetime(new Date(time)) : ""} {location}
-            </Typography>
-            {groups.matchesByKey
-              .get(key)!
-              .map((match) =>
-                match._variant === MatchVariant.StandMatch ? (
-                  <StandMatchListItem
-                    key={match.id}
-                    match={match}
-                    currentUserId={userId}
-                  />
-                ) : (
-                  <UserMatchListItem
-                    key={match.id}
-                    match={match}
-                    currentUserId={userId}
-                  />
-                ),
-              )}
-          </section>
-        );
-      })}
+      {heading && <Typography variant="h2">{heading}</Typography>}
+      {matches.map((match) =>
+        match._variant === MatchVariant.StandMatch ? (
+          <StandMatchListItem
+            key={match.id}
+            match={match}
+            currentUserId={userId}
+          />
+        ) : (
+          <UserMatchListItem
+            key={match.id}
+            match={match}
+            currentUserId={userId}
+          />
+        ),
+      )}
     </section>
   );
 };