From 6c0e09292b2c8255a2abed39c9d188ca7c93f880 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Wed, 11 Dec 2024 11:33:41 -0600 Subject: [PATCH] Move user info into its own component on profile, fixed time formatting on progress and purchase tables --- .../profile/DataTables/UserProgressTable.js | 18 ++-- .../profile/DataTables/UserPurchaseTable.js | 18 ++-- src/components/profile/UserProfile.js | 100 +----------------- src/components/profile/UserProfileCard.js | 91 ++++++++++++++++ 4 files changed, 118 insertions(+), 109 deletions(-) create mode 100644 src/components/profile/UserProfileCard.js diff --git a/src/components/profile/DataTables/UserProgressTable.js b/src/components/profile/DataTables/UserProgressTable.js index 13cf250..e804b22 100644 --- a/src/components/profile/DataTables/UserProgressTable.js +++ b/src/components/profile/DataTables/UserProgressTable.js @@ -107,12 +107,18 @@ const UserProgressTable = ({ session, ndk, windowWidth }) => { ); - const dateTemplate = (rowData) => ( -
- - {formatDateTime(rowData.date)} -
- ); + const dateTemplate = (rowData) => { + // Adjust for timezone offset like in the contribution chart + const date = new Date(rowData.date); + const adjustedDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000); + + return ( +
+ + {formatDateTime(adjustedDate)} +
+ ); + }; if (!session || !session?.user || !ndk) { return
; diff --git a/src/components/profile/DataTables/UserPurchaseTable.js b/src/components/profile/DataTables/UserPurchaseTable.js index bdac7d8..db764b1 100644 --- a/src/components/profile/DataTables/UserPurchaseTable.js +++ b/src/components/profile/DataTables/UserPurchaseTable.js @@ -34,12 +34,18 @@ const UserPurchaseTable = ({ session, windowWidth }) => { ); - const dateTemplate = (rowData) => ( -
- - {formatDateTime(rowData?.createdAt)} -
- ); + const dateTemplate = (rowData) => { + // Adjust for timezone offset like in the contribution chart + const date = new Date(rowData?.createdAt); + const adjustedDate = new Date(date.getTime() - date.getTimezoneOffset() * 60000); + + return ( +
+ + {formatDateTime(adjustedDate)} +
+ ); + }; return ( session && session?.user && ( diff --git a/src/components/profile/UserProfile.js b/src/components/profile/UserProfile.js index 6963822..ff7c437 100644 --- a/src/components/profile/UserProfile.js +++ b/src/components/profile/UserProfile.js @@ -1,19 +1,11 @@ -import React, { useRef, useState, useEffect } from "react"; -import { Menu } from "primereact/menu"; -import { useImageProxy } from "@/hooks/useImageProxy"; +import React, { useState, useEffect } from "react"; import { useSession } from 'next-auth/react'; 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 UserProfileCard from "@/components/profile/UserProfileCard"; import CombinedContributionChart from "@/components/charts/CombinedContributionChart"; -import GithubContributionChart from "@/components/charts/GithubContributionChart"; import ActivityContributionChart from "@/components/charts/ActivityContributionChart"; -import GithubContributionChartDisabled from "@/components/charts/GithubContributionChartDisabled"; import useCheckCourseProgress from "@/hooks/tracking/useCheckCourseProgress"; import useWindowWidth from "@/hooks/useWindowWidth"; -import { useToast } from "@/hooks/useToast"; import UserProgress from "@/components/profile/progress/UserProgress"; import UserProgressTable from '@/components/profile/DataTables/UserProgressTable'; import UserPurchaseTable from '@/components/profile/DataTables/UserPurchaseTable'; @@ -23,17 +15,9 @@ const UserProfile = () => { const [user, setUser] = useState(null); const [account, setAccount] = useState(null); const { data: session } = useSession(); - const { returnImageProxy } = useImageProxy(); const { ndk, addSigner } = useNDKContext(); - const { showToast } = useToast(); - const menu = useRef(null); useCheckCourseProgress(); - const copyToClipboard = (text) => { - navigator.clipboard.writeText(text); - showToast("success", "Copied", "Copied to clipboard"); - }; - useEffect(() => { if (session?.user) { console.log("Session", session) @@ -45,43 +29,6 @@ const UserProfile = () => { } }, [session]); - const header = ( -
- Progress -
- ); - - const purchasesHeader = ( -
- Purchases -
- ); - - const menuItems = [ - ...(user?.privkey ? [{ - label: 'Copy nsec', - icon: 'pi pi-key', - command: () => { - const privkeyBuffer = Buffer.from(user.privkey, 'hex'); - copyToClipboard(nip19.nsecEncode(privkeyBuffer)); - } - }] : []), - { - label: 'Copy npub', - icon: 'pi pi-user', - command: () => { - if (user.pubkey) { - copyToClipboard(nip19.npubEncode(user?.pubkey)); - } - } - }, - { - label: 'Open Nostr Profile', - icon: 'pi pi-external-link', - command: () => window.open(`https://nostr.com/${nip19.npubEncode(user?.pubkey)}`, '_blank') - } - ]; - return ( user && (
@@ -91,48 +38,7 @@ const UserProfile = () => { ) }
-
- user's avatar -
- menu.current.toggle(e)} - /> - -
-
- - -

- {user.username || user?.name || user?.email || "Anon"} -

- {user.pubkey && ( -

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

- )} - {user?.lightningAddress && ( -

- Lightning Address: {user.lightningAddress.name}@plebdevs.com copyToClipboard(user.lightningAddress.name + "@plebdevs.com")} /> -

- )} - {user?.nip05 && ( -

- NIP-05: {user.nip05.name}@plebdevs.com copyToClipboard(user.nip05.name + "@plebdevs.com")} /> -

- )} + {account && account?.provider === "github" ? ( ) : ( diff --git a/src/components/profile/UserProfileCard.js b/src/components/profile/UserProfileCard.js new file mode 100644 index 0000000..aced8f0 --- /dev/null +++ b/src/components/profile/UserProfileCard.js @@ -0,0 +1,91 @@ +import React, { useRef } from 'react'; +import Image from 'next/image'; +import { Menu } from 'primereact/menu'; +import { Tooltip } from 'primereact/tooltip'; +import { nip19 } from 'nostr-tools'; +import { useImageProxy } from '@/hooks/useImageProxy'; +import { useToast } from '@/hooks/useToast'; + +const UserProfileCard = ({ user }) => { + const menu = useRef(null); + const { showToast } = useToast(); + const { returnImageProxy } = useImageProxy(); + const copyToClipboard = (text) => { + navigator.clipboard.writeText(text); + showToast("success", "Copied", "Copied to clipboard"); + }; + + const menuItems = [ + ...(user?.privkey ? [{ + label: 'Copy nsec', + icon: 'pi pi-key', + command: () => { + const privkeyBuffer = Buffer.from(user.privkey, 'hex'); + copyToClipboard(nip19.nsecEncode(privkeyBuffer)); + } + }] : []), + { + label: 'Copy npub', + icon: 'pi pi-user', + command: () => { + if (user.pubkey) { + copyToClipboard(nip19.npubEncode(user?.pubkey)); + } + } + }, + { + label: 'Open Nostr Profile', + icon: 'pi pi-external-link', + command: () => window.open(`https://nostr.com/${nip19.npubEncode(user?.pubkey)}`, '_blank') + } + ]; + + return ( + <> +
+ user's avatar +
+ menu.current.toggle(e)} + /> + +
+
+ + +

+ {user.username || user?.name || user?.email || "Anon"} +

+ {user.pubkey && ( +

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

+ )} + {user?.lightningAddress && ( +

+ Lightning Address: {user.lightningAddress.name}@plebdevs.com copyToClipboard(user.lightningAddress.name + "@plebdevs.com")} /> +

+ )} + {user?.nip05 && ( +

+ NIP-05: {user.nip05.name}@plebdevs.com copyToClipboard(user.nip05.name + "@plebdevs.com")} /> +

+ )} + + ); +}; + +export default UserProfileCard;