From cb19925011d889c513e1bbedc446e399597e38a0 Mon Sep 17 00:00:00 2001 From: Ellie Huxtable Date: Wed, 17 Apr 2024 14:06:05 +0100 Subject: feat(gui): work on home page, sort state (#1956) 1. Start on a home page, can sort onboarding/etc from there 2. Introduce zustand for state management. It's nice! Did a production build and clicked around for a while. Memory usage seems nice and chill. --- ui/src/components/Drawer.tsx | 2 - ui/src/components/HistoryList.tsx | 131 ++++++++++++++++++--------------- ui/src/components/dotfiles/Aliases.tsx | 37 ++++------ ui/src/components/history/Stats.tsx | 56 ++------------ 4 files changed, 91 insertions(+), 135 deletions(-) (limited to 'ui/src/components') diff --git a/ui/src/components/Drawer.tsx b/ui/src/components/Drawer.tsx index 65bb5ab4..91753624 100644 --- a/ui/src/components/Drawer.tsx +++ b/ui/src/components/Drawer.tsx @@ -1,5 +1,3 @@ -import * as React from "react"; - import { Drawer as VDrawer } from "vaul"; export default function Drawer({ diff --git a/ui/src/components/HistoryList.tsx b/ui/src/components/HistoryList.tsx index b31a4be4..9616ecf0 100644 --- a/ui/src/components/HistoryList.tsx +++ b/ui/src/components/HistoryList.tsx @@ -1,75 +1,88 @@ -import { DateTime } from 'luxon'; -import { ChevronRightIcon } from '@heroicons/react/20/solid' +import { ChevronRightIcon } from "@heroicons/react/20/solid"; -function msToTime(ms) { - let milliseconds = (ms).toFixed(1); - let seconds = (ms / 1000).toFixed(1); - let minutes = (ms / (1000 * 60)).toFixed(1); - let hours = (ms / (1000 * 60 * 60)).toFixed(1); - let days = (ms / (1000 * 60 * 60 * 24)).toFixed(1); +// @ts-ignore +import { DateTime } from "luxon"; + +function msToTime(ms: number) { + let milliseconds = parseInt(ms.toFixed(1)); + let seconds = parseInt((ms / 1000).toFixed(1)); + let minutes = parseInt((ms / (1000 * 60)).toFixed(1)); + let hours = parseInt((ms / (1000 * 60 * 60)).toFixed(1)); + let days = parseInt((ms / (1000 * 60 * 60 * 24)).toFixed(1)); if (milliseconds < 1000) return milliseconds + "ms"; else if (seconds < 60) return seconds + "s"; else if (minutes < 60) return minutes + "m"; else if (hours < 24) return hours + "hr"; - else return days + " Days" + else return days + " Days"; } -export default function HistoryList(props){ +export default function HistoryList(props: any) { return ( + ); } diff --git a/ui/src/components/dotfiles/Aliases.tsx b/ui/src/components/dotfiles/Aliases.tsx index 4854e6b5..61fd001c 100644 --- a/ui/src/components/dotfiles/Aliases.tsx +++ b/ui/src/components/dotfiles/Aliases.tsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import { useEffect, useState } from "react"; import DataTable from "@/components/ui/data-table"; import { Button } from "@/components/ui/button"; @@ -8,34 +8,21 @@ import { DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, - DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; +import { ColumnDef } from "@tanstack/react-table"; + import { invoke } from "@tauri-apps/api/core"; import Drawer from "@/components/Drawer"; -function loadAliases( - setAliases: React.Dispatch>, -) { - invoke("aliases").then((aliases: any) => { - setAliases(aliases); - }); -} - -type Alias = { - name: string; - value: string; -}; +import { Alias } from "@/state/models"; +import { useStore } from "@/state/store"; -function deleteAlias( - name: string, - setAliases: React.Dispatch>, -) { +function deleteAlias(name: string, refreshAliases: () => void) { invoke("delete_alias", { name: name }) .then(() => { - console.log("Deleted alias"); - loadAliases(setAliases); + refreshAliases(); }) .catch(() => { console.error("Failed to delete alias"); @@ -101,7 +88,9 @@ function AddAlias({ onAdd: onAdd }: { onAdd?: () => void }) { } export default function Aliases() { - let [aliases, setAliases] = useState([]); + const aliases = useStore((state) => state.aliases); + const refreshAliases = useStore((state) => state.refreshAliases); + let [aliasDrawerOpen, setAliasDrawerOpen] = useState(false); const columns: ColumnDef[] = [ @@ -129,7 +118,7 @@ export default function Aliases() { Actions deleteAlias(alias.name, setAliases)} + onClick={() => deleteAlias(alias.name, refreshAliases)} > Delete @@ -141,7 +130,7 @@ export default function Aliases() { ]; useEffect(() => { - loadAliases(setAliases); + refreshAliases(); }, []); return ( @@ -172,7 +161,7 @@ export default function Aliases() { > { - loadAliases(setAliases); + refreshAliases(); setAliasDrawerOpen(false); }} /> diff --git a/ui/src/components/history/Stats.tsx b/ui/src/components/history/Stats.tsx index afd9ed89..ce92ac04 100644 --- a/ui/src/components/history/Stats.tsx +++ b/ui/src/components/history/Stats.tsx @@ -5,29 +5,18 @@ import PacmanLoader from "react-spinners/PacmanLoader"; import { BarChart, Bar, - Rectangle, XAxis, YAxis, - CartesianGrid, Tooltip, - Legend, ResponsiveContainer, } from "recharts"; -const tabs = [ - { name: "Daily", href: "#", current: true }, - { name: "Weekly", href: "#", current: false }, - { name: "Monthly", href: "#", current: false }, -]; - -function classNames(...classes) { - return classes.filter(Boolean).join(" "); -} - function renderLoading() { -
- -
; + return ( +
+ +
+ ); } export default function Stats() { @@ -77,7 +66,7 @@ export default function Stats() {
- {stats.map((item) => ( + {stats.map((item: any) => (
-
- {/* Use an "onChange" listener to redirect the user to the selected tab URL. */} - -
-
- -
-
-- cgit v1.3.1