diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 9bf2b18..3e116d7 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -1,29 +1,23 @@ -import { Link, useLocation, useLoaderData } from "@remix-run/react" -import { LoaderFunctionArgs, json } from "@remix-run/node"; - -export const loader = async ({ - params, -}: LoaderFunctionArgs) => { - const lang = params.lang - return json({ lang }); -}; +import { Link, useLocation, useParams } from "@remix-run/react"; +import { getLang } from "~/utils"; export default function Header() { - let { lang } = useLoaderData(); - console.log("LANG: ", lang); - - const location = useLocation(); - const locationEntries = Object.entries(location) - const pathname = locationEntries[0] - const enPathname = pathname[1].includes("/ja") ? pathname[1].replace("/ja", "") : pathname[1] + const { pathname } = useLocation(); + const params = useParams(); + const lang = getLang(params); return ( - ) -} \ No newline at end of file + ); +} diff --git a/app/root.tsx b/app/root.tsx index 5af30e3..cad9269 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,32 +1,23 @@ -import { json, LinksFunction, LoaderFunctionArgs } from "@remix-run/node"; +import { LinksFunction } from "@remix-run/node"; import { - Link, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, - useLoaderData, + useParams, } from "@remix-run/react"; import appStylesHref from "./app.css"; -import { getContacts } from "./data"; -import Header from "./components/Header"; +import { getLang } from "./utils"; export const links: LinksFunction = () => [ { rel: "stylesheet", href: appStylesHref }, ]; -export const loader = async ({ - params, -}: LoaderFunctionArgs) => { - const fullContact = await getContacts(); - const lang = params.lang - return json({ fullContact, lang }); -}; - export default function App() { - const { fullContact, lang } = useLoaderData(); + const params = useParams(); + const lang = getLang(params); return ( @@ -37,35 +28,7 @@ export default function App() { -
-
- -
- -
-
- + diff --git a/app/routes/($lang).contacts.$contactId.tsx b/app/routes/($lang).contacts.$contactId.tsx index 888ea82..1d08787 100644 --- a/app/routes/($lang).contacts.$contactId.tsx +++ b/app/routes/($lang).contacts.$contactId.tsx @@ -3,57 +3,41 @@ import { useLoaderData } from "@remix-run/react"; import { getContact } from "../data"; import type { LoaderFunctionArgs } from "@remix-run/node"; import invariant from "tiny-invariant"; +import { getLang } from "~/utils"; -export const loader = async ({ - params, -}: LoaderFunctionArgs) => { +export const loader = async ({ params }: LoaderFunctionArgs) => { invariant(params.contactId, "Missing contactId param"); + const lang = getLang(params); const singleContact = await getContact(params.contactId); - const lang = params.lang if (!singleContact) { throw new Response("Not Found", { status: 404 }); } - const { details, ...contact } = singleContact; - return json({ contact, lang, details }); + const { avatar, twitter, notes, details } = singleContact; + const name = `${details?.[lang]?.first} ${details?.[lang]?.last}`; + return json({ avatar, twitter, notes, name }); }; export default function Contact() { - const { contact, details, lang } = useLoaderData(); + const { avatar, twitter, notes, name } = useLoaderData(); return (
- {`${details?.en?.first} + {`${name}
-

- {details?.ja?.first || details?.ja?.last || details?.en?.first || details?.en?.last ? ( - <> - {lang === "ja" ? `${details?.ja?.first} ${details?.ja?.last}` : `${details?.en?.first} ${details?.en?.last}`} - - ) : ( - No Name - )} -

+

{name}

- {contact.twitter ? ( + {twitter ? (

- - {contact.twitter} - + {twitter}

) : null} - {contact.notes ?

{contact.notes}

: null} + {notes ?

{notes}

: null}
); -} \ No newline at end of file +} diff --git a/app/routes/($lang).contacts.tsx b/app/routes/($lang).contacts.tsx new file mode 100644 index 0000000..ad973b7 --- /dev/null +++ b/app/routes/($lang).contacts.tsx @@ -0,0 +1,52 @@ +import { LoaderFunctionArgs, json } from "@remix-run/node"; +import { Link, Outlet, useLoaderData } from "@remix-run/react"; +import Header from "~/components/Header"; +import { getContacts } from "~/data"; +import { getLang } from "~/utils"; + +export const loader = async ({ params }: LoaderFunctionArgs) => { + const fullContact = await getContacts(); + const lang = getLang(params); + + const contacts = fullContact.map((contact) => ({ + id: contact.id, + name: `${contact.details?.[lang]?.first} ${contact.details?.[lang]?.last}`, + })); + + return json({ contacts, lang }); +}; + +export default function ContactsLayout() { + const { contacts, lang } = useLoaderData(); + + return ( + <> +
+
+ +
+ +
+
+ + ); +} diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx new file mode 100644 index 0000000..5bda10b --- /dev/null +++ b/app/routes/_index.tsx @@ -0,0 +1,5 @@ +import { redirect } from "@remix-run/node"; + +export function loader() { + return redirect("/contacts"); +} diff --git a/app/utils.ts b/app/utils.ts new file mode 100644 index 0000000..b35610d --- /dev/null +++ b/app/utils.ts @@ -0,0 +1,9 @@ +import { Params } from "@remix-run/react"; + +export function getLang(params: Params) { + const lang = params.lang ?? "en"; + if (lang !== "ja" && lang !== "en") { + throw new Error(`Invalid language ${lang}`); + } + return lang; +}