From 8b4d24ea0c76847162d6b35d9d915e47a9ecfb1b Mon Sep 17 00:00:00 2001 From: Bryan Lundberg Date: Wed, 11 Sep 2024 07:41:16 -0600 Subject: [PATCH] refactor header filters solves page --- src/app/[locale]/solves-experimental/page.tsx | 98 ------- src/app/[locale]/solves/page.tsx | 275 +++--------------- .../dropdown-filter-options.tsx | 109 +++++++ src/components/solves/EmptySolves.tsx | 23 +- src/components/solves/SolvesArea.tsx | 14 +- src/store/SolvesFilters.ts | 30 ++ 6 files changed, 201 insertions(+), 348 deletions(-) delete mode 100644 src/app/[locale]/solves-experimental/page.tsx create mode 100644 src/components/dropdrowns/dropdown-filter-options/dropdown-filter-options.tsx create mode 100644 src/store/SolvesFilters.ts diff --git a/src/app/[locale]/solves-experimental/page.tsx b/src/app/[locale]/solves-experimental/page.tsx deleted file mode 100644 index dae188d2..00000000 --- a/src/app/[locale]/solves-experimental/page.tsx +++ /dev/null @@ -1,98 +0,0 @@ -"use client"; - -import { Button } from "@/components/ui/button"; -import { Card } from "@/components/ui/card"; -import { Input } from "@/components/ui/input"; -import { - BarsArrowDownIcon, - ChevronDoubleDownIcon, - Cog6ToothIcon, - EllipsisHorizontalIcon, - LockClosedIcon, - LockOpenIcon, - PlayIcon, - PlusIcon, - StopIcon, -} from "@heroicons/react/24/solid"; -import { Dialog } from "@/components/ui/dialog"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; -import { useCubes } from "@/hooks/useCubes"; -import EmptyCubes from "@/components/cubes/EmptyCubes"; -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu"; -import { DateTime } from "luxon"; -import { useLocale, useTranslations } from "next-intl"; -import { Checkbox } from "@/components/ui/checkbox"; -import { Drawer, DrawerTrigger } from "@/components/ui/drawer"; -import DialogDeleteCollection from "@/components/dialogs/dialog-delete-collection/dialog-delete-collection"; -import DrawerCreateCollection from "@/components/drawners/drawner-create-collection/drawner-create-collection"; -import { useDialogCubesOptions } from "@/store/DialogCubesOptions"; -import DialogEditCollection from "@/components/dialogs/dialog-edit-collection/dialog-edit-collection"; -import { useState } from "react"; -import MainCubeSelector from "@/components/MainCubeSelector"; -import { Toggle } from "@/components/ui/toggle"; -import { SolvesArea } from "@/components/solves/SolvesArea"; -import { FAKE_SESSION } from "@/FAKE_SESSION"; - -import { - Sheet, - SheetContent, - SheetDescription, - SheetHeader, - SheetTitle, - SheetTrigger, -} from "@/components/ui/sheet"; - -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; -import { useDialogSolve } from "@/store/DialogSolve"; -import SheetSolveDetails from "@/components/sheets/sheet-solve-details/SheetSolveDetails"; - -export default function Page() { - const { isDialogSolveOpen, handleCloseDialogSolve } = useDialogSolve(); - const locale = useLocale(); - const t = useTranslations("Index"); - return ( - <> - {/* container */} -
- - {/* header */} - -

Solves

- -
- - - - Session - All - -
- - - - - - - - - - - - - -
- - ); -} diff --git a/src/app/[locale]/solves/page.tsx b/src/app/[locale]/solves/page.tsx index 335b48eb..a5aa4dde 100644 --- a/src/app/[locale]/solves/page.tsx +++ b/src/app/[locale]/solves/page.tsx @@ -1,242 +1,55 @@ "use client"; -import { Button } from "@/components/button/index"; + +import { Card } from "@/components/ui/card"; +import { Input } from "@/components/ui/input"; import MainCubeSelector from "@/components/MainCubeSelector"; -import ModalSolve from "@/components/solves/ModalSolve"; -import { OverallContainer } from "@/components/OverallContainer"; -import { OverallHeader } from "@/components/OverallHeader"; -import { SolveFilters } from "@/components/solves/SolveFilters"; -import { Filter } from "@/components/solves/Filter"; -import { ButtonsSection } from "@/components/solves/ButtonsSection"; import { SolvesArea } from "@/components/solves/SolvesArea"; -import useSolvesPage from "@/hooks/useSolvesPage"; -import { InputText } from "@/components/input-text/index"; -import { useTimerStore } from "@/store/timerStore"; -import MoveModal from "@/components/solves/MoveModal"; -import ConfirmDelete from "@/components/solves/ConfirmDelete"; -import { useTranslations } from "next-intl"; -import { - FolderArrowDownIcon, - TrashIcon, - AdjustmentsHorizontalIcon, -} from "@heroicons/react/24/solid"; -import { useRef, useState } from "react"; -import useClickOutside from "@/hooks/useClickOutside"; -import { AnimatePresence, motion } from "framer-motion"; -import sortSolves, { SortMode } from "@/lib/SortSolves"; -import SortModeMenu from "@/components/solves/SortModeMenu"; -import SortOrderMenu from "@/components/solves/SortOrderMenu"; -import SolvesOptionsDropdown from "@/components/solves/SolvesOptionsDropdown"; -import ShareMenu from "@/components/solves/ShareMenu"; - -export default function SolvesPage() { - const { - handleTabClick, - currentTab, - handleMoveAll, - handleTrashAll, - handleSearch, - displaySolves, - isOpenMoveModal, - setIsOpenMoveModal, - handleGetMoveData, - setIsOpenDeleteModal, - handleGetDeleteData, - isOpenDeleteModal, - } = useSolvesPage(); - - const { selectedCube, setTimerStatistics } = useTimerStore(); - const t = useTranslations("Index"); - const sortMenuRef = useRef(null); - const sortSubMenuRef = useRef(null); - const solveMenuRef = useRef(null); - const shareMenuRef = useRef(null); - - const [sortOptions, setSortOptions] = useState({ - order: "Descending", - mode: "Date", - }); - const [sortModal, setSortModal] = useState(false); - const [subMenuModal, setSubMenuModal] = useState(false); - const [solvesOptionsMenu, setSolvesOptionsMenu] = useState(false); - const [shareSolveModal, setShareSolveModal] = useState(false); - - sortSolves({ displaySolves, sortMode: sortOptions }); - - useClickOutside(shareMenuRef, () => { - setShareSolveModal(false); - }); - useClickOutside(sortSubMenuRef, () => { - setSubMenuModal(false); - }); - - useClickOutside(sortMenuRef, () => { - setSortModal(false); - }); +import { FAKE_SESSION } from "@/FAKE_SESSION"; +import { Sheet } from "@/components/ui/sheet"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { useDialogSolve } from "@/store/DialogSolve"; +import SheetSolveDetails from "@/components/sheets/sheet-solve-details/SheetSolveDetails"; +import DropdownFilterSolves from "@/components/dropdrowns/dropdown-filter-options/dropdown-filter-options"; - useClickOutside(solveMenuRef, () => { - setSolvesOptionsMenu(false); - }); +export default function Page() { + const { isDialogSolveOpen, handleCloseDialogSolve } = useDialogSolve(); return ( <> - - - - - - - -
- { - handleSearch(e); - }} - id="search" - /> - - -
); } diff --git a/src/components/dropdrowns/dropdown-filter-options/dropdown-filter-options.tsx b/src/components/dropdrowns/dropdown-filter-options/dropdown-filter-options.tsx new file mode 100644 index 00000000..c63110d1 --- /dev/null +++ b/src/components/dropdrowns/dropdown-filter-options/dropdown-filter-options.tsx @@ -0,0 +1,109 @@ +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuPortal, + DropdownMenuRadioGroup, + DropdownMenuRadioItem, + DropdownMenuSeparator, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { useSolveFilters } from "@/store/SolvesFilters"; +import { + CalendarDaysIcon, + ClockIcon, + EllipsisVerticalIcon, + ShareIcon, +} from "@heroicons/react/24/solid"; +import { useState } from "react"; + +export default function DropdownFilterSolves() { + const { config, handleChangeConfig } = useSolveFilters(); + const [position, setPosition] = useState("top"); + return ( + <> + + + + + + {/* sort - time */} + + +
+ +

Time

+
+ + + + + + Ascending + + + Descending + + + + + + + {/* sort - date */} + + +
+ +

Date

+
+ + + + + + Ascending + + + Descending + + + + + + + {/* share */} + + +
+ +

Share by...

+
+ + + + Share... + + Last Ao5 + Last Ao12 + Last Ao50 + All session + + + + + + + ); +} diff --git a/src/components/solves/EmptySolves.tsx b/src/components/solves/EmptySolves.tsx index 5b508d35..9e1a7b43 100644 --- a/src/components/solves/EmptySolves.tsx +++ b/src/components/solves/EmptySolves.tsx @@ -1,28 +1,19 @@ -import { CubeIcon, CursorArrowRaysIcon } from "@heroicons/react/24/solid"; -import { Link } from "@/i18n/routing"; - -type Icon = "no-cube-selected" | "no-solves"; +import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; export default function EmptySolves({ message, icon, }: { message: string; - icon: Icon; + icon: React.ReactNode; }) { return ( <> - - {icon === "no-cube-selected" ? ( - - ) : ( - - )} -
{message}
- + + {icon} + Heads up! + {message} + ); } diff --git a/src/components/solves/SolvesArea.tsx b/src/components/solves/SolvesArea.tsx index b04c9cfc..40cfa9f2 100644 --- a/src/components/solves/SolvesArea.tsx +++ b/src/components/solves/SolvesArea.tsx @@ -5,7 +5,7 @@ import { VirtualizedGrid } from "@mierak/react-virtualized-grid"; import formatTime from "@/lib/formatTime"; import formatDate from "@/lib/formatDate"; import { useTranslations } from "next-intl"; - +import { CubeIcon, CursorArrowRaysIcon } from "@heroicons/react/24/solid"; import { ChatBubbleBottomCenterTextIcon, StarIcon, @@ -24,12 +24,20 @@ export function SolvesArea({ displaySolves }: SolvesArea) { if (!selectedCube) { return ( - + } + /> ); } if (!displaySolves || displaySolves.length === 0) { - return ; + return ( + } + /> + ); } return ( diff --git a/src/store/SolvesFilters.ts b/src/store/SolvesFilters.ts new file mode 100644 index 00000000..7b486442 --- /dev/null +++ b/src/store/SolvesFilters.ts @@ -0,0 +1,30 @@ +import { Solve } from "@/interfaces/Solve"; +import { create } from "zustand"; + +interface ConfigSolvesFiltersProps { + sort: "ascending" | "descending"; + time: "ascending" | "descending"; +} + +interface SolvesFiltersProps { + displayingSolves: Solve[] | null; + config: ConfigSolvesFiltersProps; + query: string; + handleSearch: (query: string) => void; + handleChangeConfig: (config: ConfigSolvesFiltersProps) => void; +} + +export const useSolveFilters = create((set) => ({ + displayingSolves: null, + config: { + sort: "ascending", + time: "ascending", + }, + query: "", + handleSearch: (query: string) => { + set((prev) => ({ ...prev, query })); + }, + handleChangeConfig: (config: ConfigSolvesFiltersProps) => { + set((prev) => ({ ...prev, ...config })); + }, +}));