Skip to content

Commit

Permalink
move solves to historial / share solves
Browse files Browse the repository at this point in the history
  • Loading branch information
bryanlundberg committed Sep 13, 2024
1 parent 1b5b184 commit 725f67a
Show file tree
Hide file tree
Showing 9 changed files with 219 additions and 26 deletions.
Binary file added public/empty.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/app/[locale]/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Toaster } from "@/components/ui/sonner";
import "./globals.css";
import PreloadSettings from "@/components/PreloadSettings";
import { roboto } from "@/fonts/fonts";
Expand Down Expand Up @@ -49,6 +50,7 @@ export default async function RootLayout({
<NextIntlClientProvider messages={messages}>
<PreloadSettings>{children}</PreloadSettings>
</NextIntlClientProvider>
<Toaster />
</body>
</html>
);
Expand Down
17 changes: 12 additions & 5 deletions src/app/[locale]/solves/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,22 @@ import { useTimerStore } from "@/store/timerStore";
import { useSolveFiltersStore } from "@/store/SolvesFilters";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Button } from "@/components/ui/button";
import { EnterIcon } from "@radix-ui/react-icons";
import { EnterIcon, ExitIcon, Share2Icon } from "@radix-ui/react-icons";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { useState } from "react";
import DialogMoveHistorial from "@/components/dialogs/dialog-move-historial/dialog-move-historial";
import { Dialog } from "@/components/ui/dialog";

export default function Page() {
const { isDialogSolveOpen, handleCloseDialogSolve } = useDialogSolve();
const { handleSearch, handleChangeTab, tab } = useSolveFiltersStore();
const { selectedCube } = useTimerStore();

const [isOpen, setIsOpen] = useState(false); // Used for move-historial button
return (
<>
{/* container */}
Expand All @@ -47,7 +50,7 @@ export default function Page() {
>
<TabsList>
<TabsTrigger value="session">Session</TabsTrigger>
<TabsTrigger value="all">All</TabsTrigger>
<TabsTrigger value="all">Historial</TabsTrigger>
</TabsList>
</Tabs>

Expand All @@ -58,8 +61,8 @@ export default function Page() {
<TooltipProvider delayDuration={100}>
<Tooltip>
<TooltipTrigger asChild>
<Button variant={"outline"}>
<EnterIcon />
<Button variant={"outline"} onClick={() => setIsOpen(true)}>
{tab === "session" ? <EnterIcon /> : <ExitIcon />}
</Button>
</TooltipTrigger>
<TooltipContent>
Expand All @@ -82,6 +85,10 @@ export default function Page() {
/>
</ScrollArea>

<Dialog open={isOpen} onOpenChange={() => setIsOpen(false)}>
<DialogMoveHistorial handleClose={() => setIsOpen(false)} />
</Dialog>

<Sheet open={isDialogSolveOpen} onOpenChange={handleCloseDialogSolve}>
<SheetSolveDetails />
</Sheet>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { Button } from "@/components/ui/button";
import {
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { getAllCubes, getCubeById } from "@/db/dbOperations";
import finishSession from "@/lib/finishSession";
import { useSolveFiltersStore } from "@/store/SolvesFilters";
import { useTimerStore } from "@/store/timerStore";
import { toast } from "sonner";

export default function DialogMoveHistorial({
handleClose,
}: {
handleClose: () => void;
}) {
const { selectedCube, cubes, setCubes, setSelectedCube, setTimerStatistics } =
useTimerStore();
const { tab } = useSolveFiltersStore();

const handleMoveSessionToHistorial = async () => {
if (selectedCube) {
await finishSession({ selectedCube, cubesDB: cubes });
const cubesDB = await getAllCubes();
setCubes(cubesDB);
const currentCube = await getCubeById(selectedCube.id);
setSelectedCube(currentCube);
setTimerStatistics();
handleClose();
return;
}

toast("Unable action", {
description: "Please select a cube before.",
});
};

return (
<>
<DialogContent className="max-w-96 rounded-md">
<DialogHeader>
<DialogTitle>Move solves to history?</DialogTitle>
<DialogDescription>
You will be able to access them by tapping the history switch.
</DialogDescription>
<DialogFooter>
<div className="flex gap-1 mt-5">
<Button variant={"ghost"} onClick={handleClose}>
Cancel
</Button>
<Button variant={"ghost"} onClick={handleMoveSessionToHistorial}>
Move
</Button>
</div>
</DialogFooter>
</DialogHeader>
</DialogContent>
</>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,50 @@ import {
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { shareSolves } from "@/lib/shareSolves";
import { useSolveFiltersStore } from "@/store/SolvesFilters";
import { useTimerStore } from "@/store/timerStore";
import {
CalendarIcon,
DividerHorizontalIcon,
DividerVerticalIcon,
DotsVerticalIcon,
LapTimerIcon,
DragHandleHorizontalIcon,
DragHandleVerticalIcon,
Share1Icon,
} from "@radix-ui/react-icons";
import { toast } from "sonner";

export default function DropdownFilterSolves() {
const { sortType, order, handleChangeOrder, handleChangeSortType } =
const { sortType, order, handleChangeOrder, handleChangeSortType, tab } =
useSolveFiltersStore();
const { selectedCube } = useTimerStore();

const handleShare = () => {
if (selectedCube) {
const {
formattedAo5,
formattedAo12,
formattedLast5Solves,
formattedLast12Solves,
} = shareSolves({
solves:
tab === "session"
? selectedCube.solves.session
: selectedCube.solves.all,
});
console.log(
formattedAo5,
formattedAo12,
formattedLast5Solves,
formattedLast12Solves
);
toast("Copied successfully", {
description: "Has been copied to your clipboard.",
});
} else {
toast("Unable to copy", {
description: "Please select a cube before attempting to copy.",
});
}
};

return (
<>
Expand All @@ -38,8 +69,8 @@ export default function DropdownFilterSolves() {
{/* sort - time */}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<div className="flex items-center gap-1">
<DividerHorizontalIcon />
<div className="flex items-center gap-2">
<DragHandleHorizontalIcon />
<p>Sort</p>
</div>
</DropdownMenuSubTrigger>
Expand All @@ -65,8 +96,8 @@ export default function DropdownFilterSolves() {
{/* sort - date */}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<div className="flex items-center gap-1">
<DividerVerticalIcon className="w-4 h-4" />
<div className="flex items-center gap-2">
<DragHandleVerticalIcon />
<p>Order</p>
</div>
</DropdownMenuSubTrigger>
Expand All @@ -92,19 +123,22 @@ export default function DropdownFilterSolves() {
{/* share */}
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<div className="flex items-center gap-1">
<Share1Icon className="w-4 h-4" />
<div className="flex items-center gap-2">
<Share1Icon />
<p>Share</p>
</div>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem disabled>Share...</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Last Ao5</DropdownMenuItem>
<DropdownMenuItem>Last Ao12</DropdownMenuItem>
<DropdownMenuItem>Last Ao50</DropdownMenuItem>
<DropdownMenuItem>All</DropdownMenuItem>
<DropdownMenuItem onClick={handleShare}>
Last Ao5
</DropdownMenuItem>
<DropdownMenuItem onClick={handleShare}>
Last Ao12
</DropdownMenuItem>
<DropdownMenuItem onClick={handleShare}>All</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
Expand Down
19 changes: 17 additions & 2 deletions src/components/solves/SolvesArea.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ import { sort } from "fast-sort";
import { useSolveFiltersStore } from "@/store/SolvesFilters";
import { filterData, SearchType } from "filter-data";
import useRemoveGridHeight from "@/hooks/useRemoveGridHeight";
import { ComponentNoneIcon, CubeIcon } from "@radix-ui/react-icons";
import { CubeIcon } from "@radix-ui/react-icons";
import Image from "next/image";

interface SolvesArea {
displaySolves: Solve[] | undefined;
Expand All @@ -34,7 +35,21 @@ export function SolvesArea({ displaySolves }: SolvesArea) {

if (!displaySolves || displaySolves.length === 0) {
return (
<EmptySolves message={t("no-solves")} icon={<ComponentNoneIcon />} />
<>
<div className="w-full flex flex-col items-center justify-center">
<Image
src={"/empty.png"}
alt="empty"
width={200}
height={200}
className="object-scale-down my-20"
/>
<div>Nothing here yet!</div>
<div>
Tap the switch at the top of the screen to see your history.
</div>
</div>
</>
);
}

Expand Down
4 changes: 3 additions & 1 deletion src/hooks/useRemoveGridHeight.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { useSolveFiltersStore } from "@/store/SolvesFilters";
import { useTimerStore } from "@/store/timerStore";
import { useEffect } from "react";

const useRemoveGridHeight = () => {
const { selectedCube } = useTimerStore();
const { tab } = useSolveFiltersStore();
useEffect(() => {
const container = document.querySelector(".container") as HTMLElement;

if (container) {
container.style.setProperty("--grid-height", "auto");
}
}, [selectedCube]);
}, [selectedCube, tab]);
};

export default useRemoveGridHeight;
73 changes: 73 additions & 0 deletions src/lib/shareSolves.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import { Solve } from "@/interfaces/Solve";
import formatTime from "./formatTime";
import calculateCurrentAo from "./calculateCurrentAo";

export function shareSolves({ solves }: { solves: Solve[] }) {
// retrieving last n solves
const last5Solves = solves.slice(0, 5);
const last12Solves = solves.slice(0, 12);

// finding average of last n solves
const Ao5 = calculateCurrentAo(last5Solves, 5);
const Ao12 = calculateCurrentAo(last12Solves, 12);

// formatting last averages
const formattedAo5 = Ao5
? `${formatTime(Ao5).split(".")[0]}.${formatTime(Ao5).split(".")[1]}`
: "0.0";

const formattedAo12 = Ao12
? `${formatTime(Ao12).split(".")[0]}.${formatTime(Ao12).split(".")[1]}`
: "0.0";

// finding max and min time in respective solves
let maxTimeAo5 = -Infinity;
let minTimeAo5 = Infinity;

let maxTimeAo12 = -Infinity;
let minTimeAo12 = Infinity;

for (let i = 0; i < last5Solves.length; i++) {
maxTimeAo5 = Math.max(maxTimeAo5, last5Solves[i].time);
minTimeAo5 = Math.min(minTimeAo5, last5Solves[i].time);
}

for (let i = 0; i < last12Solves.length; i++) {
maxTimeAo12 = Math.max(maxTimeAo12, last12Solves[i].time);
minTimeAo12 = Math.min(minTimeAo12, last12Solves[i].time);
}

// formatting each solves
const formattedLast5Solves = last5Solves
.map((solve, index) => {
const time = `${formatTime(solve.time).split(".")[0]}.${
formatTime(solve.time).split(".")[1]
}`;
const scramble = `${solve.scramble}`;

if (solve.time === maxTimeAo5 || solve.time === minTimeAo5) {
return `${Array(4).join(" ")}${index + 1}. (${time}) ${scramble}`;
} else return `${Array(4).join(" ")}${index + 1}. ${time} ${scramble}`;
})
.join("\n");

const formattedLast12Solves = last12Solves
.map((solve, index) => {
const time = `${formatTime(solve.time).split(".")[0]}.${
formatTime(solve.time).split(".")[1]
}`;
const scramble = `${solve.scramble}`;

if (solve.time === maxTimeAo12 || solve.time === minTimeAo12) {
return `${Array(4).join(" ")}${index + 1}. (${time}) ${scramble}`;
} else return `${Array(4).join(" ")}${index + 1}. ${time} ${scramble}`;
})
.join("\n");

return {
formattedAo5,
formattedAo12,
formattedLast5Solves,
formattedLast12Solves,
};
}
3 changes: 0 additions & 3 deletions src/store/SolvesFilters.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Solve } from "@/interfaces/Solve";
import { create } from "zustand";

type Direction = "asc" | "desc";
type SortVariant = "date" | "time";
type TabVariant = "session" | "all";
interface SolvesFiltersProps {
tab: TabVariant;
displayingSolves: Solve[] | null;
query: string;
sortType: SortVariant;
order: Direction;
Expand All @@ -18,7 +16,6 @@ interface SolvesFiltersProps {

export const useSolveFiltersStore = create<SolvesFiltersProps>((set) => ({
tab: "session",
displayingSolves: null,
sortType: "date",
order: "desc",
query: "",
Expand Down

0 comments on commit 725f67a

Please sign in to comment.