From abec6d734cde8a2bb0924989b1c5801e924137c3 Mon Sep 17 00:00:00 2001
From: Max Nanis
Date: Tue, 10 Jun 2025 03:40:01 +0700
Subject: Adding userProfile redux slice, showing created timestamp on user
 page.

---
 src/Widget.tsx                 |  8 ++++++++
 src/components/nav-main.tsx    |  7 -------
 src/components/site-header.tsx |  1 +
 src/models/userProfileSlice.ts | 21 +++++++++++++++++++++
 src/pages/Demographics.tsx     | 16 +++++++++++++---
 src/store.ts                   |  2 ++
 6 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 src/models/userProfileSlice.ts

(limited to 'src')

diff --git a/src/Widget.tsx b/src/Widget.tsx
index e1522c0..16dba81 100644
--- a/src/Widget.tsx
+++ b/src/Widget.tsx
@@ -11,6 +11,7 @@ import {
     CashoutMethodOut,
     MarketProfileKnowledge,
     OfferwallApi,
+    ProductUserApi,
     ProfilingQuestionsApi,
     QuestionInfo,
     UserProfileKnowledge,
@@ -26,6 +27,7 @@ import {setUpkQuestions} from "@/models/upkQuestionSlice.ts"
 import {setAvailabilityCount, setOfferwallId} from "@/models/appSlice.ts"
 import {setUpkAnswers} from "@/models/userUpkAnswerSlice.ts";
 import {setMarketplaceAnswers} from "@/models/userMarketplaceAnswerSlice.ts";
+import {setUserProfile} from "@/models/userProfileSlice.ts";
 
 import './index.css';
 
@@ -50,6 +52,12 @@ const Widget = () => {
             })
             .catch(err => console.log(err));
 
+        new ProductUserApi().userProfileProductIdUserProductUserIdProfileGet(app.bpid, app.bpuid)
+            .then(res => {
+                dispatch(setUserProfile(res.data["user-profile"]))
+            })
+            .catch(err => console.log(err))
+
         new ProfilingQuestionsApi().getProfilingQuestionsProductIdProfilingQuestionsGet(app.bpid, app.bpuid, "104.9.125.144", undefined, undefined, 2500)
             .then(res => {
                 dispatch(setQuestions(res.data.questions as ProfileQuestion[]))
diff --git a/src/components/nav-main.tsx b/src/components/nav-main.tsx
index fbd0ff8..949ced3 100644
--- a/src/components/nav-main.tsx
+++ b/src/components/nav-main.tsx
@@ -72,13 +72,6 @@ export function NavMain() {
                         </SidebarMenuButton>
                     </SidebarMenuItem>
 
-                    <SidebarMenuItem key="community">
-                        <SidebarMenuButton tooltip="Community">
-                            <Users/>
-                            <span>Community</span>
-                        </SidebarMenuButton>
-                    </SidebarMenuItem>
-
                 </SidebarMenu>
             </SidebarGroupContent>
         </SidebarGroup>
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index f4c42ec..f3e8851 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -21,6 +21,7 @@ const SiteHeader = () => {
                     {app.currentPage === 'offerwall' && "Offerwall"}
                     {app.currentPage === 'questions' && "Profiling Questions"}
                     {app.currentPage === 'cashouts' && "Cashout Methods"}
+                    {app.currentPage === 'demographics' && "User Demographics"}
                 </h1>
 
             </div>
diff --git a/src/models/userProfileSlice.ts b/src/models/userProfileSlice.ts
new file mode 100644
index 0000000..504a279
--- /dev/null
+++ b/src/models/userProfileSlice.ts
@@ -0,0 +1,21 @@
+import {createSlice, PayloadAction} from "@reduxjs/toolkit";
+import {UserProfile} from "@/api";
+
+const initialState: UserProfile = {} as UserProfile
+
+
+const userProfileSlice = createSlice({
+    name: 'userProfile',
+    initialState,
+    reducers: {
+        setUserProfile(state, action: PayloadAction<UserProfile>) {
+            return action.payload
+        }
+    }
+})
+
+export const {
+    setUserProfile,
+} = userProfileSlice.actions;
+
+export default userProfileSlice.reducer;
diff --git a/src/pages/Demographics.tsx b/src/pages/Demographics.tsx
index 1130ef4..f1de290 100644
--- a/src/pages/Demographics.tsx
+++ b/src/pages/Demographics.tsx
@@ -2,12 +2,14 @@ import React from "react";
 import {useSelector} from "react-redux";
 import {selectUserAge, selectUserGender, selectUserUpkAnswers, selectUserZip} from "@/models/userUpkAnswerSlice.ts";
 import {titleCase} from "@/lib/utils.ts";
+import { formatDistanceToNow } from 'date-fns'
 
 import {Card, CardContent, CardHeader} from "@/components/ui/card";
-import {Calendar, MapPin, User} from "lucide-react";
-import {BucketTask} from "@/api";
+import {Calendar, MapPin, User, PersonStanding} from "lucide-react";
+import {BucketTask, UserProfile} from "@/api";
 import {ColumnDef, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table.tsx";
+import {useAppSelector} from "@/hooks.ts";
 
 export const UpkGrid = () => {
 
@@ -80,12 +82,20 @@ export const ContactCard = () => {
     const zip = useSelector(selectUserZip)
     const gender = useSelector(selectUserGender)
 
+    const userProfile: UserProfile = useAppSelector(state => state.userProfile)
+
+    const created: string = formatDistanceToNow(new Date(userProfile.user.created), { addSuffix: true })
+
     return (
         <Card className="w-full max-w-sm shadow-md rounded-2xl p-4">
             <CardHeader className="flex items-center space-x-4">
                 <div className="w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center">
                     <User className="text-gray-500"/>
                 </div>
+                <div className="flex items-center space-x-2 text-sm text-muted-foreground">
+                    <PersonStanding className="w-4 h-4"/>
+                    <span>Created: {created}</span>
+                </div>
             </CardHeader>
 
             <CardContent className="space-y-2 pt-2">
@@ -112,7 +122,7 @@ const Demographics = () => {
     return (
         <>
             <ContactCard/>
-            <UpkGrid />
+            <UpkGrid/>
         </>
     )
 }
diff --git a/src/store.ts b/src/store.ts
index c4844b5..7ff1bfc 100644
--- a/src/store.ts
+++ b/src/store.ts
@@ -9,6 +9,7 @@ import walletReducers from "@/models/walletSlice.ts"
 import upkQuestionReducers from "@/models/upkQuestionSlice"
 import userUpkAnswerReducers from "@/models/userUpkAnswerSlice.ts"
 import userMarketplaceReducers from "@/models/userMarketplaceAnswerSlice.ts"
+import userProfileReducers from "@/models/userProfileSlice.ts"
 
 export const store = configureStore({
     reducer: {
@@ -21,6 +22,7 @@ export const store = configureStore({
         questions: questionReducers,
         upkQuestions: upkQuestionReducers,
 
+        userProfile: userProfileReducers,
         userUpkAnswers: userUpkAnswerReducers,
         userMarketplaceAnswers: userMarketplaceReducers,
 
-- 
cgit v1.2.3