Add disabled github chart, coming soon messages in user progress, mover data tables back to where both purchases and progress is on profile and only relays are on settings

src/components/charts/GithubContributionChartDisabled.js

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react';
+
+const GithubContributionChartDisabled = () => {
+    const getRandomColor = () => {
+        const random = Math.random();
+        if (random < 0.4) return 'bg-gray-100';
+        if (random < 0.6) return 'bg-green-300';
+        if (random < 0.75) return 'bg-green-400';
+        if (random < 0.9) return 'bg-green-600';
+        return 'bg-green-700';
+    };
+
+    const calendar = useMemo(() => {
+        const today = new Date();
+        const sixMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 5, 1);
+        const calendar = [];
+
+        for (let d = new Date(sixMonthsAgo); d <= today; d.setDate(d.getDate() + 1)) {
+            calendar.push({ date: new Date(d), color: getRandomColor() });
+        }
+
+        return calendar;
+    }, []);
+
+    return (
+        <div className="relative mx-auto py-2 px-4 max-w-[900px] bg-gray-800 rounded-lg">
+            <div className="opacity-30">
+                <div className="flex flex-wrap gap-1">
+                    {calendar.map((day, index) => (
+                        <div
+                            key={index}
+                            className={`w-3 h-3 ${day.color} rounded-sm`}
+                        ></div>
+                    ))}
+                </div>
+                <div className="mt-2 text-sm text-gray-400 flex items-center">
+                    <span className="mr-2">Less</span>
+                    <div className="flex gap-1">
+                        <div className="w-3 h-3 bg-gray-100 rounded-sm"></div>
+                        <div className="w-3 h-3 bg-green-300 rounded-sm"></div>
+                        <div className="w-3 h-3 bg-green-400 rounded-sm"></div>
+                        <div className="w-3 h-3 bg-green-600 rounded-sm"></div>
+                        <div className="w-3 h-3 bg-green-700 rounded-sm"></div>
+                    </div>
+                    <span className="ml-2">More</span>
+                </div>
+            </div>
+            <div className="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 rounded-lg">
+                <p className="text-white text-xl font-semibold">Connect to GitHub (Coming Soon)</p>
+            </div>
+        </div>
+    );
+};
+
+export default GithubContributionChartDisabled;

src/components/profile/UserProfile.js

@@ -6,12 +6,14 @@ import { useImageProxy } from "@/hooks/useImageProxy";
 import { useSession } from 'next-auth/react';
 import { ProgressSpinner } from "primereact/progressspinner";
 import ProgressListItem from "@/components/content/lists/ProgressListItem";
+import PurchasedListItem from "@/components/content/lists/PurchasedListItem";
 import { useNDKContext } from "@/context/NDKContext";
 import { formatDateTime } from "@/utils/time";
 import { Tooltip } from "primereact/tooltip";
 import { nip19 } from "nostr-tools";
 import Image from "next/image";
 import GithubContributionChart from "@/components/charts/GithubContributionChart";
+import GithubContributionChartDisabled from "@/components/charts/GithubContributionChartDisabled";
 import useWindowWidth from "@/hooks/useWindowWidth";
 import { useToast } from "@/hooks/useToast";
 import UserProgress from "@/components/profile/progress/UserProgress";
@@ -55,6 +57,12 @@ const UserProfile = () => {
         </div>
     );
 
+    const purchasesHeader = (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+            <span className="text-xl text-900 font-bold text-[#f8f8ff]">Purchases</span>
+        </div>
+    );
+
     return (
         user && (
             <div className="p-4">
@@ -86,7 +94,8 @@ const UserProfile = () => {
                         <Tooltip target=".pubkey-tooltip" content={"this is your nostr npub"} />
                         {nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
                     </h2>
-                    <GithubContributionChart username={"austinkelsay"} />
+                    {/* <GithubContributionChart username={"austinkelsay"} /> */}
+                    <GithubContributionChartDisabled username={"austinkelsay"} />
                     <UserProgress />
                 </div>
                 {!session || !session?.user || !ndk ? (
@@ -106,11 +115,11 @@ const UserProfile = () => {
                             }
                         }}
                     >
-                        <Column 
-                            field="completed" 
-                            header="Completed" 
+                        <Column
+                            field="completed"
+                            header="Completed"
                             body={(rowData) => (
-                                <i className={classNames('pi', {'pi-check-circle text-green-500': rowData.completed, 'pi-times-circle text-red-500': !rowData.completed})}></i>
+                                <i className={classNames('pi', { 'pi-check-circle text-green-500': rowData.completed, 'pi-times-circle text-red-500': !rowData.completed })}></i>
                             )}
                         ></Column>
                         <Column
@@ -125,6 +134,32 @@ const UserProfile = () => {
                         <Column body={rowData => formatDateTime(rowData?.createdAt)} header="Date"></Column>
                     </DataTable>
                 )}
+                {session && session?.user && (
+                    <DataTable
+                        emptyMessage="No purchases"
+                        value={session.user?.purchased}
+                        header={purchasesHeader}
+                        style={{ maxWidth: windowWidth < 768 ? "100%" : "90%", margin: "0 auto", borderRadius: "10px" }}
+                        pt={{
+                            wrapper: {
+                                className: "rounded-lg rounded-t-none"
+                            },
+                            header: {
+                                className: "rounded-t-lg mt-4"
+                            }
+                        }}
+                    >
+                        <Column field="amountPaid" header="Cost"></Column>
+                        <Column
+                            body={(rowData) => {
+                                return <PurchasedListItem eventId={rowData?.resource?.noteId || rowData?.course?.noteId} category={rowData?.course ? "courses" : "resources"} />
+                            }}
+                            header="Name"
+                        ></Column>
+                        <Column body={session.user?.purchased?.some((item) => item.courseId) ? "course" : "resource"} header="Category"></Column>
+                        <Column body={rowData => formatDateTime(rowData?.createdAt)} header="Date"></Column>
+                    </DataTable>
+                )}
             </div>
         )
     );

src/components/profile/UserSettings.js

@@ -140,10 +140,10 @@ const UserSettings = () => {
         return (
             <div className="flex flex-row justify-between px-4 py-[6px] bg-gray-800 rounded-t-lg border-b border-gray-700">
                 <p className="text-[#f8f8ff] text-900 text-xl mt-2 h-fit font-bold">Relays</p>
-                <GenericButton 
-                    onClick={options.onTogglerClick} 
-                    icon={options.collapsed ? "pi pi-plus" : "pi pi-minus"} 
-                    className="p-button-rounded p-button-success p-button-text" 
+                <GenericButton
+                    onClick={options.onTogglerClick}
+                    icon={options.collapsed ? "pi pi-plus" : "pi pi-minus"}
+                    className="p-button-rounded p-button-success p-button-text"
                 />
             </div>
         );
@@ -178,8 +178,8 @@ const UserSettings = () => {
                         {user.username || user?.email || "Anon"}
                     </h1>
                     <h2 className="text-center text-xl my-2 truncate max-tab:px-4 max-mob:px-4">
-                    <Tooltip target=".pubkey-tooltip" content={"this is your nostr npub"} />
-                    {nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
+                        <Tooltip target=".pubkey-tooltip" content={"this is your nostr npub"} />
+                        {nip19.npubEncode(user.pubkey)} <i className="pi pi-question-circle text-xl pubkey-tooltip" />
                     </h2>
                     <div className="flex flex-col w-1/2 mx-auto justify-between items-center">
                         <h2 className="text-xl my-2 max-mob:text-base max-tab:text-base">Connect Your Lightning Wallet</h2>
@@ -189,7 +189,7 @@ const UserSettings = () => {
                         <SubscribeModal user={user} />
                     )}
                 </div>
-                {!session || !session?.user || !ndk ? (
+                {/* {!session || !session?.user || !ndk ? (
                     <div className='w-full h-full flex items-center justify-center'><ProgressSpinner /></div>
                 ) : (
                     <div className="flex justify-between" style={{ flexDirection: windowWidth < 768 ? "column" : "row", gap: "1rem" }}>
@@ -256,7 +256,45 @@ const UserSettings = () => {
                         <Column body={rowData => formatDateTime(rowData?.createdAt)} header="Date"></Column>
                     </DataTable>
                     </div>
-                )}
+                )} */}
+                <div>
+                    <Panel
+                        headerTemplate={PanelHeader}
+                        toggleable
+                        collapsed={collapsed}
+                        onToggle={(e) => setCollapsed(e.value)}
+                    >
+                        <div className="flex flex-row justify-between">
+                            <InputText
+                                placeholder="Relay URL"
+                                value={newRelayUrl}
+                                onChange={(e) => setNewRelayUrl(e.target.value)}
+                            />
+                            <GenericButton
+                                label="Add"
+                                severity="success"
+                                className='w-fit px-4'
+                                outlined
+                                onClick={addRelay}
+                            />
+                        </div>
+                    </Panel>
+                    <DataTable value={userRelays}
+                        pt={{
+                            wrapper: {
+                                className: "rounded-lg rounded-t-none"
+                            },
+                            header: {
+                                className: "rounded-t-lg"
+                            }
+                        }}
+                        onValueChange={() => setUpdateTrigger(prev => prev + 1)} // Trigger update when table value changes
+                    >
+                        <Column field={(url) => url} header="Relay URL"></Column>
+                        <Column body={relayStatusBody} header="Status"></Column>
+                        <Column body={relayActionsBody} header="Actions"></Column>
+                    </DataTable>
+                </div>
             </div>
         )
     );

src/components/profile/progress/UserProgress.js

@@ -25,7 +25,7 @@ const UserProgress = () => {
         const allTasks = [
             { status: 'Create Account', completed: true, tier: 'Pleb', courseId: null },
             {
-                status: 'Complete PlebDevs Starter',
+                status: 'PlebDevs Starter (Coming Soon)',
                 completed: false,
                 tier: 'New Dev',
                 courseId: null,
@@ -35,8 +35,8 @@ const UserProgress = () => {
                     { status: 'Push Commit', completed: false }
                 ]
             },
-            { status: 'Complete PlebDevs Course 1', completed: false, tier: 'Junior Dev', courseId: 'd20e2e9b-5123-4a91-b27f-d75ea1d5811e' },
-            { status: 'Complete PlebDevs Course 2', completed: false, tier: 'Plebdev', courseId: 'aa3b1641-ad2b-4ef4-9f0f-38951ae307b7' },
+            { status: 'PlebDevs Course 1', completed: false, tier: 'Junior Dev', courseId: 'd20e2e9b-5123-4a91-b27f-d75ea1d5811e' },
+            { status: 'PlebDevs Course 2', completed: false, tier: 'Plebdev', courseId: 'aa3b1641-ad2b-4ef4-9f0f-38951ae307b7' },
         ];
 
         const updatedTasks = allTasks.map(task => ({
@@ -71,7 +71,7 @@ const UserProgress = () => {
 
     return (
         <div className="bg-gray-800 rounded-3xl p-6 w-[500px] mx-auto my-8">
-            <h1 className="text-3xl font-bold text-white mb-2">Your Dev Journey</h1>
+            <h1 className="text-3xl font-bold text-white mb-2">Dev Journey (Coming Soon)</h1>
             <p className="text-gray-400 mb-4">Track your progress from Pleb to Plebdev</p>
 
             <div className="flex justify-between items-center mb-2">
@@ -107,7 +107,7 @@ const UserProgress = () => {
                                         <div className="bg-gray-800 flex items-center justify-between w-full font-normal">
                                             <div className="flex items-center">
                                                 <div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center mr-3">
-                                                    <span className="text-white text-sm">{index + 1}</span>
+                                                    <i className="pi pi-info-circle text-white text-lg"></i>
                                                 </div>
                                                 <span className="text-lg text-gray-400">{task.status}</span>
                                                 <i className={`pi pi-chevron-down text-gray-400 ml-2 transition-transform duration-300 ${expanded ? 'rotate-180' : ''}`} />
@@ -123,11 +123,11 @@ const UserProgress = () => {
                                             <li key={subIndex} className="flex items-center">
                                                 {subTask.completed ? (
                                                     <div className="w-4 h-4 bg-green-500 rounded-full flex items-center justify-center mr-3">
-                                                        <i className="pi pi-check text-white text-xs"></i>
+                                                        <i className="pi pi-check text-white text-lg"></i>
                                                     </div>
                                                 ) : (
                                                     <div className="w-4 h-4 bg-gray-700 rounded-full flex items-center justify-center mr-3">
-                                                        <span className="text-white text-xs">{subIndex + 1}</span>
+                                                        <span className="text-white text-sm">{subIndex + 1}</span>
                                                     </div>
                                                 )}
                                                 <span className={`text-base ${subTask.completed ? 'text-white' : 'text-gray-400'}`}>
@@ -143,11 +143,11 @@ const UserProgress = () => {
                                 <div className="flex items-center">
                                     {task.completed ? (
                                         <div className="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center mr-3">
-                                            <i className="pi pi-check text-white text-sm"></i>
+                                            <i className="pi pi-check text-white text-lg"></i>
                                         </div>
                                     ) : (
                                         <div className="w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center mr-3">
-                                            <span className="text-white text-sm">{index + 1}</span>
+                                            <i className="pi pi-info-circle text-white text-lg"></i>
                                         </div>
                                     )}
                                     <span className={`text-lg ${task.completed ? 'text-white' : 'text-gray-400'}`}>{task.status}</span>
@@ -162,7 +162,7 @@ const UserProgress = () => {
             </ul>
 
             <button className="w-full py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-full font-semibold">
-                View Badges
+                View Badges (Coming Soon)
             </button>
         </div>
     );