From b728caf73ff85fd7c2b3e763632ea2a925541822 Mon Sep 17 00:00:00 2001 From: Zunw <43964753+ZunwDev@users.noreply.github.com> Date: Thu, 15 Jun 2023 19:27:15 +0200 Subject: [PATCH 1/9] enhancement(frontend) patched all ESLint issues and some changes --- .../src/components/base/base-components.tsx | 26 ++ dashboard/src/components/list/app-create.tsx | 229 ++++++++---------- dashboard/src/components/list/app-list.tsx | 7 +- dashboard/src/components/list/app-search.tsx | 13 +- .../components/navbar/navbar.component.tsx | 60 ++++- .../src/components/navbar/project-select.tsx | 4 +- dashboard/src/pages/profile/[slug]/index.tsx | 2 +- .../[slug]/profile-content.component.tsx | 15 +- .../[slug]/profile-sidebar.component.tsx | 19 +- dashboard/src/shared/routerHandler.tsx | 34 +++ 10 files changed, 243 insertions(+), 166 deletions(-) create mode 100644 dashboard/src/components/base/base-components.tsx create mode 100644 dashboard/src/shared/routerHandler.tsx diff --git a/dashboard/src/components/base/base-components.tsx b/dashboard/src/components/base/base-components.tsx new file mode 100644 index 0000000..518dd8a --- /dev/null +++ b/dashboard/src/components/base/base-components.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +export const ButtonComponent = ({ + className = '', + disabled, + ...props +}: { + className?: string; + disabled?: boolean; +} & React.ButtonHTMLAttributes) => { + const buttonClasses = `rounded-md border-transparent bg-amber-200 px-4 py-2 text-sm font-medium text-amber-900 ${ + !disabled + ? 'hover:bg-amber-400 hover:border-transparent cursor-pointer' + : '!cursor-default opacity-80' + } transition duration-150 ease-in-out ${className}`; + + return ; +}; + +export const RequiredLabel = ({ text }: { text: string }) => { + return ( +

+ {text}: * +

+ ); +}; diff --git a/dashboard/src/components/list/app-create.tsx b/dashboard/src/components/list/app-create.tsx index 9bb7734..ad63d2d 100644 --- a/dashboard/src/components/list/app-create.tsx +++ b/dashboard/src/components/list/app-create.tsx @@ -4,6 +4,8 @@ import { Dialog, Transition, Listbox } from '@headlessui/react'; import { Types } from '~/types/app-types'; import { useSession } from 'next-auth/react'; import { api } from '~/utils/api'; +import { ChevronUpDownIcon } from '@heroicons/react/24/solid'; +import { ButtonComponent, RequiredLabel } from '../base/base-components'; const types = [ { id: 1, type: 'Alpha' }, @@ -49,15 +51,15 @@ const AppCreate = () => { return selectedPlatforms.map((platform) => (
setSelectedPlatform(platform)} @@ -71,14 +73,14 @@ const AppCreate = () => { const OSes: string[] = ['Android', 'Windows']; return OSes.map((os) => ( -
+
{ return (
- + - + -
+
-
-
+
+
- + New project
-
-
-
-

- Project name: - * -

+
+
+
+
-
-

Icon:

-
- +
+ Icon: +
+
-
+
Description:
-
-
-

- Release type: - * -

+
+
+ {selectedType && selectedType.type != 'Custom' && ( - - + + {selectedType.type} - - unfold_more + + - + {types.map((type, typeID) => ( { : type.type} {selected ? ( - + ) : null} @@ -313,18 +301,18 @@ const AppCreate = () => { )} {selectedType && selectedType.type == 'Custom' && (
-
-

- OS: * -

-
{renderOSes}
+
+ +
{renderOSes}
-
-

- Platform: * -

-
+
+ +
{renderPlatform}
-
- +
+ Create
diff --git a/dashboard/src/components/list/app-list.tsx b/dashboard/src/components/list/app-list.tsx index 98aa3bc..3fec4a4 100644 --- a/dashboard/src/components/list/app-list.tsx +++ b/dashboard/src/components/list/app-list.tsx @@ -3,16 +3,16 @@ import { Badge, Button, Card, List, ListItem } from '@tremor/react'; import { useSession } from 'next-auth/react'; import { api } from '~/utils/api'; import { Types } from '~/types/app-types'; -import { useRouter } from 'next/router'; +import RouterHandler from '~/shared/routerHandler'; export default function AppList() { + const { handleRouterPush } = RouterHandler(); const { data: sessionData } = useSession(); const { data: data } = api.apps.list.useQuery( { pageSize: 25 }, // no input { enabled: sessionData?.user !== undefined } ); const apps = data ?? []; - const router = useRouter(); return ( @@ -26,10 +26,11 @@ export default function AppList() { router.push(`/app/${app.id}`)} + onClick={() => handleRouterPush(`/app/${app.id}`)} > preview-img
diff --git a/dashboard/src/components/list/app-search.tsx b/dashboard/src/components/list/app-search.tsx index f2a9873..ce18eb7 100644 --- a/dashboard/src/components/list/app-search.tsx +++ b/dashboard/src/components/list/app-search.tsx @@ -2,13 +2,16 @@ import { usePathname, useRouter } from 'next/navigation'; import React, { useState, useTransition } from 'react'; import { Flex, TextInput } from '@tremor/react'; import AppCreate from '~/components/list/app-create'; +import RouterHandler from '~/shared/routerHandler'; export default function Search({ disabled }: { disabled?: boolean }) { const [isPending, startTransition] = useTransition(); - let [isOpen, setIsOpen] = useState(false); + //let [isOpen, setIsOpen] = useState(false); - const { replace } = useRouter(); + //const { replace } = useRouter(); + //const router = useRouter(); const pathname = usePathname(); + const { handleRouterReplace } = RouterHandler(); function handleSearch(term: string) { const params = new URLSearchParams(window.location.search); if (term) { @@ -18,17 +21,17 @@ export default function Search({ disabled }: { disabled?: boolean }) { } startTransition(() => { - replace(`${pathname}?${params.toString()}`); + handleRouterReplace(`${pathname}?${params.toString()}`); }); } - function closeModal() { + /* function closeModal() { setIsOpen(false); } function openModal() { setIsOpen(true); - } + } */ return ( diff --git a/dashboard/src/components/navbar/navbar.component.tsx b/dashboard/src/components/navbar/navbar.component.tsx index 1fb17bf..dbc5ae8 100644 --- a/dashboard/src/components/navbar/navbar.component.tsx +++ b/dashboard/src/components/navbar/navbar.component.tsx @@ -3,18 +3,50 @@ import { usePathname } from 'next/navigation'; import { Disclosure, Listbox, Menu, Transition } from '@headlessui/react'; import { signIn, signOut, useSession } from 'next-auth/react'; import Image from 'next/image'; -import { useRouter } from 'next/router'; import ProjectSelect from '~/components/navbar/project-select'; +import RouterHandler from '~/shared/routerHandler'; function classNames(...classes: string[]) { return classes.filter(Boolean).join(' '); } -export default function Navbar() { - const session = useSession(); - const router = useRouter(); +interface NavbarProps { + user: + | { + id: string; + name?: string | null | undefined; + email?: string | null | undefined; + image?: string | null | undefined; + } + | undefined; +} + +export default function Navbar({ user }: NavbarProps) { + const { handleRouterPush } = RouterHandler(); + //const session = useSession(); + //const router = useRouter(); + + //const user = session?.data?.user; + + const handleSignOut = () => { + signOut() + .then(() => { + // Handle successful sign-out if needed + }) + .catch((error) => { + console.log(error); // Handle sign-out error if needed + }); + }; - const user = session?.data?.user; + const handleSignIn = (app: string) => { + signIn(app) + .then(() => { + // Handle successful sign-out if needed + }) + .catch((error) => { + console.log(error); // Handle sign-out error if needed + }); + }; return ( @@ -23,7 +55,7 @@ export default function Navbar() {
router.push('/')} + onClick={() => handleRouterPush('/')} > router.push('/profile/' + user?.id)} + onClick={() => + handleRouterPush('/profile/' + user?.id) + } > Profile @@ -92,7 +126,7 @@ export default function Navbar() { active ? 'bg-gray-100' : '', 'flex w-full px-4 py-2 text-sm text-gray-700' )} - onClick={() => signOut()} + onClick={() => handleSignOut} > Sign out @@ -107,7 +141,7 @@ export default function Navbar() { active ? 'bg-gray-100' : '', 'flex w-full px-4 py-2 text-sm text-gray-700' )} - onClick={() => signIn('github')} + onClick={() => handleSignIn('github')} > Sign in @@ -135,10 +169,10 @@ export default function Navbar() {
{`${user.name}
@@ -152,7 +186,7 @@ export default function Navbar() {
+ >Save changes
); }; diff --git a/dashboard/src/pages/profile/[slug]/profile-sidebar.component.tsx b/dashboard/src/pages/profile/[slug]/profile-sidebar.component.tsx index 8fb78ef..02363f1 100644 --- a/dashboard/src/pages/profile/[slug]/profile-sidebar.component.tsx +++ b/dashboard/src/pages/profile/[slug]/profile-sidebar.component.tsx @@ -1,19 +1,21 @@ import React from 'react'; -import { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/24/solid'; +import { LockClosedIcon, UserIcon } from '@heroicons/react/24/outline'; export default function ProfileSidebar() { const renderTab = () => { const tabs = ['My details', 'Security']; const icons = [ - `