add initial autor page; add loader to just grab voices for a single a…

…uthor (#11)

src/App.tsx

@@ -17,6 +17,9 @@ import { useStore } from "./store/store";
 import { useMemo } from "react";
 import { Locale } from "./shared/utilities";
 import { DisplayEntryLoader } from "./loaders/display-entry-loader";
+import { Author } from "./components/author/author";
+import { AuthorLoader } from "./loaders/author-loader";
+import { AuthorEntryLoader } from "./loaders/author-entry-loader";
 
 const router = (languageMode: Locale) =>
   createBrowserRouter([
@@ -66,6 +69,24 @@ const router = (languageMode: Locale) =>
             return loader;
           },
         },
+        {
+          path: "display/author/:entryId",
+          element: <IconDisplay />,
+          loader: async ({ params }) => {
+            const { entryId } = params;
+            const loader = await AuthorEntryLoader(languageMode, entryId);
+            return loader;
+          },
+        },
+        {
+          path: "author/:entryId",
+          element: <Author />,
+          loader: async ({ params }) => {
+            const { entryId } = params;
+            const loader = await AuthorLoader(languageMode, entryId);
+            return loader;
+          },
+        },
         {
           path: "contact",
           element: <Contact />,

src/components/author/author.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { AuthorLoaderValue } from "../../loaders/author-loader";
+import { useLoaderData, useNavigate } from "react-router-dom";
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  Typography,
+} from "@mui/material";
+import { useStore } from "../../store/store";
+
+export const Author: React.FC = () => {
+  const [languageMode] = useStore((state) => [state.languageMode]);
+  const author = useLoaderData() as AuthorLoaderValue;
+  const navigate = useNavigate();
+
+  const handleNavigate = () => {
+    navigate(`/display/author/${author.sys.id}`);
+  };
+
+  const group = languageMode === "en-US" ? "Group" : "グループ";
+  const viewVoices =
+    languageMode === "en-US"
+      ? "View all my Voices"
+      : "自分のボイスをすべて見る";
+
+  return (
+    <Box
+      sx={{ display: "flex" }}
+      paddingTop={{ xs: "1rem", md: "5rem" }}
+      paddingLeft={{ xs: "1rem", md: "5rem" }}
+      paddingRight={{ xs: "1rem", md: "5rem" }}
+      paddingBottom={{ xs: "1rem", md: "5rem" }}
+      display="flex"
+      justifyContent="center"
+    >
+      <Card
+        sx={{ display: "flex", flexDirection: "column" }}
+        variant="outlined"
+      >
+        <CardContent>
+          <Typography gutterBottom variant="h1">
+            {author.fields.name}
+          </Typography>
+          <Typography gutterBottom variant="h5">
+            {author.fields.groupLocation} {group}
+          </Typography>
+          <Typography gutterBottom component="div" variant="body1">
+            {author.fields.biography}
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Button size="small" onClick={handleNavigate}>
+            {viewVoices}
+          </Button>
+        </CardActions>
+      </Card>
+    </Box>
+  );
+};

src/components/contact/contact.tsx

@@ -28,7 +28,6 @@ export const Contact: React.FC = () => {
   } = useForm<IFormInput>();
   const theme = useTheme();
   const emailAddress = "[email protected]";
-
   const requiredErrorMessage = "Field is required.";
 
   const onSubmit: SubmitHandler<IFormInput> = (data) => {

src/components/entry-display/entry-display.tsx

@@ -5,6 +5,7 @@ import {
   CardMedia,
   ImageList,
   ImageListItem,
+  Link as MuiLink,
   Modal,
   Stack,
   Typography,
@@ -15,7 +16,11 @@ import React, { useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { useStore } from "../../store/store";
 import { DATE_FORMAT_OPTIONS } from "../../shared/utilities";
-import { useLoaderData } from "react-router-dom";
+import {
+  Link as ReactRouterLink,
+  useLoaderData,
+  useNavigate,
+} from "react-router-dom";
 import { DisplayEntryLoaderValue } from "../../loaders/display-entry-loader";
 
 const photoModalStyles = {
@@ -33,6 +38,7 @@ const photoModalStyles = {
 export const EntryDisplay: React.FC = () => {
   const [languageMode] = useStore((state) => [state.languageMode]);
   const voiceEntry = useLoaderData() as DisplayEntryLoaderValue;
+  const navigate = useNavigate();
   const theme = useTheme();
   const isMediumScreen = useMediaQuery(
     `(min-width:${theme.breakpoints.values.md}px)`
@@ -146,9 +152,14 @@ export const EntryDisplay: React.FC = () => {
             )}
           </Stack>
           <Stack alignItems="flex-end">
-            <Typography gutterBottom variant="body2" component="div">
-              {voiceEntry.fields.voiceAuthor.fields.name}
-            </Typography>
+            <ReactRouterLink
+              to={`/author/${voiceEntry.fields.voiceAuthor.sys.id}`}
+              style={{ textDecoration: "none" }}
+            >
+              <MuiLink gutterBottom variant="body2">
+                {voiceEntry.fields.voiceAuthor.fields.name}
+              </MuiLink>
+            </ReactRouterLink>
             <Typography variant="body2" component="div">
               {voiceEntry.fields.photoLocation.fields.photoPrefecture}
             </Typography>

src/loaders/author-entry-loader.ts

@@ -0,0 +1,26 @@
+import { getClient } from "../services/contentful/client";
+import { VoiceEntry } from "../shared/content-types";
+import { Locale } from "../shared/utilities";
+
+export const AuthorEntryLoader = async (
+  languageMode: Locale,
+  authorEntryId: string | undefined
+) => {
+  const client = getClient();
+  // Add error handling
+  const res = await client
+    .getEntries<VoiceEntry>({
+      content_type: "entry",
+      locale: languageMode,
+    })
+    .then((res) => {
+      return res.items.filter(
+        (item) => item.fields.voiceAuthor.sys.id === authorEntryId
+      );
+    });
+  return res;
+};
+
+export type AuthorEntryLoaderValue = Awaited<
+  ReturnType<typeof AuthorEntryLoader>
+>;

src/loaders/author-loader.ts

@@ -0,0 +1,17 @@
+import { getClient } from "../services/contentful/client";
+import { VoiceAuthor } from "../shared/content-types";
+import { Locale } from "../shared/utilities";
+
+export const AuthorLoader = async (
+  languageMode: Locale,
+  entryId: string | undefined
+) => {
+  const client = getClient();
+  // Add error handling
+  const res = await client.getEntry<VoiceAuthor>(entryId ?? "", {
+    locale: languageMode,
+  });
+  return res;
+};
+
+export type AuthorLoaderValue = Awaited<ReturnType<typeof AuthorLoader>>;