feat(front): shareable links in playground (#43)

Co-authored-by: Jorge Hermo <[email protected]>

crates/web/frontend/docker-compose.yml

@@ -7,6 +7,7 @@ services:
       - 3001:3000
     environment:
       DATABASE_URL: postgres://postgres:password@db:5432/db
+      RUST_LOG: debug
     depends_on:
       db:
         condition: service_healthy

crates/web/frontend/next.config.mjs

@@ -1,11 +1,23 @@
+const production = process.env.NODE_ENV === "production";
+
 const nextConfig = {
-  webpack: (config) => {
-    config.experiments = {
-      asyncWebAssembly: true,
-      layers: true,
-      syncWebAssembly: true,
-    };
-    return config;
-  },
+	async rewrites() {
+		return production
+			? []
+			: [
+					{
+						source: "/api/:path*",
+						destination: "http://localhost:3001/:path*",
+					},
+				];
+	},
+	webpack: (config) => {
+		config.experiments = {
+			asyncWebAssembly: true,
+			layers: true,
+			syncWebAssembly: true,
+		};
+		return config;
+	},
 };
 export default nextConfig;

crates/web/frontend/package.json

@@ -24,6 +24,7 @@
     "@radix-ui/react-hover-card": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
@@ -33,6 +34,7 @@
     "@radix-ui/react-toast": "^1.2.2",
     "@radix-ui/react-tooltip": "^1.1.3",
     "@types/js-beautify": "^1.14.3",
+    "@types/uuid": "^10.0.0",
     "@uiw/codemirror-themes": "^4.23.5",
     "@uiw/react-codemirror": "^4.23.5",
     "@wasm-tool/wasm-pack-plugin": "^1.7.0",
@@ -51,9 +53,11 @@
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
+    "uuid": "^10.0.0",
     "vaul": "^1.0.0",
     "vscode-languageserver-protocol": "^3.17.5",
-    "webworker-promise": "^0.5.1"
+    "webworker-promise": "^0.5.1",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@biomejs/biome": "1.9.3",

crates/web/frontend/src/app/layout.tsx

@@ -6,6 +6,7 @@ import type { Metadata } from "next";
 import { Fira_Mono, Montserrat } from "next/font/google";
 import { Toaster } from "sonner";
 import "./globals.css";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const montserrat = Montserrat({ subsets: ["latin"], variable: "--font-sans" });
 const firaCode = Fira_Mono({
@@ -55,7 +56,9 @@ export default function RootLayout({
 					disableTransitionOnChange
 				>
 					<SettingsProvider>
-						<WorkerProvider>{children}</WorkerProvider>
+						<WorkerProvider>
+							<TooltipProvider>{children}</TooltipProvider>
+						</WorkerProvider>
 					</SettingsProvider>
 				</ThemeProvider>
 			</body>

crates/web/frontend/src/app/page-utils.ts

@@ -1,8 +1,9 @@
+import { notify } from "@/lib/notify";
 import type { Completion } from "@/model/completion";
-import type { Data } from "@/model/data";
-import type FileType from "@/model/file-type";
+import { Data } from "@/model/data";
+import FileType from "@/model/file-type";
+import { getShare } from "@/services/shares/share-service";
 import type { CompletionContext, CompletionSource } from "@codemirror/autocomplete";
-import { toast } from "sonner";
 import type PromiseWorker from "webworker-promise";
 
 export const applyGq = async (
@@ -19,7 +20,7 @@ export const applyGq = async (
 		outputType: outputType,
 		indent: indent,
 	});
-	!silent && toast.success(`Query applied to ${inputData.type.toUpperCase()}`);
+	!silent && notify.success(`Query applied to ${inputData.type.toUpperCase()}`);
 	return result;
 };
 
@@ -51,3 +52,21 @@ export const getQueryCompletionSource = (
 		};
 	};
 };
+
+export const importShare = async (
+	shareId: string,
+): Promise<{ input: Data; query: Data; outputType: FileType } | undefined> => {
+	const toastId = notify.loading("Importing share...");
+	try {
+		const share = await getShare(shareId);
+		notify.success("Share successfully imported", { id: toastId });
+		return {
+			input: new Data(share.inputContent, share.inputType),
+			query: new Data(share.queryContent, FileType.GQ),
+			outputType: share.outputType,
+		};
+	} catch (error) {
+		notify.error(`Error importing share: ${error.message}`, { id: toastId });
+		return undefined;
+	}
+};