feat(example): example basic view done and used to fix API hooks

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";

front/.blueprints/view/__kebabCase_name__/__kebabCase_name__.module.scss

@@ -0,0 +1,2 @@
+.container {
+}

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 (
+    <div data-testid="{{{kebabCase name}}-view}" className={styles.container}></div>
+  )
+}

front/.blueprints/view/__kebabCase_name__/index.ts

@@ -0,0 +1 @@
+export { {{pascalCase name}}View } from "./{{kebabCase name}}.view";

front/src/app/(home)/example/page.tsx

@@ -0,0 +1 @@
+export { ExampleListView as default } from "@/modules/example/views/example-list";

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<LogInWidgetsProps> = ({ 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<LogInWidgetsProps> = ({ afterSuccess }) => {
 
   useEffect(() => {
     if (loginStatus === "confirm") {
-      router.push("/");
+      router.push(callbackUrl ?? "/");
     }
   }, [loginStatus]);
 

front/src/modules/auth/components/user-panel/user-panel.component.tsx

@@ -11,7 +11,9 @@ export function UserPanel() {
       <li className={styles["user__name"]}>{session.data?.user?.name}</li>
       <ul className={styles["user__roles"]}>
         {session.data?.user?.roles.map((role) => (
-          <li className={styles["role__chip"]}>{role}</li>
+          <li key={role} className={styles["role__chip"]}>
+            {role}
+          </li>
         ))}
       </ul>
       <ThemeSwitcher />

front/src/modules/common/components/navbar-header/navbar-header.component.tsx

@@ -10,7 +10,7 @@ export const NavbarHeader = (props: PropsWithChildren) => {
   return (
     <header className={styles.header}>
       <Link href={"/"} className={styles.logo}>
-        <img src="main-logo.svg" />
+        <img src="/main-logo.svg" />
         <h1>Your brand</h1>
       </Link>
       <nav>{props.children}</nav>

front/src/modules/common/hooks/api/useQuery.ts

@@ -12,7 +12,7 @@ type QueryReturn<T> = {
 type QueryInput = {
   url: string;
   options: RequestInit;
-  timeout: number;
+  timeout?: number;
 };
 
 export function useQuery<DataType>({
@@ -36,17 +36,18 @@ export function useQuery<DataType>({
   useEffect(() => {
     setIsLoading(true);
     setIsError(false);
-    async () => {
-      const _response = await timedFetch<DataType>(url, options, timeout);
-      if (_response) {
-        setResponse(_response);
+    (async () => {
+      if (session.status !== "loading") {
+        const _response = await timedFetch<DataType>(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 };
 }

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<ExampleListProps> = ({}) => {
+  const result = useQuery<ExampleListType>({
+    url: "http://localhost:3000/example",
+    options: { headers: {} },
+    timeout: 4000,
+  });
+
+  const one = useQuery<ExampleListType>({
+    url: "http://localhost:3000/example/1",
+    options: { headers: {} },
+    timeout: 4000,
+  });
+
+  return (
+    <div data-testid="{example-list}" className={styles.container}>
+      {JSON.stringify(result.data)}
+      {one.isError && <h1>ERROR</h1>}
+      <h1>ONE{JSON.stringify(one.data)}</h1>
+    </div>
+  );
+};

front/src/modules/example/components/example-list/example-list.module.scss

@@ -0,0 +1,2 @@
+.container {
+}

front/src/modules/example/components/example-list/index.ts

@@ -0,0 +1,3 @@
+"use client"
+
+export { ExampleList } from "./example-list.component";

front/src/modules/example/views/example-list/example-list.module.scss

@@ -0,0 +1,2 @@
+.container {
+}

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<ExampleListProps> = ({}) => {
+  return (
+    <div data-testid="{example-list}" className={styles.container}>
+      <ExampleList />
+    </div>
+  );
+};

front/src/modules/example/views/example-list/index.ts

@@ -0,0 +1 @@
+export { ExampleListView } from "./example-list.view";