org shenanigans

HolodexNet · Nov 10, 2024 · 4647068 · 4647068
1 parent 1d7a996
commit 4647068
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 63 deletions.
diff --git a/packages/react/index.html b/packages/react/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="public/favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <link
       rel="apple-touch-icon"
       href="/img/icons/apple-touch-icon-152x152.png"

diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
@@ -3,12 +3,10 @@ import {
   isSidebarOpenAtom,
   toggleSidebarAtom,
 } from "@/hooks/useFrame";
-import { darkAtom } from "@/hooks/useTheme";
 import { Button } from "@/shadcn/ui/button";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import { useSetAtom } from "jotai/react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 import { SearchBar } from "./searchbar/components/SearchBar";
 import clsx from "clsx";
@@ -24,12 +22,11 @@ interface HeaderProps
 }
 
 export function Header({ id }: HeaderProps) {
-  const { t } = useTranslation();
-  const [dark, toggle] = useAtom(darkAtom);
   const frameToggleSidebar = useSetAtom(toggleSidebarAtom);
   const isSidebarOpen = useAtomValue(isSidebarOpenAtom);
   const isMobile = useAtomValue(isMobileAtom);
   const [isSearching, setIsSearching] = useState(false);
+  const path = useLocation().pathname;
 
   return (
     <header id={id} className="flex items-center gap-1 px-2">
@@ -62,31 +59,38 @@ export function Header({ id }: HeaderProps) {
 
       <div className="hidden grow md:flex" />
 
-      {isMobile || isSearching ? (
-        isSearching ? (
-          <div className="mt-3 flex w-full items-start self-start">
-            <SearchBar className="shrink grow" autoFocus />
-            <Button
-              size="icon"
-              variant="ghost"
-              className="ml-2 text-lg text-base-10"
-              onClick={() => setIsSearching(false)}
-            >
-              <div className="i-lucide:x h-8 w-8" />
-            </Button>
-          </div>
-        ) : (
-          <Button
-            size="icon"
-            variant="ghost"
-            className="ml-auto h-12 w-12 text-xl text-base-10"
-            onClick={() => setIsSearching(true)}
-          >
-            <div className="i-heroicons:magnifying-glass h-8 w-8" />
-          </Button>
-        )
-      ) : (
-        <SearchBar className="mt-3 max-w-lg self-start md:mr-1 lg:mr-2" />
+      {path !== "/search" && (
+        <>
+          {/* Mobile-specific search bar */}
+          {isMobile &&
+            (isSearching ? (
+              <div className="mt-3 flex w-full items-start self-start">
+                <SearchBar className="shrink grow" autoFocus />
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="ml-2 text-lg text-base-10"
+                  onClick={() => setIsSearching(false)}
+                >
+                  <div className="i-lucide:x h-8 w-8" />
+                </Button>
+              </div>
+            ) : (
+              <Button
+                size="icon"
+                variant="ghost"
+                className="ml-auto h-12 w-12 text-xl text-base-10"
+                onClick={() => setIsSearching(true)}
+              >
+                <div className="i-heroicons:magnifying-glass h-8 w-8" />
+              </Button>
+            ))}
+
+          {/* Desktop-specific search bar */}
+          {!isMobile && (
+            <SearchBar className="mt-3 max-w-lg self-start md:mr-1 lg:mr-2" />
+          )}
+        </>
       )}
 
       {!isSearching && <UserMenu />}

diff --git a/packages/react/src/components/layout/Footer.tsx b/packages/react/src/components/layout/Footer.tsx
@@ -1,14 +1,12 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
-import { useAtomValue, useSetAtom } from "jotai";
-import { orgAtom } from "@/store/org";
+import { useSetAtom } from "jotai";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import { openSidebarAtom } from "@/hooks/useFrame";
 
 export const Footer = () => {
   const { t } = useTranslation();
-  const org = useAtomValue(orgAtom);
   const openSidebar = useSetAtom(openSidebarAtom);
 
   const navItems = [

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -12,7 +12,7 @@ import {
 } from "@/hooks/useFrame";
 import { darkAtom } from "@/hooks/useTheme";
 import { Toaster } from "@/shadcn/ui/toaster";
-import { orgAtom, orgRankingAtom } from "@/store/org";
+import { mostRecentOrgAtom, orgRankingAtom } from "@/store/org";
 import { miniPlayerAtom } from "@/store/player";
 import clsx from "clsx";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
@@ -29,19 +29,24 @@ import { videoReportAtom } from "@/store/video";
 import React from "react";
 import { useOrgs } from "@/services/orgs.service";
 import { useTimeout } from "usehooks-ts";
+import { defaultOpenAtom } from "@/store/settings";
 
 export function LocationAwareReactivity() {
   const location = useLocation();
   const navigate = useNavigate();
-  const org = useAtomValue(orgAtom);
+  const org = useAtomValue(mostRecentOrgAtom);
+  const defaultOpen = useAtomValue(defaultOpenAtom);
   const indicatePageFullscreen = useSetAtom(indicatePageFullscreenAtom);
 
   useEffect(() => {
     if (location.pathname === "/") {
+      if (defaultOpen === "Favorites") {
+        navigate("/favorites", { replace: true });
+      }
       console.log("redirecting to org", org);
       navigate(`/org/${org}`, { replace: true });
     }
-  }, [location.pathname, navigate, org]);
+  }, [defaultOpen, location.pathname, navigate, org]);
 
   useEffect(() => {
     const isFullscreen =

diff --git a/packages/react/src/components/video/VideoReport.tsx b/packages/react/src/components/video/VideoReport.tsx
@@ -28,8 +28,7 @@ import { Textarea } from "@/shadcn/ui/textarea";
 import { Button } from "@/shadcn/ui/button";
 import { Alert, AlertDescription } from "@/shadcn/ui/alert";
 import { useToast } from "@/shadcn/ui/use-toast";
-import { useAtomValue } from "jotai";
-import { orgAtom } from "@/store/org";
+import { useParams } from "react-router-dom";
 
 const formSchema = z.object({
   reasons: z.array(z.string()).min(1, {
@@ -64,7 +63,7 @@ export function ReportDialogMenu({
 }: ReportDialogMenuProps) {
   const { t } = useTranslation();
   const { toast } = useToast();
-  const currentOrg = useAtomValue(orgAtom);
+  const currentOrg = useParams()?.org;
   const [selectedChannels, setSelectedChannels] = useState<
     SearchAutoCompleteChannel[]
   >([]);
@@ -112,7 +111,7 @@ export function ReportDialogMenu({
       orgRequired: false,
     },
     {
-      value: "This video does not belong to the org",
+      value: `This video does not belong to the org [${currentOrg}]`,
       label: t("component.reportDialog.reasons.6", {
         type: video.type,
         org: currentOrg,

diff --git a/packages/react/src/hooks/useVideoFilter.ts b/packages/react/src/hooks/useVideoFilter.ts
@@ -2,7 +2,7 @@ import { useAtomValue } from "jotai";
 import { useMemo } from "react";
 import dayjs from "dayjs";
 import { settingsAtom, blockedSetAtom } from "@/store/settings";
-import { orgAtom } from "@/store/org";
+import { mostRecentOrgAtom } from "@/store/org";
 import { useFavorites } from "@/services/user.service";
 
 function filterDeadStreams(video: VideoBase, now: dayjs.Dayjs) {
@@ -32,7 +32,7 @@ export function useVideoFilter(
 ) {
   const settings = useAtomValue(settingsAtom);
   const blockedSet = useAtomValue(blockedSetAtom);
-  const defaultOrg = useAtomValue(orgAtom);
+  const defaultOrg = useAtomValue(mostRecentOrgAtom);
   const { data: favorites } = useFavorites();
 
   const favoritesSet = useMemo(

diff --git a/packages/react/src/routes/home/home.tsx b/packages/react/src/routes/home/home.tsx
@@ -1,6 +1,6 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
-import { orgAtom } from "@/store/org";
-import { useAtom, useAtomValue } from "jotai";
+import { mostRecentOrgAtom } from "@/store/org";
+import { useAtom, useSetAtom } from "jotai";
 import { lazy, useEffect, useState } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import {
@@ -34,12 +34,19 @@ export function Home() {
   const [searchParams, setSearchParams] = useSearchParams();
   const { t } = useTranslation();
   const { org } = useParams();
-  const currentOrg = useAtomValue(orgAtom);
+  const setMostRecentOrg = useSetAtom(mostRecentOrgAtom);
   const [tab, setTab] = useState(searchParams.get("tab") ?? "live");
 
+  if (!org) {
+    // it's weird ther's no org.
+    navigate("/org/Hololive", { replace: true });
+  }
+
   useEffect(() => {
-    navigate(`/org/${currentOrg}`, { replace: true });
-  }, [currentOrg, navigate]);
+    if (!org) navigate("/org/Hololive", { replace: true });
+    else setMostRecentOrg(org);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [org]);
 
   useEffect(() => {
     console.log(`tab changed ${tab}`);
@@ -52,7 +59,7 @@ export function Home() {
   return (
     <>
       <Helmet>
-        <title>{currentOrg} - Holodex</title>
+        <title>{org} - Holodex</title>
       </Helmet>
       <Tabs defaultValue={tab} onValueChange={setTab}>
         <StickyTabsList tab={tab} fourthTab="Members" />

diff --git a/packages/react/src/routes/orgChannels.tsx b/packages/react/src/routes/orgChannels.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 import { useParams } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
@@ -13,7 +13,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/shadcn/ui/select";
-import { orgAtom } from "@/store/org";
 import { ChannelCard } from "@/components/channel/ChannelCard";
 import { Button } from "@/shadcn/ui/button";
 import { cn } from "@/lib/utils";
@@ -97,7 +96,6 @@ const GroupComponent: React.FC<{
 export function ChannelsOrg() {
   const { t } = useTranslation();
   const { org } = useParams();
-  const currentOrg = useAtomValue(orgAtom);
 
   const [displayStyle, setDisplayStyle] = useAtom(orgChannelDisplayStyleAtom);
   const [sortBy, setSortBy] = useAtom(orgChannelSortByAtom);
@@ -144,7 +142,7 @@ export function ChannelsOrg() {
     <>
       <Helmet>
         <title>
-          {currentOrg} {t("component.mainNav.channels")} - Holodex
+          TODO PUT CURRENT ORG HERE {t("component.mainNav.channels")} - Holodex
         </title>
       </Helmet>
       <div className="h-full w-full px-4 md:p-8">

diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
@@ -1,7 +1,7 @@
 import React, { lazy } from "react";
 import { Route, Navigate } from "react-router-dom";
 import { getDefaultStore } from "jotai";
-import { orgAtom } from "@/store/org";
+import { mostRecentOrgAtom } from "@/store/org";
 import { Frame } from "@/components/layout/Frame";
 import { NavigateToMusicdex } from "@/components/channel/NavigateToMusicdex";
 
@@ -111,7 +111,9 @@ export const routes = (
     <Route path="org/:org" Component={Home} />
     <Route
       path="channels"
-      element={<Navigate to={`/org/${store.get(orgAtom)}/channels`} />}
+      element={
+        <Navigate to={`/org/${store.get(mostRecentOrgAtom)}/channels`} />
+      }
     />
     <Route path="org404" element={<div>OrgNotFound</div>} />
     <Route

diff --git a/packages/react/src/store/org.ts b/packages/react/src/store/org.ts
@@ -1,5 +1,4 @@
 import { GET_ON_INIT } from "@/lib/consts";
-import { atom } from "jotai";
 import { atomWithStorage } from "jotai/utils";
 
 export const defaultOrgs = [
@@ -17,9 +16,9 @@ export const orgRankingAtom = atomWithStorage<Org[]>(
   GET_ON_INIT,
 );
 
-export const currentOrgAtom = atomWithStorage<Org>("org", {
-  name: "Hololive",
-  short: "Holo",
-});
-
-export const orgAtom = atom((get) => get(currentOrgAtom).name);
+export const mostRecentOrgAtom = atomWithStorage(
+  "last_org",
+  "Hololive",
+  undefined,
+  GET_ON_INIT,
+);