feat(frontend): remove imports from sidebar

IgnisDa · Jul 27, 2023 · f7a8deb · f7a8deb
1 parent 13c933e
commit f7a8deb
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 18 deletions.
diff --git a/apps/frontend/src/lib/layouts/LoggedIn.tsx b/apps/frontend/src/lib/layouts/LoggedIn.tsx
@@ -31,7 +31,6 @@ import { changeCase } from "@ryot/utilities";
 import {
 	IconChevronLeft,
 	IconChevronRight,
-	IconDatabaseImport,
 	IconDeviceSpeaker,
 	IconHome2,
 	IconLogout,
@@ -315,14 +314,6 @@ export default function ({ children }: { children: ReactElement }) {
 							icon={IconStretching}
 							links={[{ label: "Home", link: ROUTES.fitness.home }]}
 						/>
-						<LinksGroup
-							label="Importing"
-							icon={IconDatabaseImport}
-							links={[
-								{ label: "New", link: ROUTES.imports.new },
-								{ label: "Reports", link: ROUTES.imports.reports },
-							]}
-						/>
 						<LinksGroup
 							label="Settings"
 							icon={IconSettings}

diff --git a/apps/frontend/src/pages/imports/index.tsx b/apps/frontend/src/pages/imports/index.tsx
@@ -1,4 +1,5 @@
 import type { NextPageWithLayout } from "../_app";
+import { ROUTES } from "@/lib/constants";
 import LoggedIn from "@/lib/layouts/LoggedIn";
 import { gqlClient } from "@/lib/services/api";
 import { fileToText } from "@/lib/utilities";
@@ -9,6 +10,7 @@ import {
 	Container,
 	FileInput,
 	Flex,
+	Group,
 	PasswordInput,
 	Select,
 	Stack,
@@ -25,6 +27,7 @@ import {
 import { changeCase } from "@ryot/utilities";
 import { useMutation } from "@tanstack/react-query";
 import Head from "next/head";
+import Link from "next/link";
 import { type ReactElement, useState } from "react";
 import { match } from "ts-pattern";
 import { z } from "zod";
@@ -186,13 +189,18 @@ const Page: NextPageWithLayout = () => {
 					<Stack>
 						<Flex justify={"space-between"} align={"center"}>
 							<Title>Import data</Title>
-							<Anchor
-								size="xs"
-								href="https://ignisda.github.io/ryot/importing.html"
-								target="_blank"
-							>
-								Docs
-							</Anchor>
+							<Group>
+								<Link passHref legacyBehavior href={ROUTES.imports.reports}>
+									<Anchor size="xs">Reports</Anchor>
+								</Link>
+								<Anchor
+									size="xs"
+									href="https://ignisda.github.io/ryot/importing.html"
+									target="_blank"
+								>
+									Docs
+								</Anchor>
+							</Group>
 						</Flex>
 						<Select
 							label="Select a source"

diff --git a/apps/frontend/src/pages/imports/reports.tsx b/apps/frontend/src/pages/imports/reports.tsx
@@ -1,10 +1,13 @@
 import type { NextPageWithLayout } from "../_app";
+import { ROUTES } from "@/lib/constants";
 import LoadingPage from "@/lib/layouts/LoadingPage";
 import LoggedIn from "@/lib/layouts/LoggedIn";
 import { gqlClient } from "@/lib/services/api";
 import {
 	Accordion,
+	Anchor,
 	Container,
+	Flex,
 	Indicator,
 	JsonInput,
 	Stack,
@@ -16,6 +19,7 @@ import { changeCase } from "@ryot/utilities";
 import { useQuery } from "@tanstack/react-query";
 import { DateTime } from "luxon";
 import Head from "next/head";
+import Link from "next/link";
 import { type ReactElement } from "react";
 
 const Page: NextPageWithLayout = () => {
@@ -34,7 +38,12 @@ const Page: NextPageWithLayout = () => {
 			</Head>
 			<Container size="sm">
 				<Stack>
-					<Title>Import Reports</Title>
+					<Flex justify={"space-between"} align={"center"}>
+						<Title>Import Reports</Title>
+						<Link passHref legacyBehavior href={ROUTES.imports.new}>
+							<Anchor size="xs">New</Anchor>
+						</Link>
+					</Flex>
 					{importReports.data.length > 0 ? (
 						<Accordion>
 							{importReports.data.map((report) => (

diff --git a/apps/frontend/src/pages/index.tsx b/apps/frontend/src/pages/index.tsx
@@ -29,7 +29,11 @@ import {
 	MetadataLot,
 } from "@ryot/generated/graphql/backend/graphql";
 import { formatTimeAgo } from "@ryot/utilities";
-import { IconMessage2, IconPhotoPlus } from "@tabler/icons-react";
+import {
+	IconDatabaseImport,
+	IconMessage2,
+	IconPhotoPlus,
+} from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import humanFormat from "human-format";
 import {
@@ -330,6 +334,15 @@ const Page: NextPageWithLayout = () => {
 							{ minWidth: "lg", cols: 3 },
 						]}
 					>
+						<Link passHref legacyBehavior href={ROUTES.imports.new}>
+							<Button
+								variant="outline"
+								component="a"
+								leftIcon={<IconDatabaseImport />}
+							>
+								New import
+							</Button>
+						</Link>
 						<Link
 							passHref
 							legacyBehavior