From cb8ba636d14b0e0a3f6c1e4d01438cea91e43a10 Mon Sep 17 00:00:00 2001 From: Daniel Heras Quesada Date: Wed, 28 Aug 2024 20:41:34 +0200 Subject: [PATCH] feat(example): example basic view done and used to fix API hooks --- .../component/__kebabCase_name__/index.ts | 2 +- .../__kebabCase_name__.module.scss | 2 ++ .../__kebabCase_name__.view.tsx | 9 +++++ .../view/__kebabCase_name__/index.ts | 1 + front/src/app/(home)/example/page.tsx | 1 + .../auth/components/log-in/log-in.widget.tsx | 8 +++-- .../user-panel/user-panel.component.tsx | 4 ++- .../navbar-header/navbar-header.component.tsx | 2 +- .../src/modules/common/hooks/api/useQuery.ts | 21 ++++++------ .../example-list/example-list.component.tsx | 34 +++++++++++++++++++ .../example-list/example-list.module.scss | 2 ++ .../example/components/example-list/index.ts | 3 ++ .../example-list/example-list.module.scss | 2 ++ .../views/example-list/example-list.view.tsx | 12 +++++++ .../example/views/example-list/index.ts | 1 + 15 files changed, 88 insertions(+), 16 deletions(-) create mode 100644 front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.module.scss create mode 100644 front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.tsx create mode 100644 front/.blueprints/view/__kebabCase_name__/index.ts create mode 100644 front/src/app/(home)/example/page.tsx create mode 100644 front/src/modules/example/components/example-list/example-list.component.tsx create mode 100644 front/src/modules/example/components/example-list/example-list.module.scss create mode 100644 front/src/modules/example/components/example-list/index.ts create mode 100644 front/src/modules/example/views/example-list/example-list.module.scss create mode 100644 front/src/modules/example/views/example-list/example-list.view.tsx create mode 100644 front/src/modules/example/views/example-list/index.ts diff --git a/front/.blueprints/component/__kebabCase_name__/index.ts b/front/.blueprints/component/__kebabCase_name__/index.ts index 225664d..2b4d789 100644 --- a/front/.blueprints/component/__kebabCase_name__/index.ts +++ b/front/.blueprints/component/__kebabCase_name__/index.ts @@ -1,3 +1,3 @@ "use client" -export { {{pascalCase name}} as default } from "./{{kebabCase name}}.component"; +export { {{pascalCase name}} } from "./{{kebabCase name}}.component"; diff --git a/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.module.scss b/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.module.scss new file mode 100644 index 0000000..4851408 --- /dev/null +++ b/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.module.scss @@ -0,0 +1,2 @@ +.container { +} diff --git a/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.tsx b/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.tsx new file mode 100644 index 0000000..74aad59 --- /dev/null +++ b/front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.view.tsx @@ -0,0 +1,9 @@ +import styles from "./{{kebabCase name}}.module.scss"; + +type {{pascalCase name}}Props = {} + +export const {{pascalCase name}}View:React.FC<{{pascalCase name}}Props> = ({}) => { + return ( +
+ ) +} diff --git a/front/.blueprints/view/__kebabCase_name__/index.ts b/front/.blueprints/view/__kebabCase_name__/index.ts new file mode 100644 index 0000000..3468511 --- /dev/null +++ b/front/.blueprints/view/__kebabCase_name__/index.ts @@ -0,0 +1 @@ +export { {{pascalCase name}}View } from "./{{kebabCase name}}.view"; diff --git a/front/src/app/(home)/example/page.tsx b/front/src/app/(home)/example/page.tsx new file mode 100644 index 0000000..028a934 --- /dev/null +++ b/front/src/app/(home)/example/page.tsx @@ -0,0 +1 @@ +export { ExampleListView as default } from "@/modules/example/views/example-list"; diff --git a/front/src/modules/auth/components/log-in/log-in.widget.tsx b/front/src/modules/auth/components/log-in/log-in.widget.tsx index e9465e2..d1849ff 100644 --- a/front/src/modules/auth/components/log-in/log-in.widget.tsx +++ b/front/src/modules/auth/components/log-in/log-in.widget.tsx @@ -4,15 +4,17 @@ import { FormEvent, useEffect, useState } from "react"; import styles from "./log-in.module.scss"; import { signIn, useSession } from "next-auth/react"; -import { useRouter } from "next/navigation"; +import { useRouter, useSearchParams } from "next/navigation"; type LogInWidgetsProps = { afterSuccess?: Function; }; export const LogInWidget: React.FC = ({ afterSuccess }) => { - const { data } = useSession(); const router = useRouter(); + const searchParams = useSearchParams(); + + const callbackUrl = searchParams.get("callbackUrl"); const [loginStatus, setLoginStatus] = useState< "idle" | "check" | "confirm" | "error" @@ -43,7 +45,7 @@ export const LogInWidget: React.FC = ({ afterSuccess }) => { useEffect(() => { if (loginStatus === "confirm") { - router.push("/"); + router.push(callbackUrl ?? "/"); } }, [loginStatus]); diff --git a/front/src/modules/auth/components/user-panel/user-panel.component.tsx b/front/src/modules/auth/components/user-panel/user-panel.component.tsx index 7f8d06f..23331de 100644 --- a/front/src/modules/auth/components/user-panel/user-panel.component.tsx +++ b/front/src/modules/auth/components/user-panel/user-panel.component.tsx @@ -11,7 +11,9 @@ export function UserPanel() {
  • {session.data?.user?.name}
      • {session.data?.user?.roles.map((role) => ( -
    • {role}
      • +
    • + {role} +
      • ))}
    diff --git a/front/src/modules/common/components/navbar-header/navbar-header.component.tsx b/front/src/modules/common/components/navbar-header/navbar-header.component.tsx index 01440ec..904f712 100644 --- a/front/src/modules/common/components/navbar-header/navbar-header.component.tsx +++ b/front/src/modules/common/components/navbar-header/navbar-header.component.tsx @@ -10,7 +10,7 @@ export const NavbarHeader = (props: PropsWithChildren) => { return (
    - +

    Your brand

    diff --git a/front/src/modules/common/hooks/api/useQuery.ts b/front/src/modules/common/hooks/api/useQuery.ts index 8d89cfe..89b5736 100644 --- a/front/src/modules/common/hooks/api/useQuery.ts +++ b/front/src/modules/common/hooks/api/useQuery.ts @@ -12,7 +12,7 @@ type QueryReturn = { type QueryInput = { url: string; options: RequestInit; - timeout: number; + timeout?: number; }; export function useQuery({ @@ -36,17 +36,18 @@ export function useQuery({ useEffect(() => { setIsLoading(true); setIsError(false); - async () => { - const _response = await timedFetch(url, options, timeout); - if (_response) { - setResponse(_response); + (async () => { + if (session.status !== "loading") { + const _response = await timedFetch(url, options, timeout); + if (_response) { + setResponse(_response); + } else { + setIsError(true); + } setIsLoading(false); - } else { - setIsLoading(false); - setIsError(true); } - }; - }, [url, options, timeout]); + })(); + }, [url, JSON.stringify(options), timeout, session.status]); return { ...response, isLoading, isError }; } diff --git a/front/src/modules/example/components/example-list/example-list.component.tsx b/front/src/modules/example/components/example-list/example-list.component.tsx new file mode 100644 index 0000000..9a2b1c7 --- /dev/null +++ b/front/src/modules/example/components/example-list/example-list.component.tsx @@ -0,0 +1,34 @@ +import { useQuery } from "@/modules/common/hooks/api/useQuery"; +import styles from "./example-list.module.scss"; + +type ExampleListProps = {}; + +type ExampleListType = { + id: number; + name: string; + description: string; + image: string; + created_at: string; +}[]; + +export const ExampleList: React.FC = ({}) => { + const result = useQuery({ + url: "http://localhost:3000/example", + options: { headers: {} }, + timeout: 4000, + }); + + const one = useQuery({ + url: "http://localhost:3000/example/1", + options: { headers: {} }, + timeout: 4000, + }); + + return ( +
    + {JSON.stringify(result.data)} + {one.isError &&

    ERROR

    } +

    ONE{JSON.stringify(one.data)}

    +
    + ); +}; diff --git a/front/src/modules/example/components/example-list/example-list.module.scss b/front/src/modules/example/components/example-list/example-list.module.scss new file mode 100644 index 0000000..4851408 --- /dev/null +++ b/front/src/modules/example/components/example-list/example-list.module.scss @@ -0,0 +1,2 @@ +.container { +} diff --git a/front/src/modules/example/components/example-list/index.ts b/front/src/modules/example/components/example-list/index.ts new file mode 100644 index 0000000..b102a95 --- /dev/null +++ b/front/src/modules/example/components/example-list/index.ts @@ -0,0 +1,3 @@ +"use client" + +export { ExampleList } from "./example-list.component"; diff --git a/front/src/modules/example/views/example-list/example-list.module.scss b/front/src/modules/example/views/example-list/example-list.module.scss new file mode 100644 index 0000000..4851408 --- /dev/null +++ b/front/src/modules/example/views/example-list/example-list.module.scss @@ -0,0 +1,2 @@ +.container { +} diff --git a/front/src/modules/example/views/example-list/example-list.view.tsx b/front/src/modules/example/views/example-list/example-list.view.tsx new file mode 100644 index 0000000..d8ecd11 --- /dev/null +++ b/front/src/modules/example/views/example-list/example-list.view.tsx @@ -0,0 +1,12 @@ +import styles from "./example-list.module.scss"; +import { ExampleList } from "../../components/example-list"; + +type ExampleListProps = {}; + +export const ExampleListView: React.FC = ({}) => { + return ( +
    + +
    + ); +}; diff --git a/front/src/modules/example/views/example-list/index.ts b/front/src/modules/example/views/example-list/index.ts new file mode 100644 index 0000000..e065a66 --- /dev/null +++ b/front/src/modules/example/views/example-list/index.ts @@ -0,0 +1 @@ +export { ExampleListView } from "./example-list.view";