feat: create Dashboard

src/components/pages/Dashboard/Edit/index.tsx

@@ -0,0 +1,66 @@
+import { Button } from "@/components/ui/Button";
+import { Textfield } from "@/components/ui/Textfield";
+import useFetch from "@/hooks/useFetch";
+import { dashboardService } from "@/services/api/dashboard.service";
+import { useParams } from "react-router-dom";
+import useEdit from "./useEdit";
+import { useCallback, useEffect } from "react";
+import { MyNpubsCardProps } from "../MyNpubsCard";
+const sampleData: MyNpubsCardProps = {
+    username: "[email protected]",
+    npub: "npub1h5h535j4809uf23j8y9t4n23090",
+    id: "1",
+};
+
+const NpubEditForm = () => {
+    const { id } = useParams();
+
+    const fetchUsernames = useCallback(() => {
+        return dashboardService
+            .getMyUsername(id as string)
+            .then(res => res.data.data);
+    }, []);
+    const { data, loading } = useFetch(fetchUsernames);
+
+    const { handleSubmit, register, errors, setValue } = useEdit();
+    useEffect(() => {
+        if (data) {
+            setValue("npub", data?.npub);
+        }
+    }, []);
+
+    if (loading) return "Loading...";
+
+    return (
+        <form
+            onSubmit={handleSubmit}
+            className="pt-24 space-y-20 min-h-[80dvh]"
+        >
+            <header className="flex items-center ">
+                <div className="space-y-1 flex-1">
+                    <p className="font-roboto-mono text-[#80899F]">
+                        Edit your Nip-05 records
+                    </p>
+                    <h3 className="gradient-text text-[44px] font-bold">
+                        {sampleData?.username}
+                    </h3>
+                </div>
+                <Button className="min-w-[153px]" type="submit">
+                    Save Changes
+                </Button>
+            </header>
+            <main className="space-y-12 ">
+                <div className="space-y-2">
+                    <Textfield {...register("npub")} label="NPUB:" />
+                    {errors.npub && (
+                        <p className="text-[#F6543E] text-sm font-roboto-mono animate-fade-right">
+                            {errors.npub.message}
+                        </p>
+                    )}
+                </div>
+            </main>
+        </form>
+    );
+};
+
+export default NpubEditForm;

src/components/pages/Dashboard/Edit/useEdit.ts

@@ -0,0 +1,51 @@
+import * as yup from "yup";
+import { useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { dashboardService } from "@/services/api/dashboard.service";
+
+const schema = yup
+    .object({
+        npub: yup.string().required("npub is required"),
+    })
+    .required();
+
+const useEdit = () => {
+    const navigate = useNavigate();
+    const [loading, setLoading] = useState(false);
+    const { id } = useParams();
+
+    const {
+        register,
+        handleSubmit,
+        setValue,
+        formState: { errors },
+    } = useForm({
+        resolver: yupResolver(schema),
+    });
+
+    const onSubmit = async (data: { npub: string }) => {
+        try {
+            setLoading(true);
+            await dashboardService.editMyUsernames(id as string, data);
+            navigate("");
+        } catch (error) {
+            console.log(error);
+            navigate("");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return {
+        setValue,
+        register,
+        onSubmit,
+        errors,
+        handleSubmit: handleSubmit(onSubmit),
+        loading,
+    };
+};
+
+export default useEdit;

src/components/pages/Dashboard/MyNpubsCard.tsx

@@ -0,0 +1,65 @@
+import { buttonVariants } from "@/components/ui/Button/buttonVariants";
+import Tag from "@/components/ui/Tag";
+import { cn } from "@/lib/utils";
+import { Link } from "react-router-dom";
+
+export type MyNpubsCardProps = {
+    id: string;
+    username: string;
+    npub: string;
+    // items: { name: string; value: string }[];
+};
+
+const MyNpubsCard = ({ username, id, npub }: MyNpubsCardProps) => {
+    return (
+        <div
+            className="relative rounded-[22px] "
+            style={{
+                background:
+                    "linear-gradient(329.52deg, rgba(160, 197, 247, 0.248) -2.39%, rgba(191, 224, 240, 0.458552) 54.92%, rgba(17, 22, 40, 0.62) 98.88%)",
+            }}
+        >
+            <div
+                className="py-7 px-4 space-y-6 scale-y-[99.1%] scale-x-[99.8%] rounded-[22px]"
+                style={{
+                    background:
+                        " linear-gradient(180deg, rgba(31, 36, 58, 0.75) 0%, rgba(17, 22, 40, 0.675) 100%)",
+                }}
+            >
+                <header className="flex justify-between">
+                    <p className="flex-1 text-[#ACCDF2] font-roboto-mono text-[36px]">
+                        {username}
+                    </p>
+                    <Link
+                        to={`/dashboard/edit/${id}`}
+                        className={cn(buttonVariants(), "min-w-[112px] h-12")}
+                    >
+                        {" "}
+                        Edit
+                    </Link>
+                </header>
+                <main className="grid grid-cols-2">
+                    <div className="flex gap-1 items-center">
+                        <Tag>npub</Tag>
+                        <p className="text-white font-medium font-roboto-mono">
+                            {npub}
+                        </p>
+                    </div>
+                    {/* {items.map((item, key) => (
+                        <div
+                            className="flex gap-1 items-center"
+                            key={key + item.value}
+                        >
+                            <Tag>{item.name}</Tag>
+                            <p className="text-white font-medium font-roboto-mono">
+                                {item.value}
+                            </p>
+                        </div>
+                    ))} */}
+                </main>
+            </div>
+        </div>
+    );
+};
+
+export default MyNpubsCard;

src/components/pages/Dashboard/index.tsx

@@ -0,0 +1,66 @@
+import { dashboardService } from "@/services/api/dashboard.service";
+import MyNpubsCard, { MyNpubsCardProps } from "./MyNpubsCard";
+import { Skeleton } from "@/components/ui/skeleton";
+import AnimateWrapper from "@/components/AnimateWrapper";
+import useFetch from "@/hooks/useFetch";
+import { useCallback } from "react";
+const sampleData: MyNpubsCardProps[] = [
+    {
+        username: "[email protected]",
+        npub: "npub1h5h535j4809uf23j8y9t4n23090",
+        id: "1",
+        // items: [
+        //     {
+        //         name: "npub",
+        //         value: "npub1h5h535j4809uf23j8y9t4n23090",
+        //     },
+        // ],
+    },
+];
+
+const Dashboard = () => {
+    const fetchUsernames = useCallback(() => {
+        return dashboardService.getMyUsernames().then(res => res.data.data);
+    }, []);
+    const { data, loading, error } = useFetch(fetchUsernames);
+
+    if (error)
+        return (
+            <p className=" flex h-[80vh] flex items-center text-[56px] text-center justify-center gradient-text">
+                Error: {error.message}
+            </p>
+        );
+
+    return (
+        <main className="space-y-[107px] pt-24">
+            <h2 className="text-[64px] gradient-text uppercase ">
+                Hi, welcome
+                {/* TODO: add username */}
+            </h2>
+            <section className="flex flex-col gap-6 min-h-[65dvh] ">
+                {loading ? (
+                    <>
+                        <Skeleton className="w-full h-[150px] rounded-[22px]" />
+                        <Skeleton className="w-full h-[150px] rounded-[22px]" />
+                    </>
+                ) : data && data.length > 0 ? (
+                    data?.map((card, key) => (
+                        <AnimateWrapper key={key} delay={key * 0.2}>
+                            <MyNpubsCard {...card} />
+                        </AnimateWrapper>
+                    ))
+                ) : sampleData ? (
+                    sampleData?.map((card, key) => (
+                        <AnimateWrapper key={key} delay={key * 0.2}>
+                            <MyNpubsCard {...card} />
+                        </AnimateWrapper>
+                    ))
+                ) : (
+                    "Not any username"
+                )}
+            </section>
+        </main>
+    );
+};
+
+export default Dashboard;

src/components/pages/SetUserName/NameSuggestions.tsx

@@ -1,25 +1,14 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import Tag from "@/components/ui/Tag";
+import useFetch from "@/hooks/useFetch";
 import { usernameService } from "@/services/api/username.service";
-import { useEffect, useState } from "react";
 
 const NameSuggestions = () => {
-    const [data, setData] = useState<string[]>();
-    const [loading, setLoading] = useState(false);
-    useEffect(() => {
-        const fetch = async () => {
-            try {
-                setLoading(true);
-                const res = await usernameService.getSuggestions();
-                setData(res.data.data);
-            } catch (error) {
-                console.log(error);
-            } finally {
-                setLoading(false);
-            }
-        };
-        fetch();
-    }, []);
+    const fetchUsernames = () =>
+        usernameService.getSuggestions().then(res => res.data.data);
+
+    const { data, loading } = useFetch(fetchUsernames);
+
     return (
         <div className="space-y-6">
             <h4 className="gradient-text text-xl font-bold">

src/hooks/useFetch.ts

@@ -0,0 +1,39 @@
+import { useState, useEffect, useCallback } from "react";
+
+type UseFetchState<T> = {
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+};
+
+function useFetch<T>(fetchFunction: () => Promise<T>) {
+    const [state, setState] = useState<UseFetchState<T>>({
+        data: null,
+        loading: false,
+        error: null,
+    });
+
+    const [trigger, setTrigger] = useState(0);
+
+    const fetchData = useCallback(async () => {
+        setState({ data: null, loading: true, error: null });
+        try {
+            const data = await fetchFunction();
+            setState({ data, loading: false, error: null });
+        } catch (error) {
+            setState({ data: null, loading: false, error: error as Error });
+        }
+    }, [fetchFunction]);
+
+    useEffect(() => {
+        fetchData();
+    }, [fetchData, trigger]);
+
+    const refetch = useCallback(() => {
+        setTrigger(prev => prev + 1);
+    }, []);
+
+    return { ...state, refetch };
+}
+
+export default useFetch;

src/routes/index.tsx

@@ -5,6 +5,8 @@ import { HomePage, NotFoundPage } from "@/components/pages";
 import AvailabilityPage from "@/components/pages/Availability";
 import SetUserName from "@/components/pages/SetUserName";
 import PaymentResult from "@/components/pages/PaymentResult";
+import Dashboard from "@/components/pages/Dashboard";
+import NpubEditForm from "@/components/pages/Dashboard/Edit";
 
 export const router = createBrowserRouter([
     {
@@ -31,6 +33,15 @@ export const router = createBrowserRouter([
                 path: "*",
                 element: <NotFoundPage />,
             },
+
+            {
+                path: "/dashboard",
+                element: <Dashboard />,
+            },
+            {
+                path: "/dashboard/edit/:id",
+                element: <NpubEditForm />,
+            },
         ],
     },
 ]);

src/services/api/dashboard.service.ts

@@ -0,0 +1,12 @@
+import { MyNpubsCardProps } from "@/components/pages/Dashboard/MyNpubsCard";
+import { mainApi } from "../../config/axios.config";
+import { ApiResponse } from "../../types/api.types";
+
+export const dashboardService = {
+    getMyUsernames: () =>
+        mainApi.get<ApiResponse<MyNpubsCardProps[]>>(`/usernames`),
+    getMyUsername: (id: string) =>
+        mainApi.get<ApiResponse<MyNpubsCardProps>>(`/usernames/username/${id}`),
+    editMyUsernames: (id: string, data: { npub: string }) =>
+        mainApi.put<ApiResponse<any>>(`/usernames/username/${id}`, data),
+};