From 04572a8e5081b1e4871e273cde9dbaaa44c52fe0 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 21:43:44 +0000
Subject: structure: Create apps dir and copy tooling dir from t3-turbo repo

---
 apps/mobile/app/dashboard/(tabs)/_layout.tsx  | 38 +++++++++++++++
 apps/mobile/app/dashboard/(tabs)/index.tsx    | 31 +++++++++++++
 apps/mobile/app/dashboard/(tabs)/lists.tsx    | 67 +++++++++++++++++++++++++++
 apps/mobile/app/dashboard/(tabs)/search.tsx   | 35 ++++++++++++++
 apps/mobile/app/dashboard/(tabs)/settings.tsx | 41 ++++++++++++++++
 5 files changed, 212 insertions(+)
 create mode 100644 apps/mobile/app/dashboard/(tabs)/_layout.tsx
 create mode 100644 apps/mobile/app/dashboard/(tabs)/index.tsx
 create mode 100644 apps/mobile/app/dashboard/(tabs)/lists.tsx
 create mode 100644 apps/mobile/app/dashboard/(tabs)/search.tsx
 create mode 100644 apps/mobile/app/dashboard/(tabs)/settings.tsx

(limited to 'apps/mobile/app/dashboard/(tabs)')

diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
new file mode 100644
index 00000000..5b2d810a
--- /dev/null
+++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx
@@ -0,0 +1,38 @@
+import { Tabs } from "expo-router";
+import { ClipboardList, Home, Search, Settings } from "lucide-react-native";
+import React from "react";
+
+export default function TabLayout() {
+  return (
+    <Tabs screenOptions={{ tabBarActiveTintColor: "blue" }}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color }) => <Home color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="search"
+        options={{
+          title: "Search",
+          tabBarIcon: ({ color }) => <Search color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="lists"
+        options={{
+          title: "Lists",
+          tabBarIcon: ({ color }) => <ClipboardList color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color }) => <Settings color={color} />,
+        }}
+      />
+    </Tabs>
+  );
+}
diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
new file mode 100644
index 00000000..b2349525
--- /dev/null
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -0,0 +1,31 @@
+import { Link, Stack } from "expo-router";
+import { SquarePen, Link as LinkIcon } from "lucide-react-native";
+import { View } from "react-native";
+
+import BookmarkList from "@/components/bookmarks/BookmarkList";
+
+function HeaderRight() {
+  return (
+    <View className="flex flex-row">
+      <Link href="dashboard/add-link" className="mt-2 px-2">
+        <LinkIcon />
+      </Link>
+      <Link href="dashboard/add-note" className="mt-2 px-2">
+        <SquarePen />
+      </Link>
+    </View>
+  );
+}
+
+export default function Home() {
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerRight: () => <HeaderRight />,
+        }}
+      />
+      <BookmarkList archived={false} />
+    </>
+  );
+}
diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx
new file mode 100644
index 00000000..b534ddda
--- /dev/null
+++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx
@@ -0,0 +1,67 @@
+import { Link } from "expo-router";
+import { useEffect, useState } from "react";
+import { FlatList, View } from "react-native";
+
+import { api } from "@/lib/trpc";
+
+export default function Lists() {
+  const [refreshing, setRefreshing] = useState(false);
+  const { data: lists, isPending } = api.lists.list.useQuery();
+  const apiUtils = api.useUtils();
+
+  useEffect(() => {
+    setRefreshing(isPending);
+  }, [isPending]);
+
+  if (!lists) {
+    // Add spinner
+    return <View />;
+  }
+
+  const onRefresh = () => {
+    apiUtils.lists.list.invalidate();
+  };
+
+  const links = [
+    {
+      id: "fav",
+      logo: "⭐️",
+      name: "Favourites",
+      href: "/dashboard/favourites",
+    },
+    {
+      id: "arch",
+      logo: "🗄️",
+      name: "Archive",
+      href: "/dashboard/archive",
+    },
+  ];
+
+  links.push(
+    ...lists.lists.map((l) => ({
+      id: l.id,
+      logo: l.icon,
+      name: l.name,
+      href: `/dashboard/lists/${l.id}`,
+    })),
+  );
+
+  return (
+    <FlatList
+      contentContainerStyle={{
+        gap: 10,
+        marginTop: 10,
+      }}
+      renderItem={(l) => (
+        <View className="mx-2 block rounded-xl border border-gray-100 bg-white px-4 py-2">
+          <Link key={l.item.id} href={l.item.href} className="text-lg">
+            {l.item.logo} {l.item.name}
+          </Link>
+        </View>
+      )}
+      data={links}
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+    />
+  );
+}
diff --git a/apps/mobile/app/dashboard/(tabs)/search.tsx b/apps/mobile/app/dashboard/(tabs)/search.tsx
new file mode 100644
index 00000000..980cab36
--- /dev/null
+++ b/apps/mobile/app/dashboard/(tabs)/search.tsx
@@ -0,0 +1,35 @@
+import { keepPreviousData } from "@tanstack/react-query";
+import { useState } from "react";
+import { View } from "react-native";
+import { useDebounce } from "use-debounce";
+
+import BookmarkList from "@/components/bookmarks/BookmarkList";
+import { Divider } from "@/components/ui/Divider";
+import { Input } from "@/components/ui/Input";
+import { api } from "@/lib/trpc";
+
+export default function Search() {
+  const [search, setSearch] = useState("");
+
+  const [query] = useDebounce(search, 200);
+
+  const { data } = api.bookmarks.searchBookmarks.useQuery(
+    { text: query },
+    { placeholderData: keepPreviousData },
+  );
+
+  return (
+    <View>
+      <Input
+        placeholder="Search"
+        className="mx-4 mt-4 bg-white"
+        value={search}
+        onChangeText={setSearch}
+        autoFocus
+        autoCapitalize="none"
+      />
+      <Divider orientation="horizontal" className="mb-1 mt-4 w-full" />
+      {data && <BookmarkList ids={data.bookmarks.map((b) => b.id)} />}
+    </View>
+  );
+}
diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx
new file mode 100644
index 00000000..9f86d5ec
--- /dev/null
+++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx
@@ -0,0 +1,41 @@
+import { useRouter } from "expo-router";
+import { useEffect } from "react";
+import { Text, View } from "react-native";
+
+import Logo from "@/components/Logo";
+import { Button } from "@/components/ui/Button";
+import { useSession } from "@/lib/session";
+import { api } from "@/lib/trpc";
+
+export default function Dashboard() {
+  const router = useRouter();
+
+  const { isLoggedIn, logout } = useSession();
+
+  useEffect(() => {
+    if (isLoggedIn !== undefined && !isLoggedIn) {
+      router.replace("signin");
+    }
+  }, [isLoggedIn]);
+
+  const { data, error, isLoading } = api.users.whoami.useQuery();
+
+  useEffect(() => {
+    if (error?.data?.code === "UNAUTHORIZED") {
+      logout();
+    }
+  }, [error]);
+
+  return (
+    <View className="flex h-full w-full items-center gap-4 p-4">
+      <Logo />
+      <View className="w-full rounded-lg bg-white px-4 py-2">
+        <Text className="text-lg">
+          {isLoading ? "Loading ..." : data?.email}
+        </Text>
+      </View>
+
+      <Button className="w-full" label="Log Out" onPress={logout} />
+    </View>
+  );
+}
-- 
cgit v1.2.3-70-g09d2