From 04572a8e5081b1e4871e273cde9dbaaa44c52fe0 Mon Sep 17 00:00:00 2001 From: MohamedBassem Date: Wed, 13 Mar 2024 21:43:44 +0000 Subject: structure: Create apps dir and copy tooling dir from t3-turbo repo --- .../browser-extension/src/BookmarkDeletedPage.tsx | 3 - .../browser-extension/src/BookmarkSavedPage.tsx | 62 --------------- packages/browser-extension/src/Layout.tsx | 51 ------------- packages/browser-extension/src/Logo.tsx | 10 --- .../browser-extension/src/NotConfiguredPage.tsx | 47 ------------ packages/browser-extension/src/OptionsPage.tsx | 60 --------------- packages/browser-extension/src/SavePage.tsx | 60 --------------- packages/browser-extension/src/SignInPage.tsx | 89 ---------------------- packages/browser-extension/src/Spinner.tsx | 18 ----- packages/browser-extension/src/assets/react.svg | 1 - packages/browser-extension/src/index.css | 72 ----------------- packages/browser-extension/src/main.tsx | 40 ---------- packages/browser-extension/src/utils/providers.tsx | 46 ----------- packages/browser-extension/src/utils/settings.ts | 22 ------ packages/browser-extension/src/utils/trpc.ts | 4 - packages/browser-extension/src/vite-env.d.ts | 1 - 16 files changed, 586 deletions(-) delete mode 100644 packages/browser-extension/src/BookmarkDeletedPage.tsx delete mode 100644 packages/browser-extension/src/BookmarkSavedPage.tsx delete mode 100644 packages/browser-extension/src/Layout.tsx delete mode 100644 packages/browser-extension/src/Logo.tsx delete mode 100644 packages/browser-extension/src/NotConfiguredPage.tsx delete mode 100644 packages/browser-extension/src/OptionsPage.tsx delete mode 100644 packages/browser-extension/src/SavePage.tsx delete mode 100644 packages/browser-extension/src/SignInPage.tsx delete mode 100644 packages/browser-extension/src/Spinner.tsx delete mode 100644 packages/browser-extension/src/assets/react.svg delete mode 100644 packages/browser-extension/src/index.css delete mode 100644 packages/browser-extension/src/main.tsx delete mode 100644 packages/browser-extension/src/utils/providers.tsx delete mode 100644 packages/browser-extension/src/utils/settings.ts delete mode 100644 packages/browser-extension/src/utils/trpc.ts delete mode 100644 packages/browser-extension/src/vite-env.d.ts (limited to 'packages/browser-extension/src') diff --git a/packages/browser-extension/src/BookmarkDeletedPage.tsx b/packages/browser-extension/src/BookmarkDeletedPage.tsx deleted file mode 100644 index 23e1d9da..00000000 --- a/packages/browser-extension/src/BookmarkDeletedPage.tsx +++ /dev/null @@ -1,3 +0,0 @@ -export default function BookmarkDeletedPage() { - return

Bookmark Deleted!

; -} diff --git a/packages/browser-extension/src/BookmarkSavedPage.tsx b/packages/browser-extension/src/BookmarkSavedPage.tsx deleted file mode 100644 index f25a83ba..00000000 --- a/packages/browser-extension/src/BookmarkSavedPage.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Link, useNavigate, useParams } from "react-router-dom"; -import { api } from "./utils/trpc"; -import usePluginSettings from "./utils/settings"; -import { ArrowUpRightFromSquare, Trash } from "lucide-react"; -import Spinner from "./Spinner"; -import { useState } from "react"; - -export default function BookmarkSavedPage() { - const { bookmarkId } = useParams(); - const navigate = useNavigate(); - const [error, setError] = useState(""); - - const { mutate: deleteBookmark, isPending } = - api.bookmarks.deleteBookmark.useMutation({ - onSuccess: () => { - navigate("/bookmarkdeleted"); - }, - onError: (e) => { - setError(e.message); - }, - }); - - const { settings } = usePluginSettings(); - - if (!bookmarkId) { - return
NOT FOUND
; - } - - return ( -
- {error &&

{error}

} -
-

Bookmarked!

-
- - -

Open

- - -
-
-
- ); -} diff --git a/packages/browser-extension/src/Layout.tsx b/packages/browser-extension/src/Layout.tsx deleted file mode 100644 index f8279a18..00000000 --- a/packages/browser-extension/src/Layout.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import { Outlet } from "react-router-dom"; -import { Home, RefreshCw, Settings, X } from "lucide-react"; -import { useNavigate } from "react-router-dom"; -import usePluginSettings from "./utils/settings"; - -export default function Layout() { - const navigate = useNavigate(); - const { settings, isPending: isInit } = usePluginSettings(); - if (!isInit) { - return
Loading ...
; - } - - if (!settings.apiKey || !settings.address) { - navigate("/notconfigured"); - return; - } - - return ( -
-
- -
-
-
-
- - - Bookmarks - -
-
- {process.env.NODE_ENV == "development" && ( - - )} - - -
-
-
- ); -} diff --git a/packages/browser-extension/src/Logo.tsx b/packages/browser-extension/src/Logo.tsx deleted file mode 100644 index 6b29e68c..00000000 --- a/packages/browser-extension/src/Logo.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { PackageOpen } from "lucide-react"; - -export default function Logo() { - return ( - - -

Hoarder

- - ); -} diff --git a/packages/browser-extension/src/NotConfiguredPage.tsx b/packages/browser-extension/src/NotConfiguredPage.tsx deleted file mode 100644 index fc5c8f47..00000000 --- a/packages/browser-extension/src/NotConfiguredPage.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import { useEffect, useState } from "react"; -import { useNavigate } from "react-router-dom"; -import usePluginSettings from "./utils/settings"; -import Logo from "./Logo"; - -export default function NotConfiguredPage() { - const navigate = useNavigate(); - - const { settings, setSettings } = usePluginSettings(); - - const [error, setError] = useState(""); - const [serverAddress, setServerAddress] = useState(settings.address); - useEffect(() => { - setServerAddress(settings.address); - }, [settings.address]); - - const onSave = () => { - if (serverAddress == "") { - setError("Server address is required"); - return; - } - setSettings((s) => ({ ...s, address: serverAddress })); - navigate("/signin"); - }; - - return ( -
- - - To use the plugin, you need to configure it first. - -

{error}

-
- - setServerAddress(e.target.value)} - /> -
- -
- ); -} diff --git a/packages/browser-extension/src/OptionsPage.tsx b/packages/browser-extension/src/OptionsPage.tsx deleted file mode 100644 index 6407b3cc..00000000 --- a/packages/browser-extension/src/OptionsPage.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useEffect } from "react"; -import usePluginSettings from "./utils/settings"; -import { api } from "./utils/trpc"; -import Spinner from "./Spinner"; -import { useNavigate } from "react-router-dom"; -import Logo from "./Logo"; - -export default function OptionsPage() { - const navigate = useNavigate(); - const { settings, setSettings } = usePluginSettings(); - - const { data: whoami, error: whoAmIError } = api.users.whoami.useQuery( - undefined, - { - enabled: settings.address != "", - }, - ); - - const invalidateWhoami = api.useUtils().users.whoami.refetch; - - useEffect(() => { - invalidateWhoami(); - }, [settings, invalidateWhoami]); - - let loggedInMessage: React.ReactNode; - if (whoAmIError) { - if (whoAmIError.data?.code == "UNAUTHORIZED") { - loggedInMessage = Not logged in; - } else { - loggedInMessage = ( - Something went wrong: {whoAmIError.message} - ); - } - } else if (whoami) { - loggedInMessage = {whoami.email}; - } else { - loggedInMessage = ; - } - - const onLogout = () => { - setSettings((s) => ({ ...s, apiKey: "" })); - invalidateWhoami(); - navigate("/notconfigured"); - }; - - return ( -
- - Settings -
-
- Logged in as: - {loggedInMessage} -
- -
- ); -} diff --git a/packages/browser-extension/src/SavePage.tsx b/packages/browser-extension/src/SavePage.tsx deleted file mode 100644 index 638af149..00000000 --- a/packages/browser-extension/src/SavePage.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import { useEffect, useState } from "react"; -import Spinner from "./Spinner"; -import { api } from "./utils/trpc"; -import { Navigate } from "react-router-dom"; - -export default function SavePage() { - const [error, setError] = useState(undefined); - - const { - data, - mutate: createBookmark, - status, - } = api.bookmarks.createBookmark.useMutation({ - onError: (e) => { - setError("Something went wrong: " + e.message); - }, - }); - - useEffect(() => { - async function runSave() { - let currentUrl; - const [currentTab] = await chrome.tabs.query({ - active: true, - lastFocusedWindow: true, - }); - if (currentTab?.url) { - currentUrl = currentTab.url; - } else { - setError("Couldn't find the URL of the current tab"); - return; - } - - createBookmark({ - type: "link", - url: currentUrl, - }); - } - runSave(); - }, [createBookmark]); - - switch (status) { - case "error": { - return
{error}
; - } - case "success": { - return ; - } - case "pending": { - return ( -
- Saving Bookmark - -
- ); - } - case "idle": { - return
; - } - } -} diff --git a/packages/browser-extension/src/SignInPage.tsx b/packages/browser-extension/src/SignInPage.tsx deleted file mode 100644 index 6db7c348..00000000 --- a/packages/browser-extension/src/SignInPage.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { useState } from "react"; -import { api } from "./utils/trpc"; -import usePluginSettings from "./utils/settings"; -import { useNavigate } from "react-router-dom"; -import Logo from "./Logo"; - -export default function SignInPage() { - const navigate = useNavigate(); - const { setSettings } = usePluginSettings(); - - const { - mutate: login, - error, - isPending, - } = api.apiKeys.exchange.useMutation({ - onSuccess: (resp) => { - setSettings((s) => ({ ...s, apiKey: resp.key })); - navigate("/options"); - }, - onError: () => {}, - }); - - const [formData, setFormData] = useState<{ - email: string; - password: string; - }>({ - email: "", - password: "", - }); - - const onSubmit = (e: React.FormEvent) => { - e.preventDefault(); - const randStr = (Math.random() + 1).toString(36).substring(5); - login({ ...formData, keyName: `Browser extension: (${randStr})` }); - }; - - let errorMessage = ""; - if (error) { - if (error.data?.code == "UNAUTHORIZED") { - errorMessage = "Wrong username or password"; - } else { - errorMessage = error.message; - } - } - - return ( -
- -

Login

-

{errorMessage}

-
-
- - - setFormData((f) => ({ ...f, email: e.target.value })) - } - type="text" - name="email" - className="h-8 flex-1 rounded-lg border border-gray-300 p-2" - /> -
-
- - - setFormData((f) => ({ - ...f, - password: e.target.value, - })) - } - type="password" - name="password" - className="h-8 flex-1 rounded-lg border border-gray-300 p-2" - /> -
- -
-
- ); -} diff --git a/packages/browser-extension/src/Spinner.tsx b/packages/browser-extension/src/Spinner.tsx deleted file mode 100644 index 9fd8839b..00000000 --- a/packages/browser-extension/src/Spinner.tsx +++ /dev/null @@ -1,18 +0,0 @@ -export default function Spinner() { - return ( - - - - ); -} diff --git a/packages/browser-extension/src/assets/react.svg b/packages/browser-extension/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/packages/browser-extension/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/packages/browser-extension/src/index.css b/packages/browser-extension/src/index.css deleted file mode 100644 index e7d4bb2f..00000000 --- a/packages/browser-extension/src/index.css +++ /dev/null @@ -1,72 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -:root { - font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; - line-height: 1.5; - font-weight: 400; - - color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} -a:hover { - color: #535bf2; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - a:hover { - color: #747bff; - } - button { - background-color: #f9f9f9; - } -} diff --git a/packages/browser-extension/src/main.tsx b/packages/browser-extension/src/main.tsx deleted file mode 100644 index 085a5a69..00000000 --- a/packages/browser-extension/src/main.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import ReactDOM from "react-dom/client"; -import "./index.css"; -import OptionsPage from "./OptionsPage.tsx"; -import NotConfiguredPage from "./NotConfiguredPage.tsx"; -import { Providers } from "./utils/providers.tsx"; -import BookmarkSavedPage from "./BookmarkSavedPage.tsx"; -import { HashRouter, Routes, Route } from "react-router-dom"; -import Layout from "./Layout.tsx"; -import SavePage from "./SavePage.tsx"; -import BookmarkDeletedPage from "./BookmarkDeletedPage.tsx"; -import SignInPage from "./SignInPage.tsx"; - -function App() { - return ( -
- - - - }> - } /> - } - /> - } - /> - - } /> - } /> - } /> - - - -
- ); -} - -ReactDOM.createRoot(document.getElementById("root")!).render(); diff --git a/packages/browser-extension/src/utils/providers.tsx b/packages/browser-extension/src/utils/providers.tsx deleted file mode 100644 index d20f2512..00000000 --- a/packages/browser-extension/src/utils/providers.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { httpBatchLink } from "@trpc/client"; -import { useEffect, useState } from "react"; -import { api } from "./trpc"; -import usePluginSettings, { getPluginSettings } from "./settings"; -import superjson from "superjson"; - -function getTRPCClient(address: string) { - return api.createClient({ - links: [ - httpBatchLink({ - url: `${address}/api/trpc`, - async headers() { - const settings = await getPluginSettings(); - return { - Authorization: `Bearer ${settings.apiKey}`, - }; - }, - transformer: superjson, - }), - ], - }); -} - -export function Providers({ children }: { children: React.ReactNode }) { - const { settings } = usePluginSettings(); - const [queryClient] = useState(() => new QueryClient()); - - const [trpcClient, setTrpcClient] = useState< - ReturnType - >(getTRPCClient(settings.address)); - - useEffect(() => { - setTrpcClient(getTRPCClient(settings.address)); - }, [settings.address]); - - return ( - - {children} - - ); -} diff --git a/packages/browser-extension/src/utils/settings.ts b/packages/browser-extension/src/utils/settings.ts deleted file mode 100644 index 37f474c0..00000000 --- a/packages/browser-extension/src/utils/settings.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { useChromeStorageSync } from "use-chrome-storage"; - -export type Settings = { - apiKey: string; - address: string; -}; - -export default function usePluginSettings() { - const [settings, setSettings, _1, _2, isInit] = useChromeStorageSync( - "settings", - { - apiKey: "", - address: "", - } as Settings, - ); - - return { settings, setSettings, isPending: isInit }; -} - -export async function getPluginSettings() { - return (await chrome.storage.sync.get("settings")).settings as Settings; -} diff --git a/packages/browser-extension/src/utils/trpc.ts b/packages/browser-extension/src/utils/trpc.ts deleted file mode 100644 index da21a55a..00000000 --- a/packages/browser-extension/src/utils/trpc.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { createTRPCReact } from "@trpc/react-query"; -import type { AppRouter } from "@hoarder/trpc/routers/_app"; - -export const api = createTRPCReact(); diff --git a/packages/browser-extension/src/vite-env.d.ts b/packages/browser-extension/src/vite-env.d.ts deleted file mode 100644 index 11f02fe2..00000000 --- a/packages/browser-extension/src/vite-env.d.ts +++ /dev/null @@ -1 +0,0 @@ -/// -- cgit v1.2.3-70-g09d2