From 4f17ea61cbb11a72712a1ea8c98904a1cc513e41 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 14 Apr 2024 00:51:56 +0300
Subject: feature(web): Allow changing the bookmark grid layout (#98)

---
 apps/web/lib/userLocalSettings/bookmarksLayout.tsx | 37 ++++++++++++++++++++++
 apps/web/lib/userLocalSettings/types.ts            | 24 ++++++++++++++
 .../web/lib/userLocalSettings/userLocalSettings.ts | 18 +++++++++++
 3 files changed, 79 insertions(+)
 create mode 100644 apps/web/lib/userLocalSettings/bookmarksLayout.tsx
 create mode 100644 apps/web/lib/userLocalSettings/types.ts
 create mode 100644 apps/web/lib/userLocalSettings/userLocalSettings.ts

(limited to 'apps/web/lib/userLocalSettings')

diff --git a/apps/web/lib/userLocalSettings/bookmarksLayout.tsx b/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
new file mode 100644
index 00000000..424046b9
--- /dev/null
+++ b/apps/web/lib/userLocalSettings/bookmarksLayout.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import type { z } from "zod";
+import { createContext, useContext } from "react";
+
+import type { BookmarksLayoutTypes, zUserLocalSettings } from "./types";
+
+const defaultLayout: BookmarksLayoutTypes = "masonry";
+
+export const UserLocalSettingsCtx = createContext<
+  z.infer<typeof zUserLocalSettings>
+>({
+  bookmarkGridLayout: defaultLayout,
+});
+
+function useUserLocalSettings() {
+  return useContext(UserLocalSettingsCtx);
+}
+
+export function useBookmarkLayout() {
+  const settings = useUserLocalSettings();
+  return settings.bookmarkGridLayout;
+}
+
+export function bookmarkLayoutSwitch<T>(
+  layout: BookmarksLayoutTypes,
+  data: Record<BookmarksLayoutTypes, T>,
+) {
+  return data[layout];
+}
+
+export function useBookmarkLayoutSwitch<T>(
+  data: Record<BookmarksLayoutTypes, T>,
+) {
+  const layout = useBookmarkLayout();
+  return data[layout];
+}
diff --git a/apps/web/lib/userLocalSettings/types.ts b/apps/web/lib/userLocalSettings/types.ts
new file mode 100644
index 00000000..155469f5
--- /dev/null
+++ b/apps/web/lib/userLocalSettings/types.ts
@@ -0,0 +1,24 @@
+import { z } from "zod";
+
+export const USER_LOCAL_SETTINGS_COOKIE_NAME = "hoarder-user-local-settings";
+
+const zBookmarkGridLayout = z.enum(["grid", "list", "masonry"]);
+export type BookmarksLayoutTypes = z.infer<typeof zBookmarkGridLayout>;
+
+export const zUserLocalSettings = z.object({
+  bookmarkGridLayout: zBookmarkGridLayout.optional().default("masonry"),
+});
+
+export type UserLocalSettings = z.infer<typeof zUserLocalSettings>;
+
+export function parseUserLocalSettings(str: string | undefined) {
+  try {
+    return zUserLocalSettings.parse(JSON.parse(str ?? "{}"));
+  } catch (e) {
+    return undefined;
+  }
+}
+
+export function defaultUserLocalSettings() {
+  return zUserLocalSettings.parse({});
+}
diff --git a/apps/web/lib/userLocalSettings/userLocalSettings.ts b/apps/web/lib/userLocalSettings/userLocalSettings.ts
new file mode 100644
index 00000000..8b39d0d6
--- /dev/null
+++ b/apps/web/lib/userLocalSettings/userLocalSettings.ts
@@ -0,0 +1,18 @@
+"use server";
+
+import { cookies } from "next/headers";
+
+import type { BookmarksLayoutTypes } from "./types";
+import {
+  parseUserLocalSettings,
+  USER_LOCAL_SETTINGS_COOKIE_NAME,
+} from "./types";
+
+export async function updateBookmarksLayout(layout: BookmarksLayoutTypes) {
+  const userSettings = cookies().get(USER_LOCAL_SETTINGS_COOKIE_NAME);
+  const parsed = parseUserLocalSettings(userSettings?.value);
+  cookies().set(
+    USER_LOCAL_SETTINGS_COOKIE_NAME,
+    JSON.stringify({ ...parsed, bookmarkGridLayout: layout }),
+  );
+}
-- 
cgit v1.2.3-70-g09d2