From 2dc1997f41f95da3cc9db64397e44f37e28e5264 Mon Sep 17 00:00:00 2001 From: Abdfnx Mhd Date: Wed, 22 Nov 2023 08:31:54 +0000 Subject: [PATCH] =?UTF-8?q?botway(core):=20start=20implementing=20modes=20?= =?UTF-8?q?=F0=9F=96=A5=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/app/account/page.tsx | 682 +++++++++++++++---------------- core/app/layout.tsx | 1 - core/app/page.tsx | 8 +- core/components/Layout/index.tsx | 57 ++- core/tools/qc.ts | 3 + 5 files changed, 398 insertions(+), 353 deletions(-) create mode 100644 core/tools/qc.ts diff --git a/core/app/account/page.tsx b/core/app/account/page.tsx index 72d090c0..17db1a68 100644 --- a/core/app/account/page.tsx +++ b/core/app/account/page.tsx @@ -13,13 +13,9 @@ import clsx from "clsx"; import { EncryptJWT } from "jose"; import { BW_SECRET_KEY } from "@/tools/tokens"; import { Dialog, Transition } from "@headlessui/react"; -import { - CheckIcon, - MarkGithubIcon, - PencilIcon, - XCircleIcon, -} from "@primer/octicons-react"; +import { QueryClientProvider } from "@tanstack/react-query"; import { Fragment, useState } from "react"; +import { queryClient } from "@/tools/qc"; export const revalidate = 0; @@ -135,374 +131,376 @@ const Settings = () => { if (user) { return ( - -
-
-
-
-

Settings

+ + +
+
+
+
+

Settings

+
-
-
-
- - {({ values }) => ( -
-
-
-
-
- -
+
+
+ + {({ values }) => ( + +
+
+
+
+ +
-
-
- +
+
+ +
-
-
-
- -
+
+
+ +
-
-
- +
+
+ +
-
-
- -
-
-
- +
+ +
+
+
+ +
-
- - )} - + + )} + +
-
- - {/*
-
-
- - - - - - - - - - + + +
- Platform - - Token Status - -
-
- -

- GitHub API Token -

+ {/*
+
+
+ + + + + + + + + + - +

+ GitHub API Token +

+ + - - - - - -

- Zeabur API Token -

+ + + + + - +

+ Zeabur API Token +

+ + - + + - - -
+ Platform + + Token Status + +
+
+ -
- {user.user_metadata["githubApiToken"].length != 0 ? ( - <> - - - - Thank you for adding this token - - - ) : ( - <> - - - - You need to add this token - - - )} - - -
-
- +
+ {user.user_metadata["githubApiToken"].length != 0 ? ( + <> + + + + Thank you for adding this token + + + ) : ( + <> + + + + You need to add this token + + + )} + + +
+
+ -
- {user.user_metadata["zeaburApiToken"].length != 0 ? ( - <> - - - - Thank you for adding this token - - - ) : ( - <> - - - - You need to add this token - - - )} - + {user.user_metadata["zeaburApiToken"].length != 0 ? ( + <> + + + + Thank you for adding this token + + + ) : ( + <> + + + + You need to add this token + + + )} + + -
-
+ + +
-
*/} +
+
*/} +
-
- - - - -
- - -
-
- - - - Edit GitHub API Token - -
- + + +
+ + +
+
+ + + - {({ errors }) => ( -
- + Edit GitHub API Token + +
+ + {({ errors }) => ( + + - {errors.githubApiToken ? ( -
- {errors.githubApiToken} -
- ) : null} - - )} - -
-
- + {errors.githubApiToken ? ( +
+ {errors.githubApiToken} +
+ ) : null} + + )} + +
+ + +
-
-
- - - - - -
- - -
-
- - - - Edit Zeabur API Token - - -
- + + + + + +
+ + +
+
+ + + - {({ errors }) => ( -
- + Edit Zeabur API Token + + +
+ + {({ errors }) => ( + + - {errors.zeaburApiToken ? ( -
- {errors.zeaburApiToken} -
- ) : null} - - )} - -
-
- + {errors.zeaburApiToken ? ( +
+ {errors.zeaburApiToken} +
+ ) : null} + + )} + +
+ + +
-
-
- - + + + + ); } diff --git a/core/app/layout.tsx b/core/app/layout.tsx index a6885198..ba5c4d5c 100644 --- a/core/app/layout.tsx +++ b/core/app/layout.tsx @@ -1,4 +1,3 @@ -import React from "react"; import Head from "./head"; import createClient from "@/supabase/server"; import { AuthProvider } from "@/supabase/auth/provider"; diff --git a/core/app/page.tsx b/core/app/page.tsx index f8a8410f..a5b8f857 100644 --- a/core/app/page.tsx +++ b/core/app/page.tsx @@ -3,7 +3,7 @@ import Auth from "@/supabase/auth/container"; import { useAuth, VIEWS } from "@/supabase/auth/provider"; import { LoadingDots } from "@/components/LoadingDots"; -import { DashLayout } from "@/components/Layout"; +import { DashLayout, mode } from "@/components/Layout"; import { UserAvatar } from "@/components/UserAvatar"; import { CheckIcon, @@ -30,18 +30,16 @@ import clsx from "clsx"; import * as Yup from "yup"; import { useQuery, - QueryClient, QueryClientProvider, } from "@tanstack/react-query"; import { fetcher } from "@/tools/fetch"; import { Button } from "@/components/Button"; import { capitalizeFirstLetter } from "@/tools/text"; import { Badge } from "@tremor/react"; +import { queryClient } from "@/tools/qc"; export const revalidate = 0; -const queryClient = new QueryClient(); - const AddNewProjectSchema = Yup.object().shape({ name: Yup.string().min(3), }); @@ -190,7 +188,7 @@ const Home = ({ user }: any) => { {user.user_metadata["name"]} - X Mode + {mode()} Mode
diff --git a/core/components/Layout/index.tsx b/core/components/Layout/index.tsx index 18ce6beb..292de5ef 100644 --- a/core/components/Layout/index.tsx +++ b/core/components/Layout/index.tsx @@ -1,3 +1,5 @@ +"use client"; + import { ArrowUpRightIcon, CheckIcon, @@ -21,6 +23,29 @@ import { UserAvatar } from "../UserAvatar"; import { Dialog, Transition } from "@headlessui/react"; import { Fragment, useState } from "react"; import { Content, Portal, Root, Trigger } from "@radix-ui/react-popover"; +import { useQuery } from "@tanstack/react-query"; + +// do not cache this layout +export const revalidate = 0; + +export const mode = () => { + const fetchMode = async () => { + if (!localStorage.getItem("mode")) localStorage.setItem("mode", "Visual"); + + return localStorage.getItem("mode"); + }; + + const { data } = useQuery({ + queryKey: ["mode"], + queryFn: fetchMode, + refetchInterval: 1, + refetchOnReconnect: true, + refetchOnWindowFocus: true, + refetchIntervalInBackground: true, + }); + + return data; +}; export const DashLayout = ({ children, user, href }: any) => { const [open, setOpen] = useState(false); @@ -424,7 +449,7 @@ export const DashLayout = ({ children, user, href }: any) => {

- X Mode + {mode()} Mode

@@ -481,7 +506,12 @@ export const DashLayout = ({ children, user, href }: any) => {
-
+
+ localStorage.setItem("mode", "Visual") + } + > { Visual Mode

- {/* */} + /> + ) : ( + <> + )}
-
+
+ localStorage.setItem("mode", "Dev") + } + > { Dev Mode

+ {mode() === "Dev" ? ( + + ) : ( + <> + )}
diff --git a/core/tools/qc.ts b/core/tools/qc.ts new file mode 100644 index 00000000..6c7b9ded --- /dev/null +++ b/core/tools/qc.ts @@ -0,0 +1,3 @@ +import { QueryClient } from "@tanstack/react-query"; + +export const queryClient = new QueryClient();