- UI

- Moved PageLayout to /listen routes - Enabled persistent player across navgiation
2023-05-07 20:46:19 -04:00 · 2023-05-07 20:46:19 -04:00 · b107af9bd9
commit b107af9bd9
parent 27cc0ddeb8
13 changed files with 294 additions and 277 deletions
--- a/app/components/page-layout.tsx
+++ b/app/components/page-layout.tsx
@ -1,79 +1,128 @@
 import { RadioIcon } from "@heroicons/react/24/solid";
-import { NavLink } from "@remix-run/react";
+import { Link, NavLink } from "@remix-run/react";
+import type { RemixLinkProps } from "@remix-run/react/dist/components";
+import { RemixNavLinkProps } from "@remix-run/react/dist/components";
 import type { ReactNode } from "react";
+import * as React from "react";
+import { createContext, useContext } from "react";
+import type { StationWithTagsClientSide } from "~/models/station.server";
 import type { TagWithStationsClientSide } from "~/models/tag.server";
 import type { UserWithFavoriteStationsClientSide } from "~/models/user.server";

 export type PageLayoutProps = {
    children: ReactNode;
    tags: TagWithStationsClientSide[];
-    user?: UserWithFavoriteStationsClientSide
+    user?: UserWithFavoriteStationsClientSide;
+    station: StationWithTagsClientSide | null;
 }

-export function PageLayout({ children, tags, user }: PageLayoutProps) {
+export type StationContextType = {
+    station: StationWithTagsClientSide | null
+}
+
+const StationContext = createContext<StationContextType>({ station: null });
+
+export function useStationContext() {
+    return useContext(StationContext);
+}
+
+
+export function ListenLink(props: RemixLinkProps & React.RefAttributes<HTMLAnchorElement>) {
+    const { station } = useStationContext();
+    const url = props.to + (station ? `?station=${station.id}` : "");
+    return <Link {...props} to={url}>{props.children}</Link>;
+}
+
+export function ListenNavLink(props: RemixNavLinkProps & React.RefAttributes<HTMLAnchorElement>) {
+    const { station } = useStationContext();
+    const url = props.to + (station ? `?station=${station.id}` : "");
+    return <NavLink {...props} to={url}>{props.children}</NavLink>;
+}
+
+export function PageLayout({ children, tags, user, station }: PageLayoutProps) {
+
    return (
-        <div className="drawer drawer-mobile">
-            <input id="primary-drawer" type="checkbox" className="drawer-toggle" />
-            <div className="drawer-content flex flex-col">
-                <div className="w-full navbar bg-base-300">
-                    <div className="flex-none lg:hidden">
-                        <label htmlFor="primary-drawer" className="btn btn-square btn-ghost">
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                 className="inline-block w-6 h-6 stroke-current">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
-                                      d="M4 6h16M4 12h16M4 18h16"></path>
-                            </svg>
-                        </label>
+        <StationContext.Provider value={{ station }}>
+            <div className="drawer drawer-mobile">
+                <input id="primary-drawer" type="checkbox" className="drawer-toggle" />
+                <div className="drawer-content flex flex-col">
+                    <div className="w-full navbar bg-base-300 lg:justify-end">
+                        <div className="flex-none lg:hidden">
+                            <label htmlFor="primary-drawer" className="btn btn-square btn-ghost">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                     className="inline-block w-6 h-6 stroke-current">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+                                          d="M4 6h16M4 12h16M4 18h16"></path>
+                                </svg>
+                            </label>
+                        </div>
+                        <div className="flex-1 px-2 mx-2 gap-2 lg:hidden">
+                            <RadioIcon className="h-8 w-8 p-0" />
+                            <h1 className="text-2xl p-0">Awesome Radio</h1>
+                        </div>
+                        <div className="flex-none">
+                            {user ?
+                                <div className="dropdown dropdown-end">
+                                    <label tabIndex={0} className="btn btn-ghost btn-circle avatar placeholder">
+                                        <div className="bg-neutral-focus text-neutral-content rounded-full w-12">
+                                            <span>LB</span>
+                                        </div>
+                                    </label>
+                                    <ul tabIndex={0}
+                                        className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
+                                        <li>
+                                            <Link to="/logout">Logout</Link>
+                                        </li>
+                                    </ul>
+                                </div> :
+                                <Link to="/join" className="btn">Join</Link>
+                            }
+
+                        </div>
                    </div>
-                    <div className="flex-1 px-2 mx-2 gap-2 lg:hidden">
-                        <RadioIcon className="h-8 w-8 p-0" />
-                        <h1 className="text-2xl p-0">Awesome Radio</h1>
-                    </div>
-                    <div className="flex-none hidden lg:block">
+                    <div className="py-2 px-6">
+                        {children}
                    </div>
                </div>
-                <div className="py-2 px-6">
-                    {children}
+                <div className="drawer-side">
+                    <label htmlFor="primary-drawer" className="drawer-overlay"></label>
+                    <ul className="menu menu-compact flex w-80 flex-col bg-base-200 text-base-content p-0 px-4 pt-4">
+                        <li className="flex flex-row justify-start gap-2 mb-4">
+                            <RadioIcon className="h-8 w-8 p-0" />
+                            <h1 className="text-2xl p-0">Awesome Radio</h1>
+                        </li>
+                        <li className="menu-title">
+                            <span>Listen</span>
+                        </li>
+                        <li>
+                            <ListenNavLink to="/listen" end>Home</ListenNavLink>
+                        </li>
+                        <li className="menu-title">
+                            <span>Tags</span>
+                        </li>
+                        {tags
+                            .filter(tag => tag.stations.length > 0)
+                            .map((tag) => {
+                                return (
+                                    <li key={tag.slug}>
+                                        <ListenNavLink to={`/listen/tag/${tag.slug}`} className="capitalize">
+                                            {tag.name}
+                                            <span className="badge badge-outline">{tag.stations?.length ?? 0}</span>
+                                        </ListenNavLink>
+                                    </li>
+                                );
+                            })}
+                        <li className="menu-title">
+                            <span>Manage Content</span>
+                        </li>
+                        <li>
+                            <NavLink to="/sources">Sources</NavLink>
+                        </li>
+
+                    </ul>
+
                </div>
            </div>
-            <div className="drawer-side">
-                <label htmlFor="primary-drawer" className="drawer-overlay"></label>
-                <ul className="menu menu-compact flex w-80 flex-col bg-base-200 text-base-content p-0 px-4 pt-4">
-                    <li className="flex flex-row justify-start gap-2 mb-4">
-                        <RadioIcon className="h-8 w-8 p-0" />
-                        <h1 className="text-2xl p-0">Awesome Radio</h1>
-                    </li>
-                    <li className="menu-title">
-                        <span>Listen</span>
-                    </li>
-                    <li>
-                        <NavLink to="/listen/home">Home</NavLink>
-                    </li>
-                    <li className="menu-title">
-                        <span>Tags</span>
-                    </li>
-                    {tags
-                        .filter(tag => tag.stations.length > 0)
-                        .map((tag) => {
-                            return (
-                                <li key={tag.slug}>
-                                    <NavLink to={`/listen/tag/${tag.slug}`} className="capitalize">
-                                        {tag.name}
-                                        <span className="badge badge-outline">{tag.stations?.length ?? 0}</span>
-                                    </NavLink>
-                                </li>
-                            );
-                        })}
-                    <li className="menu-title">
-                        <span>Manage Content</span>
-                    </li>
-                    <li>
-                        <NavLink to="/sources">Sources</NavLink>
-                    </li>
-
-                </ul>
-
-            </div>
-        </div>
+        </StationContext.Provider>
    );
 }
--- a/app/components/station-player.tsx
+++ b/app/components/station-player.tsx
@ -1,10 +1,13 @@
 import type { StationWithTagsClientSide } from "~/models/station.server";

 export type StationPlayerProps = {
-    station: StationWithTagsClientSide
+    station: StationWithTagsClientSide | null
 };

 export function StationPlayer({ station }: StationPlayerProps) {
+    if (!station) {
+        return <></>;
+    }
    return (
        <div
            className="fixed bottom-0 left-0 w-full h-[70px] px-4 py-2 z-50 flex justify-end content-center items-center gap-2"
--- a/app/components/stations-gallery.tsx
+++ b/app/components/stations-gallery.tsx
@ -1,6 +1,7 @@
 import { PlayIcon } from "@heroicons/react/24/solid";
 import type { Tag } from "@prisma/client";
 import { Link } from "@remix-run/react";
+import { ListenLink } from "~/components/page-layout";
 import type { StationWithTagsClientSide } from "~/models/station.server";
 import type { Channel } from "~/routes/listen.channel.$channel";
 import type { ConvertDatesToStrings } from "~/utils";
@ -15,12 +16,12 @@ export function StationsGallery({ stations, tag, channel }: StationsGalleryProps

    function getStationUrl(id: string): string {
        if (channel) {
-            return `/listen/channel/${channel.slug}/${id}`;
+            return `/listen/channel/${channel.slug}?station=${id}`;
        }
        if (tag) {
-            return `/listen/tag/${tag?.slug}/${id}`;
+            return `/listen/tag/${tag?.slug}?station=${id}`;
        }
-        return `/listen/home/${id}`;
+        return `/listen?station=${id}`;
    }

    return (
@ -35,8 +36,8 @@ export function StationsGallery({ stations, tag, channel }: StationsGalleryProps
                            </h2>
                            <h2 className="flex gap-1">
                                {station.tags.map((t, id) => {
-                                    return <Link key={id} to={`/listen/tag/${t.tag.slug}`}
-                                                 className="badge badge-secondary">{t.tag.name}</Link>;
+                                    return <ListenLink key={id} to={`/listen/tag/${t.tag.slug}`}
+                                                       className="badge badge-secondary">{t.tag.name}</ListenLink>;
                                })}
                            </h2>
                            <p>{station.description}</p>
--- a/app/root.tsx
+++ b/app/root.tsx
@ -1,6 +1,5 @@
 import { cssBundleHref } from "@remix-run/css-bundle";
-import type { LinksFunction, LoaderArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import type { LinksFunction } from "@remix-run/node";
 import {
    isRouteErrorResponse,
    Links,
@ -9,14 +8,9 @@ import {
    Outlet,
    Scripts,
    ScrollRestoration,
-    useLoaderData,
    useRouteError
 } from "@remix-run/react";
 import type { ReactNode } from "react";
-import { PageLayout } from "~/components/page-layout";
-import { getTags, TagWithStations } from "~/models/tag.server";
-
-import { getUser } from "~/session.server";
 import stylesheet from "~/tailwind.css";

 export const links: LinksFunction = () => [
@ -24,12 +18,6 @@ export const links: LinksFunction = () => [
    ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : [])
 ];

-export async function loader({ request }: LoaderArgs) {
-    const tags: TagWithStations[] = await getTags();
-    const user = await getUser(request);
-    return json({ user, tags });
-};
-
 export type DocumentProps = {
    children: ReactNode;
    title?: string;
@ -57,12 +45,9 @@ export function Document({ title, children }: DocumentProps) {
 }

 export default function App() {
-    const { tags, user } = useLoaderData<typeof loader>();
    return (
        <Document>
-            <PageLayout tags={tags} user={user}>
-                <Outlet />
-            </PageLayout>
+            <Outlet />
        </Document>
    );
 }
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@ -1,11 +1,8 @@
 import type { V2_MetaFunction } from "@remix-run/node";

-import { useOptionalUser } from "~/utils";
-
 export const meta: V2_MetaFunction = () => [{ title: "Awesome Radio" }];

 export default function Index() {
-    const user = useOptionalUser();
    return (
        <div className="hero bg-base-200">
            <div className="hero-content text-center">
--- a/app/routes/listen._index.tsx
+++ b/app/routes/listen._index.tsx
--- a/app/routes/listen.channel.$channel.$station.tsx
+++ b/app/routes/listen.channel.$channel.$station.tsx
@ -1,27 +0,0 @@
-import type { LoaderArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
-import { useLoaderData } from "@remix-run/react";
-import { StationPlayer } from "~/components/station-player";
-import { getStationById } from "~/models/station.server";
-import { notFound } from "~/utils";
-
-
-export async function loader({ params }: LoaderArgs) {
-    if (!params.station) {
-        throw notFound();
-    }
-
-    const station = await getStationById(params.station);
-    if (!station) {
-        throw notFound();
-    }
-    return json({ station });
-}
-
-export default function ListenChanelStation() {
-    const { station } = useLoaderData<typeof loader>();
-    return (
-        <StationPlayer station={station} />
-    );
-
-}
--- a/app/routes/listen.home.$station.tsx
+++ b/app/routes/listen.home.$station.tsx
@ -1,4 +0,0 @@
-import ListenChanelStation from "~/routes/listen.channel.$channel.$station";
-
-export { loader } from "~/routes/listen.channel.$channel.$station";
-export default ListenChanelStation;
--- a/app/routes/listen.tag.$tag.$station.tsx
+++ b/app/routes/listen.tag.$tag.$station.tsx
@ -1,7 +0,0 @@
-import ListenChanelStation from "~/routes/listen.channel.$channel.$station";
-
-export { loader } from "~/routes/listen.channel.$channel.$station";
-export default ListenChanelStation;
-
-
-
--- a/app/routes/listen.tsx
+++ b/app/routes/listen.tsx
@ -1,8 +1,29 @@
-import { Outlet } from "@remix-run/react";
+import type { LoaderArgs } from "@remix-run/node";
+import { json } from "@remix-run/node";
+import { Outlet, useLoaderData } from "@remix-run/react";
+import { PageLayout } from "~/components/page-layout";
+import { StationPlayer } from "~/components/station-player";
+import type { StationWithTags } from "~/models/station.server";
+import { getStationById } from "~/models/station.server";
+import type { TagWithStations } from "~/models/tag.server";
+import { getTags } from "~/models/tag.server";
+import { getUser } from "~/session.server";

+export async function loader({ request }: LoaderArgs) {
+    const tags: TagWithStations[] = await getTags();
+    const user = await getUser(request);
+    const url = new URL(request.url);
+    const stationId = url.searchParams.get("station");
+    const station: StationWithTags | null = stationId ? await getStationById(stationId) : null;
+    return json({ user, tags, station });
+}

 export default function ListenLayout() {
+    const { tags, user, station } = useLoaderData<typeof loader>();
    return (
-        <Outlet />
+        <PageLayout tags={tags} user={user} station={station}>
+            <Outlet />
+            <StationPlayer station={station} />
+        </PageLayout>
    );
 }
--- a/app/routes/login.tsx
+++ b/app/routes/login.tsx
@ -8,168 +8,168 @@ import { createUserSession, getUserId } from "~/session.server";
 import { safeRedirect, validateEmail } from "~/utils";

 export const loader = async ({ request }: LoaderArgs) => {
-  const userId = await getUserId(request);
-  if (userId) return redirect("/");
-  return json({});
+    const userId = await getUserId(request);
+    if (userId) return redirect("/");
+    return json({});
 };

 export const action = async ({ request }: ActionArgs) => {
-  const formData = await request.formData();
-  const email = formData.get("email");
-  const password = formData.get("password");
-  const redirectTo = safeRedirect(formData.get("redirectTo"), "/");
-  const remember = formData.get("remember");
+    const formData = await request.formData();
+    const email = formData.get("email");
+    const password = formData.get("password");
+    const redirectTo = safeRedirect(formData.get("redirectTo"), "/");
+    const remember = formData.get("remember");

-  if (!validateEmail(email)) {
-    return json(
-      { errors: { email: "Email is invalid", password: null } },
-      { status: 400 }
-    );
-  }
+    if (!validateEmail(email)) {
+        return json(
+            { errors: { email: "Email is invalid", password: null } },
+            { status: 400 }
+        );
+    }

-  if (typeof password !== "string" || password.length === 0) {
-    return json(
-      { errors: { email: null, password: "Password is required" } },
-      { status: 400 }
-    );
-  }
+    if (typeof password !== "string" || password.length === 0) {
+        return json(
+            { errors: { email: null, password: "Password is required" } },
+            { status: 400 }
+        );
+    }

-  if (password.length < 8) {
-    return json(
-      { errors: { email: null, password: "Password is too short" } },
-      { status: 400 }
-    );
-  }
+    if (password.length < 8) {
+        return json(
+            { errors: { email: null, password: "Password is too short" } },
+            { status: 400 }
+        );
+    }

-  const user = await verifyLogin(email, password);
+    const user = await verifyLogin(email, password);

-  if (!user) {
-    return json(
-      { errors: { email: "Invalid email or password", password: null } },
-      { status: 400 }
-    );
-  }
+    if (!user) {
+        return json(
+            { errors: { email: "Invalid email or password", password: null } },
+            { status: 400 }
+        );
+    }

-  return createUserSession({
-    redirectTo,
-    remember: remember === "on" ? true : false,
-    request,
-    userId: user.id,
-  });
+    return createUserSession({
+        redirectTo,
+        remember: remember === "on",
+        request,
+        userId: user.id
+    });
 };

 export const meta: V2_MetaFunction = () => [{ title: "Login" }];

 export default function LoginPage() {
-  const [searchParams] = useSearchParams();
-    const redirectTo = searchParams.get("redirectTo") || "/";
+    const [searchParams] = useSearchParams();
+    const redirectTo = searchParams.get("redirectTo") || "/listen";
    const actionData = useActionData<typeof action>();
-  const emailRef = useRef<HTMLInputElement>(null);
-  const passwordRef = useRef<HTMLInputElement>(null);
+    const emailRef = useRef<HTMLInputElement>(null);
+    const passwordRef = useRef<HTMLInputElement>(null);

-  useEffect(() => {
-    if (actionData?.errors?.email) {
-      emailRef.current?.focus();
-    } else if (actionData?.errors?.password) {
-      passwordRef.current?.focus();
-    }
-  }, [actionData]);
+    useEffect(() => {
+        if (actionData?.errors?.email) {
+            emailRef.current?.focus();
+        } else if (actionData?.errors?.password) {
+            passwordRef.current?.focus();
+        }
+    }, [actionData]);

-  return (
-    <div className="flex min-h-full flex-col justify-center">
-      <div className="mx-auto w-full max-w-md px-8">
-        <Form method="post" className="space-y-6">
-          <div>
-            <label
-              htmlFor="email"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Email address
-            </label>
-            <div className="mt-1">
-              <input
-                ref={emailRef}
-                id="email"
-                required
-                autoFocus={true}
-                name="email"
-                type="email"
-                autoComplete="email"
-                aria-invalid={actionData?.errors?.email ? true : undefined}
-                aria-describedby="email-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-              />
-              {actionData?.errors?.email ? (
-                <div className="pt-1 text-red-700" id="email-error">
-                  {actionData.errors.email}
-                </div>
-              ) : null}
-            </div>
-          </div>
+    return (
+        <div className="flex min-h-full flex-col justify-center">
+            <div className="mx-auto w-full max-w-md px-8">
+                <Form method="post" className="space-y-6">
+                    <div>
+                        <label
+                            htmlFor="email"
+                            className="block text-sm font-medium text-gray-700"
+                        >
+                            Email address
+                        </label>
+                        <div className="mt-1">
+                            <input
+                                ref={emailRef}
+                                id="email"
+                                required
+                                autoFocus={true}
+                                name="email"
+                                type="email"
+                                autoComplete="email"
+                                aria-invalid={actionData?.errors?.email ? true : undefined}
+                                aria-describedby="email-error"
+                                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+                            />
+                            {actionData?.errors?.email ? (
+                                <div className="pt-1 text-red-700" id="email-error">
+                                    {actionData.errors.email}
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>

-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700"
-            >
-              Password
-            </label>
-            <div className="mt-1">
-              <input
-                id="password"
-                ref={passwordRef}
-                name="password"
-                type="password"
-                autoComplete="current-password"
-                aria-invalid={actionData?.errors?.password ? true : undefined}
-                aria-describedby="password-error"
-                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
-              />
-              {actionData?.errors?.password ? (
-                <div className="pt-1 text-red-700" id="password-error">
-                  {actionData.errors.password}
-                </div>
-              ) : null}
-            </div>
-          </div>
+                    <div>
+                        <label
+                            htmlFor="password"
+                            className="block text-sm font-medium text-gray-700"
+                        >
+                            Password
+                        </label>
+                        <div className="mt-1">
+                            <input
+                                id="password"
+                                ref={passwordRef}
+                                name="password"
+                                type="password"
+                                autoComplete="current-password"
+                                aria-invalid={actionData?.errors?.password ? true : undefined}
+                                aria-describedby="password-error"
+                                className="w-full rounded border border-gray-500 px-2 py-1 text-lg"
+                            />
+                            {actionData?.errors?.password ? (
+                                <div className="pt-1 text-red-700" id="password-error">
+                                    {actionData.errors.password}
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>

-          <input type="hidden" name="redirectTo" value={redirectTo} />
-          <button
-            type="submit"
-            className="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
-          >
-            Log in
-          </button>
-          <div className="flex items-center justify-between">
-            <div className="flex items-center">
-              <input
-                id="remember"
-                name="remember"
-                type="checkbox"
-                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-              />
-              <label
-                htmlFor="remember"
-                className="ml-2 block text-sm text-gray-900"
-              >
-                Remember me
-              </label>
+                    <input type="hidden" name="redirectTo" value={redirectTo} />
+                    <button
+                        type="submit"
+                        className="w-full rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 focus:bg-blue-400"
+                    >
+                        Log in
+                    </button>
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center">
+                            <input
+                                id="remember"
+                                name="remember"
+                                type="checkbox"
+                                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                            />
+                            <label
+                                htmlFor="remember"
+                                className="ml-2 block text-sm text-gray-900"
+                            >
+                                Remember me
+                            </label>
+                        </div>
+                        <div className="text-center text-sm text-gray-500">
+                            Don't have an account?{" "}
+                            <Link
+                                className="text-blue-500 underline"
+                                to={{
+                                    pathname: "/join",
+                                    search: searchParams.toString()
+                                }}
+                            >
+                                Sign up
+                            </Link>
+                        </div>
+                    </div>
+                </Form>
            </div>
-            <div className="text-center text-sm text-gray-500">
-              Don't have an account?{" "}
-              <Link
-                className="text-blue-500 underline"
-                to={{
-                  pathname: "/join",
-                  search: searchParams.toString(),
-                }}
-              >
-                Sign up
-              </Link>
-            </div>
-          </div>
-        </Form>
-      </div>
-    </div>
-  );
+        </div>
+    );
 }
--- a/app/routes/logout.tsx
+++ b/app/routes/logout.tsx
@ -1,8 +1,7 @@
-import type { ActionArgs } from "@remix-run/node";
-import { redirect } from "@remix-run/node";
+import type { LoaderArgs } from "@remix-run/node";

 import { logout } from "~/session.server";

-export const action = async ({ request }: ActionArgs) => logout(request);
-
-export const loader = async () => redirect("/");
+export async function loader({ request }: LoaderArgs) {
+    return logout(request);
+};
--- a/app/session.server.ts
+++ b/app/session.server.ts
@ -90,7 +90,7 @@ export async function createUserSession({

 export async function logout(request: Request) {
    const session = await getSession(request);
-    return redirect("/", {
+    return redirect("/listen", {
        headers: {
            "Set-Cookie": await sessionStorage.destroySession(session)
        }