feat/add ProfileButton component

src/components/profile-button.tsx

@@ -0,0 +1,21 @@
+import { useContext } from "react";
+import { Link } from "@tanstack/react-router";
+import UserIcon from "@/assets/user.svg?react";
+import { UserContext } from "@/routes/_auth_routes";
+
+const ProfileButton = () => {
+  const user = useContext(UserContext);
+
+  return (
+    <Link to="/profile">
+      <button className="flex h-8 items-center gap-1.5 rounded-[40px] border border-primary p-2 md:h-10">
+        <UserIcon />
+        <span className="text-[0.875rem] font-bold md:text-[1rem]">
+          hi, {user?.name.toLowerCase()}
+        </span>
+      </button>
+    </Link>
+  );
+};
+
+export default ProfileButton;

src/network/jobs.ts

@@ -1,5 +1,5 @@
 import http from "./axiosInstance";
-import { IJobs, type IJobAlert } from "@/types";
+import { IJobs, User, type IJobAlert } from "@/types";
 
 type ICreateJobAlert = {
   name: string;
@@ -16,6 +16,12 @@ type IJobsParams = {
   dateRange?: [string, string];
 };
 
+export const getUserDetails = async () => {
+  const res = await http.get("/user/me");
+
+  return res.data.data as User;
+};
+
 export const getAllJobAlerts = async () => {
   const res = await http.get("/job-alert");
 

src/routes/_auth_routes.tsx

@@ -1,10 +1,15 @@
-import Wrapper from "@/components/wrapper";
+import { createContext } from "react";
 import {
   createFileRoute,
   Outlet,
   redirect,
   useRouter,
 } from "@tanstack/react-router";
+import Wrapper from "@/components/wrapper";
+import { getUserDetails } from "@/network/jobs";
+import { User } from "@/types";
+
+export const UserContext = createContext<User | null>(null);
 
 export const Route = createFileRoute("/_auth_routes")({
   beforeLoad: ({ location }) => {
@@ -47,9 +52,24 @@ export const Route = createFileRoute("/_auth_routes")({
       </div>
     );
   },
-  component: () => (
-    <Wrapper>
-      <Outlet />
-    </Wrapper>
-  ),
+  gcTime: 0,
+  shouldReload: false,
+  loader: async () => {
+    const user = await getUserDetails();
+
+    return {
+      user,
+    };
+  },
+  component: () => {
+    const { user } = Route.useLoaderData();
+
+    return (
+      <UserContext.Provider value={user}>
+        <Wrapper>
+          <Outlet />
+        </Wrapper>
+      </UserContext.Provider>
+    );
+  },
 });

src/routes/_auth_routes/create-alert.tsx

@@ -3,11 +3,11 @@ import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
 import toast from "react-hot-toast";
 import Input from "@/components/input";
 import TagInput from "@/components/tag-input";
+import ProfileButton from "@/components/profile-button";
 import { useHookForm } from "@/hooks/useHookForm";
 import { createJobAlertSchema } from "@/schemas/job_alert";
 import { createJobAlert } from "@/network/jobs";
 import { toastError } from "@/utils";
-import UserIcon from "@/assets/user.svg?react";
 import CreateSuccessIcon from "@/assets/create-job_alert-success.svg?react";
 
 export const Route = createFileRoute("/_auth_routes/create-alert")({
@@ -55,12 +55,7 @@ function CreateAlert() {
   return (
     <div>
       <section className="mb-3 flex items-center justify-between">
-        <button className="flex h-8 items-center gap-1.5 rounded-[40px] border border-primary p-2 md:h-10">
-          <UserIcon />
-          <span className="text-[0.875rem] font-bold md:text-[1rem]">
-            hi, {"sheye"}
-          </span>
-        </button>
+        <ProfileButton />
       </section>
 
       <button

src/routes/_auth_routes/dashboard.tsx

@@ -2,10 +2,10 @@ import { useState } from "react";
 import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
 import toast from "react-hot-toast";
 import JobAlert from "@/components/job-alert";
+import ProfileButton from "@/components/profile-button";
 import DialogModal from "@/components/modal";
 import { deleteJobAlert, getAllJobAlerts } from "@/network/jobs";
 import { toastError } from "@/utils";
-import UserIcon from "@/assets/user.svg?react";
 import EmptyJobAlertIcon from "@/assets/empty-job-alert.svg?react";
 
 export const Route = createFileRoute("/_auth_routes/dashboard")({
@@ -43,12 +43,7 @@ function Dashboard() {
   return (
     <div>
       <section className="mb-3 flex items-center justify-between">
-        <button className="flex h-8 items-center gap-1.5 rounded-[40px] border border-primary p-2 md:h-10">
-          <UserIcon />
-          <span className="text-[0.875rem] font-bold md:text-[1rem]">
-            hi, {"sheye"}
-          </span>
-        </button>
+        <ProfileButton />
       </section>
 
       <Link

src/routes/_auth_routes/job-alert.$id.tsx

@@ -3,11 +3,11 @@ import { createFileRoute, Link, useRouter } from "@tanstack/react-router";
 import toast from "react-hot-toast";
 import { useHookForm } from "@/hooks/useHookForm";
 import Input from "@/components/input";
+import ProfileButton from "@/components/profile-button";
 import TagInput from "@/components/tag-input";
 import { getJobAlert, editJobAlert } from "@/network/jobs";
 import { editJobAlertSchema } from "@/schemas/job_alert";
 import { toastError } from "@/utils";
-import UserIcon from "@/assets/user.svg?react";
 import CreateSuccessIcon from "@/assets/create-job_alert-success.svg?react";
 
 export const Route = createFileRoute("/_auth_routes/job-alert/$id")({
@@ -64,12 +64,7 @@ function EditJobAlert() {
   return (
     <div>
       <section className="mb-3 flex items-center justify-between">
-        <button className="flex h-8 items-center gap-1.5 rounded-[40px] border border-primary p-2 md:h-10">
-          <UserIcon />
-          <span className="text-[0.875rem] font-bold md:text-[1rem]">
-            hi, {"sheye"}
-          </span>
-        </button>
+        <ProfileButton />
       </section>
 
       <button

src/types.ts

@@ -1,3 +1,15 @@
+export type User = {
+  id: string;
+  createdAt: string;
+  updatedAt: string;
+  isPremium: boolean;
+  email: string;
+  googleId: string;
+  name: string;
+  isVerified: boolean;
+  isLoginAllowed: boolean;
+};
+
 export type IJobAlert = {
   id: string;
   createdAt: string;