saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 18:31:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mobile view for interactive carousel, sorting content carousels by most recent

Browse Source
This commit is contained in:
austinkelsay 2024-09-14 18:36:46 -05:00
parent 7091da9ecd
commit 127e7d9029
6 changed files with 42 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/content/carousels/CoursesCarousel.js
View File

@ -34,7 +34,12 @@ export default function CoursesCarousel() {
if (courses && courses.length > 0) { if (courses && courses.length > 0) {
const processedCourses = courses.map(course => parseCourseEvent(course)); const processedCourses = courses.map(course => parseCourseEvent(course));
setProcessedCourses(processedCourses); // Sort courses by created_at in descending order (most recent first)
const sortedCourses = processedCourses.sort((a, b) => b.created_at - a.created_at);
console.log("Sorted courses:", sortedCourses);
setProcessedCourses(sortedCourses);
} else { } else {
console.log('No courses fetched or empty array returned'); console.log('No courses fetched or empty array returned');
} }

20
src/components/content/carousels/InteractivePromotionalCarousel.js
View File

@ -65,7 +65,7 @@ const InteractivePromotionalCarousel = () => {
const router = useRouter(); const router = useRouter();
return ( return (
<div className={`flex ${isMobileView ? 'flex-col' : 'flex-row'} bg-gray-900 text-white m-4 mx-14 rounded-lg ${isMobileView ? 'h-auto' : 'h-[620px]'}`}> <div className={`flex ${isMobileView ? 'flex-col' : 'flex-row'} bg-gray-900 text-white m-4 mx-14 rounded-lg ${isMobileView ? 'h-auto' : 'h-[620px]'} ${isMobileView ? 'w-full mx-0 ml-0 mt-0' : null}`}>
<div className={isMobileView ? 'w-full' : 'lg:w-2/3 relative'}> <div className={isMobileView ? 'w-full' : 'lg:w-2/3 relative'}>
<Image <Image
src={returnImageProxy(selectedPromotion.image)} src={returnImageProxy(selectedPromotion.image)}
@ -81,37 +81,37 @@ const InteractivePromotionalCarousel = () => {
{selectedPromotion.title} {selectedPromotion.title}
</h2> </h2>
<p className="text-lg text-white drop-shadow-md">{selectedPromotion.description}</p> <p className="text-lg text-white drop-shadow-md">{selectedPromotion.description}</p>
<div className="flex flex-row gap-2 mt-4"> <div className={`flex flex-row gap-2 mt-4 ${isMobileView ? 'flex-col' : ''}`}>
{ {
(() => { (() => {
switch (selectedPromotion.category) { switch (selectedPromotion.category) {
case "PLEBDEVS": case "PLEBDEVS":
return ( return (
<> <>
<GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="py-2 font-semibold" size="small" outlined /> <GenericButton onClick={() => router.push('/about')} severity="success" icon={<i className="pi pi-question-circle pr-2 pb-[2px]" />} label="Learn More" className="w-fit py-2 font-semibold" size="small" outlined />
<GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined /> <GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="w-fit py-2 font-semibold" size="small" outlined />
<GenericButton onClick={() => router.push('/content?tag=all')} severity="primary" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="py-2 font-semibold" size="small" outlined /> <GenericButton onClick={() => router.push('/content?tag=all')} severity="primary" icon={<i className="pi pi-eye pr-2" />} label="View all content" className="w-fit py-2 font-semibold" size="small" outlined />
</> </>
); );
case "COURSES": case "COURSES":
return ( return (
<GenericButton onClick={() => router.push('/content?tag=courses')} icon={<i className="pi pi-book pr-2 pb-1" />} label="View All Courses" className="py-2 font-semibold" size="small" outlined /> <GenericButton onClick={() => router.push('/content?tag=courses')} icon={<i className="pi pi-book pr-2 pb-1" />} label="View All Courses" className="w-fit py-2 font-semibold" size="small" outlined />
); );
case "WORKSHOPS": case "WORKSHOPS":
return ( return (
<GenericButton onClick={() => router.push('/content?tag=workshops')} icon={<i className="pi pi-video pr-2" />} label="View All Workshops" className="py-2 font-semibold" size="small" outlined /> <GenericButton onClick={() => router.push('/content?tag=workshops')} icon={<i className="pi pi-video pr-2" />} label="View All Workshops" className="w-fit py-2 font-semibold" size="small" outlined />
); );
case "RESOURCES": case "RESOURCES":
return ( return (
<GenericButton onClick={() => router.push('/content?tag=resources')} icon={<i className="pi pi-file pr-2 pb-1" />} label="View All Resources" className="py-2 font-semibold" size="small" outlined /> <GenericButton onClick={() => router.push('/content?tag=resources')} icon={<i className="pi pi-file pr-2 pb-1" />} label="View All Resources" className="w-fit py-2 font-semibold" size="small" outlined />
); );
case "COMMUNITY": case "COMMUNITY":
return ( return (
<GenericButton onClick={() => router.push('/feed?channel=global')} icon={<i className="pi pi-users pr-2 pb-1" />} label="Open Community Feed" className="py-2 font-semibold" size="small" outlined /> <GenericButton onClick={() => router.push('/feed?channel=global')} icon={<i className="pi pi-users pr-2 pb-1" />} label="Open Community Feed" className="w-fit py-2 font-semibold" size="small" outlined />
); );
case "LIGHTNING / NOSTR": case "LIGHTNING / NOSTR":
return ( return (
<GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="py-2 font-semibold" size="small" outlined /> <GenericButton onClick={() => router.push('/subscribe')} severity="warning" icon={<i className="pi pi-star pr-2 pb-1" />} label="Subscribe" className="w-fit py-2 font-semibold" size="small" outlined />
); );
default: default:
return null; return null;

9
src/components/content/carousels/ResourcesCarousel.js
View File

@ -34,7 +34,14 @@ export default function ResourcesCarousel() {
if (resources && resources.length > 0) { if (resources && resources.length > 0) {
const processedResources = resources.map(resource => parseEvent(resource)); const processedResources = resources.map(resource => parseEvent(resource));
setProcessedResources(processedResources); // Sort resources by created_at in descending order (most recent first)
const sortedResources = processedResources.sort((a, b) => b.created_at - a.created_at);
console.log("Sorted resources:", sortedResources);
setProcessedResources(sortedResources);
} else {
console.log('No resources fetched or empty array returned');
} }
} catch (error) { } catch (error) {
console.error('Error fetching resources:', error); console.error('Error fetching resources:', error);

9
src/components/content/carousels/WorkshopsCarousel.js
View File

@ -32,10 +32,13 @@ export default function WorkshopsCarousel() {
const fetch = async () => { const fetch = async () => {
try { try {
if (workshops && workshops.length > 0) { if (workshops && workshops.length > 0) {
console.log('workshops', workshops);
const processedWorkshops = workshops.map(workshop => parseEvent(workshop)); const processedWorkshops = workshops.map(workshop => parseEvent(workshop));
console.log('processedWorkshops', processedWorkshops);
setProcessedWorkshops(processedWorkshops); // Sort workshops by created_at in descending order (most recent first)
const sortedWorkshops = processedWorkshops.sort((a, b) => b.created_at - a.created_at);
console.log('Sorted workshops:', sortedWorkshops);
setProcessedWorkshops(sortedWorkshops);
} else { } else {
console.log('No workshops fetched or empty array returned'); console.log('No workshops fetched or empty array returned');
} }

11
src/components/profile/UserProfile.js
View File

@ -8,9 +8,12 @@ import { ProgressSpinner } from "primereact/progressspinner";
import PurchasedListItem from "@/components/profile/PurchasedListItem"; import PurchasedListItem from "@/components/profile/PurchasedListItem";
import { useNDKContext } from "@/context/NDKContext"; import { useNDKContext } from "@/context/NDKContext";
import { formatDateTime } from "@/utils/time"; import { formatDateTime } from "@/utils/time";
import { Tooltip } from "primereact/tooltip";
import { nip19 } from "nostr-tools";
import Image from "next/image"; import Image from "next/image";
import SubscribeModal from "@/components/profile/subscription/SubscribeModal"; import SubscribeModal from "@/components/profile/subscription/SubscribeModal";
import useWindowWidth from "@/hooks/useWindowWidth"; import useWindowWidth from "@/hooks/useWindowWidth";
import { useToast } from "@/hooks/useToast";
const UserProfile = () => { const UserProfile = () => {
const windowWidth = useWindowWidth(); const windowWidth = useWindowWidth();
@ -18,6 +21,7 @@ const UserProfile = () => {
const { data: session } = useSession(); const { data: session } = useSession();
const { returnImageProxy } = useImageProxy(); const { returnImageProxy } = useImageProxy();
const { ndk, addSigner } = useNDKContext(); const { ndk, addSigner } = useNDKContext();
const { showToast } = useToast();
const menu = useRef(null); const menu = useRef(null);
useEffect(() => { useEffect(() => {
@ -31,14 +35,14 @@ const UserProfile = () => {
label: "Edit", label: "Edit",
icon: "pi pi-pencil", icon: "pi pi-pencil",
command: () => { command: () => {
// Add your edit functionality here showToast("warn", "Alert", "This feature is not yet implemented");
}, },
}, },
{ {
label: "Delete", label: "Delete",
icon: "pi pi-trash", icon: "pi pi-trash",
command: () => { command: () => {
// Add your delete functionality here showToast("warn", "Alert", "This feature is not yet implemented");
}, },
}, },
]; ];
@ -77,7 +81,8 @@ const UserProfile = () => {
{user.username || user?.email || "Anon"} {user.username || user?.email || "Anon"}
</h1> </h1>
<h2 className="text-center text-xl my-2 truncate max-tab:px-4 max-mob:px-4"> <h2 className="text-center text-xl my-2 truncate max-tab:px-4 max-mob:px-4">
{user.pubkey} <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> </h2>
{user && ( {user && (
<SubscribeModal user={user} /> <SubscribeModal user={user} />

5
src/components/profile/UserSettings.js
View File

@ -10,7 +10,9 @@ import useWindowWidth from "@/hooks/useWindowWidth";
import Image from "next/image"; import Image from "next/image";
import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect"; import BitcoinConnectButton from "@/components/bitcoinConnect/BitcoinConnect";
import { Panel } from "primereact/panel"; import { Panel } from "primereact/panel";
import { nip19 } from "nostr-tools";
import { InputText } from "primereact/inputtext"; import { InputText } from "primereact/inputtext";
import { Tooltip } from "primereact/tooltip";
import { useToast } from "@/hooks/useToast"; import { useToast } from "@/hooks/useToast";
const UserSettings = () => { const UserSettings = () => {
@ -162,7 +164,8 @@ const UserSettings = () => {
{user.username || user?.email || "Anon"} {user.username || user?.email || "Anon"}
</h1> </h1>
<h2 className="text-center text-xl my-2 truncate max-tab:px-4 max-mob:px-4"> <h2 className="text-center text-xl my-2 truncate max-tab:px-4 max-mob:px-4">
{user.pubkey} <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> </h2>
<div className="flex flex-col w-1/2 mx-auto my-8 mb-12 justify-between items-center"> <div className="flex flex-col w-1/2 mx-auto my-8 mb-12 justify-between items-center">
<h2 className="text-xl my-2">Connect Your Lightning Wallet</h2> <h2 className="text-xl my-2">Connect Your Lightning Wallet</h2>