From 023e9d55251754630bb6a0aa0ac09ec76952771d Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Wed, 25 Sep 2024 17:41:57 -0500 Subject: [PATCH] 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 --- .../charts/GithubContributionChartDisabled.js | 55 +++++++++++++++++++ src/components/profile/UserProfile.js | 45 +++++++++++++-- src/components/profile/UserSettings.js | 54 +++++++++++++++--- .../profile/progress/UserProgress.js | 20 +++---- 4 files changed, 151 insertions(+), 23 deletions(-) create mode 100644 src/components/charts/GithubContributionChartDisabled.js diff --git a/src/components/charts/GithubContributionChartDisabled.js b/src/components/charts/GithubContributionChartDisabled.js new file mode 100644 index 0000000..1010a12 --- /dev/null +++ b/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 ( +
+
+
+ {calendar.map((day, index) => ( +
+ ))} +
+
+ Less +
+
+
+
+
+
+
+ More +
+
+
+

Connect to GitHub (Coming Soon)

+
+
+ ); +}; + +export default GithubContributionChartDisabled; diff --git a/src/components/profile/UserProfile.js b/src/components/profile/UserProfile.js index 7167222..ec4c0cd 100644 --- a/src/components/profile/UserProfile.js +++ b/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 = () => { ); + const purchasesHeader = ( +
+ Purchases +
+ ); + return ( user && (
@@ -86,7 +94,8 @@ const UserProfile = () => { {nip19.npubEncode(user.pubkey)} - + {/* */} +
{!session || !session?.user || !ndk ? ( @@ -106,11 +115,11 @@ const UserProfile = () => { } }} > - ( - + )} > { formatDateTime(rowData?.createdAt)} header="Date"> )} + {session && session?.user && ( + + + { + return + }} + header="Name" + > + item.courseId) ? "course" : "resource"} header="Category"> + formatDateTime(rowData?.createdAt)} header="Date"> + + )} ) ); diff --git a/src/components/profile/UserSettings.js b/src/components/profile/UserSettings.js index 72a76a8..49718ba 100644 --- a/src/components/profile/UserSettings.js +++ b/src/components/profile/UserSettings.js @@ -140,10 +140,10 @@ const UserSettings = () => { return (

Relays

-
); @@ -178,8 +178,8 @@ const UserSettings = () => { {user.username || user?.email || "Anon"}

- - {nip19.npubEncode(user.pubkey)} + + {nip19.npubEncode(user.pubkey)}

Connect Your Lightning Wallet

@@ -189,7 +189,7 @@ const UserSettings = () => { )}
- {!session || !session?.user || !ndk ? ( + {/* {!session || !session?.user || !ndk ? (
) : (
@@ -256,7 +256,45 @@ const UserSettings = () => { formatDateTime(rowData?.createdAt)} header="Date">
- )} + )} */} +
+ setCollapsed(e.value)} + > +
+ setNewRelayUrl(e.target.value)} + /> + +
+ + setUpdateTrigger(prev => prev + 1)} // Trigger update when table value changes + > + url} header="Relay URL"> + + + +
) ); diff --git a/src/components/profile/progress/UserProgress.js b/src/components/profile/progress/UserProgress.js index c34eb82..b28c653 100644 --- a/src/components/profile/progress/UserProgress.js +++ b/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 (
-

Your Dev Journey

+

Dev Journey (Coming Soon)

Track your progress from Pleb to Plebdev

@@ -107,7 +107,7 @@ const UserProgress = () => {
- {index + 1} +
{task.status} @@ -123,11 +123,11 @@ const UserProgress = () => {
  • {subTask.completed ? (
    - +
    ) : (
    - {subIndex + 1} + {subIndex + 1}
    )} @@ -143,11 +143,11 @@ const UserProgress = () => {
    {task.completed ? (
    - +
    ) : (
    - {index + 1} +
    )} {task.status} @@ -162,7 +162,7 @@ const UserProgress = () => {
    );