chore: Get the remaining TODOs done

jorgehermo9 · Nov 4, 2024 · a83d806 · a83d806
1 parent b25d8b2
commit a83d806
Show file tree

Hide file tree

Showing 19 changed files with 86 additions and 69 deletions.
diff --git a/crates/web/frontend/src/app/global-error.tsx b/crates/web/frontend/src/app/global-error.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 import { Fira_Mono, Montserrat } from "next/font/google";
 import { useEffect } from "react";
 import "./globals.css";
-import { deleteDatabase } from "@/services/queries/queries";
+import { deleteDatabase } from "@/services/queries/query-service";
 
 const montserrat = Montserrat({ subsets: ["latin"], variable: "--font-sans" });
 const firaCode = Fira_Mono({
@@ -22,6 +22,12 @@ export default function GlobalError({
 }) {
 	useEffect(() => console.error(error), [error]);
 
+	const handleTryAgain = async () => {
+		localStorage.clear();
+		await deleteDatabase();
+		window.location.reload();
+	};
+
 	return (
 		<html lang="en" className="dark">
 			<body
@@ -33,22 +39,14 @@ export default function GlobalError({
 			>
 				<div
 					style={{ boxShadow: "0 60px 60px -90px var(--shadow-accent)" }}
-					className="flex flex-col items-center px-48 py-24 border rounded-lg bg-background"
+					className="w-[50rem] flex flex-col items-center px-12 py-12 border bg-background"
 				>
 					<h2 className="text-4xl font-bold">Something went wrong!</h2>
-					<p className="text-sm font-light mt-4">
-						Click the button below to refresh the playground state
+					<p className="text-sm font-light mt-4 text-center">
+						Click the button below to refresh the playground state. This will delete all your saved
+						queries and your settings aiming to solve the issue.
 					</p>
-					<Button
-						className="mt-8"
-						variant="outline"
-						type="button"
-						onClick={() => {
-							localStorage.clear();
-							deleteDatabase();
-							window.location.reload();
-						}}
-					>
+					<Button className="mt-8" variant="outline" type="button" onClick={handleTryAgain}>
 						Try again
 					</Button>
 				</div>

diff --git a/crates/web/frontend/src/app/page.tsx b/crates/web/frontend/src/app/page.tsx
@@ -2,7 +2,7 @@
 import Editor from "@/components/editor/editor";
 import Footer from "@/components/footer/footer";
 import { LeftSidebar } from "@/components/left-sidebar/left-sidebar";
-import useDebounce from "@/hooks/useDebounce";
+import useDebounce from "@/hooks/use-debounce";
 import { notify } from "@/lib/notify";
 import { i } from "@/lib/utils";
 import { Data } from "@/model/data";

diff --git a/crates/web/frontend/src/components/action-button/action-button.tsx b/crates/web/frontend/src/components/action-button/action-button.tsx
@@ -1,6 +1,6 @@
 import { Button, type ButtonProps } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import React from "react";
+import React, { useEffect } from "react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 
 interface Props extends ButtonProps {

diff --git a/crates/web/frontend/src/components/apply-button/apply-button.tsx b/crates/web/frontend/src/components/apply-button/apply-button.tsx
@@ -45,7 +45,7 @@ const ApplyButton = ({ className, onClick }: Props) => {
 		<ActionButton
 			className={cn("h-full px-4 border-0", className)}
 			onClick={onClick}
-			description="Apply the query to the provided JSON"
+			description="Apply GQ query"
 		>
 			<Play className="w-4 h-4 text-accent" />
 		</ActionButton>

diff --git a/crates/web/frontend/src/components/editor/editor.tsx b/crates/web/frontend/src/components/editor/editor.tsx
@@ -1,4 +1,4 @@
-import useLazyState from "@/hooks/useLazyState";
+import useLazyState from "@/hooks/use-lazy-state";
 import { MAX_RENDER_SIZE, STATE_DEBOUNCE_TIME } from "@/lib/constants";
 import { gqTheme } from "@/lib/theme";
 import { cn, copyToClipboard, isMac } from "@/lib/utils";

diff --git a/crates/web/frontend/src/components/examples-tab/examples-tab.tsx b/crates/web/frontend/src/components/examples-tab/examples-tab.tsx
@@ -123,7 +123,6 @@ const ExamplesSection = ({ title, exampleSection, onClick }: ExampleSectionProps
 };
 
 const ExamplesTab = ({ onClickExample, className }: Props) => {
-	const [onboardingVisible, setOnboardingVisible] = useState(false);
 	const [dialogOpen, setDialogOpen] = useState(false);
 	const [selectedExample, setSelectedExample] = useState<{
 		json: string;
@@ -141,20 +140,6 @@ const ExamplesTab = ({ onClickExample, className }: Props) => {
 		setDialogOpen(true);
 	}, []);
 
-	const handleCloseOnboarding = useCallback(() => {
-		setOnboardingVisible(false);
-		localStorage.setItem("onboarding", "done");
-	}, []);
-
-	// TODO: Handle onboarding
-	// const handleOpenChange = useCallback(
-	// 	(open: boolean) => {
-	// 		onboardingVisible && handleCloseOnboarding();
-	// 		setSheetOpen(open);
-	// 	},
-	// 	[onboardingVisible, handleCloseOnboarding],
-	// );
-
 	const handleSubmit = useCallback(async () => {
 		if (!selectedExample || !formatWorker) return;
 		const jsonData = new Data(selectedExample.json, FileType.JSON);
@@ -165,10 +150,6 @@ const ExamplesTab = ({ onClickExample, className }: Props) => {
 		onClickExample(formattedJson, formattedQuery);
 	}, [dataTabSize, queryTabSize, onClickExample, selectedExample, formatWorker]);
 
-	useEffect(() => {
-		localStorage.getItem("onboarding") || setOnboardingVisible(true);
-	}, []);
-
 	return (
 		<>
 			<AlertDialog open={dialogOpen} onOpenChange={setDialogOpen}>

diff --git a/crates/web/frontend/src/components/history-tab/history-tab.tsx b/crates/web/frontend/src/components/history-tab/history-tab.tsx
@@ -1,8 +1,8 @@
-import useDebounce from "@/hooks/useDebounce";
+import useDebounce from "@/hooks/use-debounce";
 import { HISTORY_PAGE_SIZE } from "@/lib/constants";
 import { capitalize, cn, countLines } from "@/lib/utils";
 import type { UserQuery } from "@/model/user-query";
-import { addQuery, deleteQuery, getPaginatedQueries } from "@/services/queries/queries";
+import { addQuery, deleteQuery, getPaginatedQueries } from "@/services/queries/query-service";
 import { AnimatePresence, motion } from "framer-motion";
 import { Redo, Trash, X } from "lucide-react";
 import { type MutableRefObject, useCallback, useEffect, useState } from "react";

diff --git a/crates/web/frontend/src/components/import-popup/import-popup.tsx b/crates/web/frontend/src/components/import-popup/import-popup.tsx
@@ -1,5 +1,5 @@
 import ActionButton from "@/components/action-button/action-button";
-import useLazyState from "@/hooks/useLazyState";
+import useLazyState from "@/hooks/use-lazy-state";
 import { STATE_DEBOUNCE_TIME } from "@/lib/constants";
 import { formatBytes } from "@/lib/utils";
 import { Data } from "@/model/data";

diff --git a/crates/web/frontend/src/components/left-sidebar/left-sidebar.tsx b/crates/web/frontend/src/components/left-sidebar/left-sidebar.tsx
@@ -9,7 +9,8 @@ import HistoryTab from "../history-tab/history-tab";
 import SettingsTab from "../settings-tab/settings-tab";
 import ShareTab from "../share-tab/share-tab";
 import ThemeButton from "../theme-button/theme-button";
-import { string } from "zod";
+import OnboardingPopup from "../onboarding-popup/onboarding-popup";
+import { useOnboarding } from "@/hooks/use-onboarding";
 
 type Tab = "examples" | "share" | "history" | "settings";
 
@@ -42,23 +43,32 @@ export const LeftSidebar = ({
 	setShareLink,
 }: Props) => {
 	const [selectedTab, setSelectedTab] = useState<Tab>("examples");
+	const [OnboardingComponent, isOnboardingVisible, dismissOnboarding] = useOnboarding();
+
+	const handleChangeOpen = useCallback(
+		(value: boolean) => {
+			setOpen(value);
+			dismissOnboarding();
+		},
+		[setOpen, dismissOnboarding],
+	);
 
 	const handleClick = useCallback(
 		(tab: Tab) => {
 			setSelectedTab(tab);
-			open && tab === selectedTab ? setOpen(false) : setOpen(true);
+			open && tab === selectedTab ? handleChangeOpen(false) : handleChangeOpen(true);
 		},
-		[open, setOpen, selectedTab],
+		[open, handleChangeOpen, selectedTab],
 	);
 
 	const handleKeyDown = useCallback(
 		(e: KeyboardEvent) => {
 			if ((isMac ? e.metaKey : e.ctrlKey) && (e.key === "b" || e.key === "B")) {
 				e.preventDefault();
-				setOpen(!open);
+				handleChangeOpen(!open);
 			}
 		},
-		[open, setOpen],
+		[open, handleChangeOpen],
 	);
 
 	useEffect(() => {
@@ -69,7 +79,7 @@ export const LeftSidebar = ({
 	return (
 		<div className="flex bg-background">
 			<div className="h-full w-16 flex flex-col items-center justify-between border-r">
-				<div className="flex flex-col w-full">
+				<div className="flex flex-col w-full relative">
 					<ActionButton
 						className={cn("w-full h-12", selectedTab === "share" && "bg-muted")}
 						description="Share your playground"
@@ -96,7 +106,11 @@ export const LeftSidebar = ({
 						/>
 					</ActionButton>
 					<ActionButton
-						className={cn("w-full h-12", selectedTab === "examples" && "bg-muted")}
+						className={cn(
+							"w-full h-12",
+							selectedTab === "examples" && "bg-muted",
+							isOnboardingVisible && "border-y border-accent",
+						)}
 						side="right"
 						description="Show query examples"
 						variant="subtle"
@@ -109,6 +123,8 @@ export const LeftSidebar = ({
 							)}
 						/>
 					</ActionButton>
+
+					<OnboardingComponent className="absolute left-full top-24 -translate-y-1/4 z-20 w-80" />
 				</div>
 				<div className="flex flex-col w-full">
 					<ThemeButton className="w-full h-12" />
@@ -132,10 +148,6 @@ export const LeftSidebar = ({
 				className={`${open ? "max-w-96 border-r" : "max-w-0 border-0"} transition-all overflow-hidden`}
 			>
 				<div className="w-96 h-full overflow-y-auto overflow-x-hidden">
-					<ExamplesTab
-						className={cn(selectedTab === "examples" ? "block" : "hidden")}
-						onClickExample={onClickExample}
-					/>
 					<ShareTab
 						className={cn(selectedTab === "share" ? "block" : "hidden")}
 						inputContent={inputContent}
@@ -150,6 +162,10 @@ export const LeftSidebar = ({
 						onClickQuery={onClickQuery}
 						addNewQueryCallback={addNewQueryCallback}
 					/>
+					<ExamplesTab
+						className={cn(selectedTab === "examples" ? "block" : "hidden")}
+						onClickExample={onClickExample}
+					/>
 					<SettingsTab className={cn(selectedTab === "settings" ? "block" : "hidden")} />
 				</div>
 			</div>

diff --git a/crates/web/frontend/src/components/onboarding-popup/onboarding-popup.module.css b/crates/web/frontend/src/components/onboarding-popup/onboarding-popup.module.css
@@ -1,5 +1,5 @@
 .popupContainer {
-	@apply rounded-md border w-96 p-4 bg-background;
+	@apply border p-4 bg-background border-accent;
 	transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
 
 	&[data-visible="true"] {

diff --git a/crates/web/frontend/src/components/onboarding-popup/onboarding-popup.tsx b/crates/web/frontend/src/components/onboarding-popup/onboarding-popup.tsx
@@ -16,15 +16,14 @@ const OnboardingPopup = ({ className, visible, onClose }: Props) => {
 			data-visible={visible}
 			className={cn(className, styles.popupContainer)}
 		>
-			<div className="absolute bottom-full h-[1.1rem] w-[1px] bg-accent left-5" />
 			<div className="flex items-center gap-2 mb-2">
-				<Stars className="h-4 w-4" />
-				<h3 className="font-semibold text-md">New to GQ?</h3>
+				<Stars className="h-3.5 w-3.5" />
+				<h4>New to GQ?</h4>
 			</div>
-			<span className="text-sm">
+			<p className="text-wrap text-start">
 				You can check some examples here as your starting point to discover all the features!
-			</span>
-			<X className="absolute top-2 right-2 h-4 w-4 cursor-pointer" onClick={onClose} />
+			</p>
+			<X className="absolute top-2 right-2 h-3 w-3 cursor-pointer" onClick={onClose} />
 		</div>
 	);
 };

diff --git a/crates/web/frontend/src/components/share-tab/share-tab.tsx b/crates/web/frontend/src/components/share-tab/share-tab.tsx
@@ -73,13 +73,13 @@ const ShareTab = ({
 							<InfoIcon className="w-3 h-3" />
 						</TooltipTrigger>
 						<TooltipContent className="w-96 font-normal p-4" side="bottom">
-							<span>
+							<p>
 								When generating a sharable link,{" "}
 								<strong>
 									the content of the input json and the query will be saved in the server
 								</strong>{" "}
 								until the expiration time is reached
-							</span>
+							</p>
 						</TooltipContent>
 					</Tooltip>
 				</div>

diff --git a/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx b/crates/web/frontend/src/components/shortcut-popup/shortcut-popup.tsx
@@ -47,13 +47,13 @@ const ShortcutPopup = ({ className }: Props) => {
 				<div className="flex flex-col gap-8">
 					{shortcutSections(isMac).map((shortcutSection) => (
 						<div key={shortcutSection.title}>
-							<div className="flex py-4 px-6 gap-2 items-center text-accent">
+							<div className="flex py-4 px-6 gap-2 items-center">
 								{shortcutSection.icon}
 								<h4 className="font-semibold">{shortcutSection.title}</h4>
 							</div>
 							<Table>
 								<TableHeader>
-									<TableRow>
+									<TableRow className="text-accent">
 										<TableHead>Description</TableHead>
 										<TableHead className="text-right">Shortcut</TableHead>
 									</TableRow>

diff --git a/crates/web/frontend/src/components/star-count/star-count.tsx b/crates/web/frontend/src/components/star-count/star-count.tsx
@@ -13,7 +13,7 @@ const StarCount = ({ className }: Props) => {
 	const [clicked, setClicked] = useState<boolean>(false);
 	const [fetching, setFetching] = useState<boolean>(true);
 
-	const handleClick = useCallback((e: MouseEvent<HTMLAnchorElement>) => {
+	const handleClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
 		setClicked(true);
 		setTimeout(() => {
 			window.open("https://github.com/jorgehermo9/gq", "_blank");
@@ -35,12 +35,9 @@ const StarCount = ({ className }: Props) => {
 			description="Check the GQ Github repository"
 			className={className}
 			variant="subtle"
+			onClick={handleClick}
 		>
-			<a
-				href="https://github.com/jorgehermo9/gq"
-				onClick={handleClick}
-				className="flex items-center select-none"
-			>
+			<a href="https://github.com/jorgehermo9/gq" className="flex items-center select-none">
 				<Github className="w-3.5 h-3.5 mr-1" />
 				{fetching ? (
 					<Loader />

diff --git a/...es/web/frontend/src/hooks/useDebounce.tsx → ...s/web/frontend/src/hooks/use-debounce.tsx b/...es/web/frontend/src/hooks/useDebounce.tsx → ...s/web/frontend/src/hooks/use-debounce.tsx
diff --git a/...s/web/frontend/src/hooks/useLazyState.tsx → ...web/frontend/src/hooks/use-lazy-state.tsx b/...s/web/frontend/src/hooks/useLazyState.tsx → ...web/frontend/src/hooks/use-lazy-state.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState } from "react";
-import useDebounce from "./useDebounce";
+import useDebounce from "./use-debounce";
 
 function useLazyState<S>(
 	initialState: S,

diff --git a/crates/web/frontend/src/hooks/use-onboarding.tsx b/crates/web/frontend/src/hooks/use-onboarding.tsx
@@ -0,0 +1,22 @@
+import OnboardingPopup from "@/components/onboarding-popup/onboarding-popup";
+import { useCallback, useEffect, useState } from "react";
+
+export const useOnboarding = () => {
+	const [visible, setVisible] = useState(false);
+
+	const dismiss = useCallback(() => {
+		if (!visible) return;
+		setVisible(false);
+		localStorage.setItem("onboarding", "done");
+	}, [visible]);
+
+	useEffect(() => {
+		localStorage.getItem("onboarding") === "done" || setVisible(true);
+	}, []);
+
+	const OnboardingComponent = ({ className }: { className?: string }) => (
+		<OnboardingPopup className={className} visible={visible} onClose={dismiss} />
+	);
+
+	return [OnboardingComponent, visible, dismiss] as const;
+};
diff --git a/crates/web/frontend/src/model/settings.ts b/crates/web/frontend/src/model/settings.ts
@@ -17,6 +17,8 @@ export type FormattingSettings = {
 
 export type WorkspaceSettings = {
 	linkEditors: boolean;
+	sidebarOpen: boolean;
+	selectedTab: string;
 };
 
 const getDefaultSettings = (): Settings => {
@@ -32,6 +34,8 @@ const getDefaultSettings = (): Settings => {
 		},
 		workspaceSettings: {
 			linkEditors: true,
+			sidebarOpen: false,
+			selectedTab: "examples",
 		},
 	};
 };

diff --git a/.../frontend/src/services/queries/queries.ts → ...end/src/services/queries/query-service.ts b/.../frontend/src/services/queries/queries.ts → ...end/src/services/queries/query-service.ts