From 6952a12d1a33cb5ebe16b899203038b950bb2912 Mon Sep 17 00:00:00 2001 From: austinkelsay Date: Tue, 26 Mar 2024 18:14:32 -0500 Subject: [PATCH] Start on UserContent --- .../carousels}/CoursesCarousel.js | 38 +------ .../carousels}/WorkshopsCarousel.js | 38 +------ .../carousels/templates/CourseTemplate.js | 43 ++++++++ .../carousels/templates/ResourceTemplate.js | 43 ++++++++ .../carousels/templates/WorkshopTemplate.js | 43 ++++++++ src/components/content/lists/ContentList.js | 24 ++++ .../content/lists/ContentListItem.js | 40 +++++++ src/components/forms/CourseForm.js | 2 +- src/components/profile/UserContent.js | 104 ++++++++++++++++++ src/pages/api/drafts/all/[slug].js | 2 +- src/pages/index.js | 4 +- src/pages/profile.js | 19 +--- src/styles/globals.css | 2 +- 13 files changed, 308 insertions(+), 94 deletions(-) rename src/components/{courses => content/carousels}/CoursesCarousel.js (59%) rename src/components/{workshops => content/carousels}/WorkshopsCarousel.js (58%) create mode 100644 src/components/content/carousels/templates/CourseTemplate.js create mode 100644 src/components/content/carousels/templates/ResourceTemplate.js create mode 100644 src/components/content/carousels/templates/WorkshopTemplate.js create mode 100644 src/components/content/lists/ContentList.js create mode 100644 src/components/content/lists/ContentListItem.js create mode 100644 src/components/profile/UserContent.js diff --git a/src/components/courses/CoursesCarousel.js b/src/components/content/carousels/CoursesCarousel.js similarity index 59% rename from src/components/courses/CoursesCarousel.js rename to src/components/content/carousels/CoursesCarousel.js index 85459f8..e957f74 100644 --- a/src/components/courses/CoursesCarousel.js +++ b/src/components/content/carousels/CoursesCarousel.js @@ -1,11 +1,10 @@ import React, { useState, useEffect, use } from 'react'; import { Carousel } from 'primereact/carousel'; import { useRouter } from 'next/router'; -import Image from 'next/image'; import { useImageProxy } from '@/hooks/useImageProxy'; import { parseEvent } from '@/utils/nostr'; -import { formatTimestampToHowLongAgo } from '@/utils/time'; import { useNostr } from '@/hooks/useNostr'; +import CourseTemplate from '@/components/content/carousels/templates/CourseTemplate'; const responsiveOptions = [ { @@ -80,43 +79,10 @@ export default function CoursesCarousel() { setProcessedCourses(processCourses); }, [courses]); - const courseTemplate = (course) => { - const { width, height } = calculateImageDimensions(); - return ( -
router.push(`/details/${course.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg"> -
- resource thumbnail -
-

{course.title}

-

- {course.summary} -

-

Published: {formatTimestampToHowLongAgo(course.published_at)}

-
-
-
- ); - }; - return ( <>

courses

- + ); } diff --git a/src/components/workshops/WorkshopsCarousel.js b/src/components/content/carousels/WorkshopsCarousel.js similarity index 58% rename from src/components/workshops/WorkshopsCarousel.js rename to src/components/content/carousels/WorkshopsCarousel.js index 2425cbe..275514d 100644 --- a/src/components/workshops/WorkshopsCarousel.js +++ b/src/components/content/carousels/WorkshopsCarousel.js @@ -1,11 +1,10 @@ import React, { useState, useEffect } from 'react'; import { Carousel } from 'primereact/carousel'; import { useRouter } from 'next/router'; -import Image from 'next/image'; import { useNostr } from '@/hooks/useNostr'; import { useImageProxy } from '@/hooks/useImageProxy'; import { parseEvent } from '@/utils/nostr'; -import { formatTimestampToHowLongAgo } from '@/utils/time'; +import WorkshopTemplate from '@/components/content/carousels/templates/WorkshopTemplate'; const responsiveOptions = [ { @@ -78,43 +77,10 @@ export default function WorkshopsCarousel() { setProcessedWorkshops(processWorkshops); }, [workshops]); - const workshopTemplate = (workshop) => { - const { width, height } = calculateImageDimensions(); - return ( -
router.push(`/details/${workshop.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg"> -
- resource thumbnail -
-

{workshop.title}

-

- {workshop.summary} -

-

Published: {formatTimestampToHowLongAgo(workshop.published_at)}

-
-
-
- ); - }; - return ( <>

workshops

- + ); } diff --git a/src/components/content/carousels/templates/CourseTemplate.js b/src/components/content/carousels/templates/CourseTemplate.js new file mode 100644 index 0000000..6fff862 --- /dev/null +++ b/src/components/content/carousels/templates/CourseTemplate.js @@ -0,0 +1,43 @@ +import React from "react"; +import Image from "next/image"; +import { useRouter } from "next/router"; +import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions"; +import { formatTimestampToHowLongAgo } from "@/utils/time"; +import { useImageProxy } from "@/hooks/useImageProxy"; + +const CourseTemplate = (course) => { + const router = useRouter(); + const { returnImageProxy } = useImageProxy(); + const { width, height } = useResponsiveImageDimensions(); + return ( +
router.push(`/details/${course.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg"> +
+ resource thumbnail +
+

{course.title}

+

+ {course.summary} +

+

Published: {formatTimestampToHowLongAgo(course.published_at)}

+
+
+
+ ); +}; + +export default CourseTemplate; \ No newline at end of file diff --git a/src/components/content/carousels/templates/ResourceTemplate.js b/src/components/content/carousels/templates/ResourceTemplate.js new file mode 100644 index 0000000..1bfa763 --- /dev/null +++ b/src/components/content/carousels/templates/ResourceTemplate.js @@ -0,0 +1,43 @@ +import React from "react"; +import Image from "next/image"; +import { useRouter } from "next/router"; +import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions"; +import { formatTimestampToHowLongAgo } from "@/utils/time"; +import { useImageProxy } from "@/hooks/useImageProxy"; + +const ResourceTemplate = (resource) => { + const router = useRouter(); + const { returnImageProxy } = useImageProxy(); + const { width, height } = useResponsiveImageDimensions(); + return ( +
router.push(`/details/${resource.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg"> +
+ resource thumbnail +
+

{resource.title}

+

+ {resource.summary} +

+

Published: {formatTimestampToHowLongAgo(resource.published_at)}

+
+
+
+ ); +}; + +export default ResourceTemplate; \ No newline at end of file diff --git a/src/components/content/carousels/templates/WorkshopTemplate.js b/src/components/content/carousels/templates/WorkshopTemplate.js new file mode 100644 index 0000000..b7df7d3 --- /dev/null +++ b/src/components/content/carousels/templates/WorkshopTemplate.js @@ -0,0 +1,43 @@ +import React from "react"; +import Image from "next/image"; +import { useRouter } from "next/router"; +import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions"; +import { formatTimestampToHowLongAgo } from "@/utils/time"; +import { useImageProxy } from "@/hooks/useImageProxy"; + +const WorkshopTemplate = (workshop) => { + const router = useRouter(); + const { returnImageProxy } = useImageProxy(); + const { width, height } = useResponsiveImageDimensions(); + return ( +
router.push(`/details/${workshop.id}`)} className="flex flex-col items-center mx-auto px-4 cursor-pointer mt-8 rounded-md shadow-lg"> +
+ workshop thumbnail +
+

{workshop.title}

+

+ {workshop.summary} +

+

Published: {formatTimestampToHowLongAgo(workshop.published_at)}

+
+
+
+ ); +}; + +export default WorkshopTemplate; \ No newline at end of file diff --git a/src/components/content/lists/ContentList.js b/src/components/content/lists/ContentList.js new file mode 100644 index 0000000..644bec1 --- /dev/null +++ b/src/components/content/lists/ContentList.js @@ -0,0 +1,24 @@ +import React from "react"; +import { DataView } from 'primereact/dataview'; +import ContentListItem from "@/components/content/lists/ContentListItem"; + +const ContentList = ({content}) => { + const listTemplate = (items) => { + if (!items || items.length === 0) return null; + + let list = items.map((item, index) => { + return ContentListItem(item); + }); + + return
{list}
; + }; + + return ( + + ) +} + +export default ContentList; \ No newline at end of file diff --git a/src/components/content/lists/ContentListItem.js b/src/components/content/lists/ContentListItem.js new file mode 100644 index 0000000..40bdfe5 --- /dev/null +++ b/src/components/content/lists/ContentListItem.js @@ -0,0 +1,40 @@ +import React from "react"; +import Image from "next/image"; +import { Button } from "primereact/button"; +import { useImageProxy } from "@/hooks/useImageProxy"; +import { useRouter } from "next/router"; + +const ContentListItem = (content) => { + const { returnImageProxy } = useImageProxy(); + const router = useRouter(); + const isDraft = Object.keys(content).includes('type'); + + return ( +
+
+ content thumbnail +
+
{content.title}
+
+ {content.summary} +
+
+
+
+
+
+ ); +}; + +export default ContentListItem; \ No newline at end of file diff --git a/src/components/forms/CourseForm.js b/src/components/forms/CourseForm.js index 234801b..e357adb 100644 --- a/src/components/forms/CourseForm.js +++ b/src/components/forms/CourseForm.js @@ -17,7 +17,7 @@ const CourseForm = () => { const [coverImage, setCoverImage] = useState(''); const [topics, setTopics] = useState(['']); - const {showToast} = useToast(); + const { showToast } = useToast(); const handleSubmit = (e) => { e.preventDefault(); diff --git a/src/components/profile/UserContent.js b/src/components/profile/UserContent.js new file mode 100644 index 0000000..cc618bf --- /dev/null +++ b/src/components/profile/UserContent.js @@ -0,0 +1,104 @@ +import React, { useState, useEffect } from "react"; +import axios from "axios"; +import { useRouter } from "next/router"; +import { Button } from "primereact/button"; +import MenuTab from "@/components/menutab/MenuTab"; +import { useLocalStorageWithEffect } from "@/hooks/useLocalStorage"; +import { useImageProxy } from "@/hooks/useImageProxy"; +import useResponsiveImageDimensions from "@/hooks/useResponsiveImageDimensions"; +import ContentList from "@/components/content/lists/ContentList"; + +const fakeProducts = [ + { + id: 'p1', + name: 'Eco-Friendly Water Bottle', + image: 'eco-friendly-water-bottle.jpg', + category: 'Kitchenware', + rating: 4, + price: 19.99, + inventoryStatus: 'INSTOCK' + }, + { + id: 'p2', + name: 'Wireless Bluetooth Headphones', + image: 'wireless-bluetooth-headphones.jpg', + category: 'Electronics', + rating: 5, + price: 89.99, + inventoryStatus: 'LOWSTOCK' + }, + { + id: 'p3', + name: 'Organic Cotton T-Shirt', + image: 'organic-cotton-t-shirt.jpg', + category: 'Apparel', + rating: 3, + price: 29.99, + inventoryStatus: 'OUTOFSTOCK' + }, + { + id: 'p4', + name: 'Smartwatch Fitness Tracker', + image: 'smartwatch-fitness-tracker.jpg', + category: 'Wearables', + rating: 4, + price: 49.99, + inventoryStatus: 'INSTOCK' + }, + { + id: 'p5', + name: 'Sustainable Bamboo Sunglasses', + image: 'sustainable-bamboo-sunglasses.jpg', + category: 'Accessories', + rating: 4, + price: 34.99, + inventoryStatus: 'INSTOCK' + } + ]; + +const UserContent = () => { + const [activeIndex, setActiveIndex] = useState(0); + const [content, setContent] = useState([]); + + const [user, setUser] = useLocalStorageWithEffect('user', {}); + const { returnImageProxy } = useImageProxy(); + const { width, height } = useResponsiveImageDimensions(); + + const router = useRouter(); + + const homeItems = [ + { label: 'Publised', icon: 'pi pi-verified' }, + { label: 'Drafts', icon: 'pi pi-file-edit' }, + { label: 'Resources', icon: 'pi pi-book' }, + { label: 'Workshops', icon: 'pi pi-video' }, + { label: 'Courses', icon: 'pi pi-desktop' } + ]; + + useEffect(() => { + axios.get(`/api/drafts/all/${user.id}`) + .then(res => { + console.log(res.data); + setContent(res.data); + }) + .catch(err => { + console.error(err); + }); + }, [user]); + + return ( +
+
+

Your Content

+
+
+ +
+
+ +
+
+ ) +} + +export default UserContent; \ No newline at end of file diff --git a/src/pages/api/drafts/all/[slug].js b/src/pages/api/drafts/all/[slug].js index 83d174e..8be5921 100644 --- a/src/pages/api/drafts/all/[slug].js +++ b/src/pages/api/drafts/all/[slug].js @@ -5,7 +5,7 @@ const { id } = req.query; if (req.method === 'GET') { try { - const resource = await getAllDraftsByUserId(parseInt(id)); + const resource = await getAllDraftsByUserId(id); if (resource) { res.status(200).json(resource); } else { diff --git a/src/pages/index.js b/src/pages/index.js index 0245acd..2a74729 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,7 +1,7 @@ import Head from 'next/head' import React from 'react'; -import CoursesCarousel from '@/components/courses/CoursesCarousel' -import WorkshopsCarousel from '@/components/workshops/WorkshopsCarousel' +import CoursesCarousel from '@/components/content/carousels/CoursesCarousel' +import WorkshopsCarousel from '@/components/content/carousels/WorkshopsCarousel' import HeroBanner from '@/components/banner/HeroBanner'; export default function Home() { diff --git a/src/pages/profile.js b/src/pages/profile.js index 00f15af..41c6829 100644 --- a/src/pages/profile.js +++ b/src/pages/profile.js @@ -6,22 +6,13 @@ import { Column } from 'primereact/column'; import { useImageProxy } from "@/hooks/useImageProxy"; import { useRouter } from "next/router"; import { useLocalStorageWithEffect } from "@/hooks/useLocalStorage"; -import MenuTab from "@/components/menutab/MenuTab"; +import UserContent from '@/components/profile/UserContent'; import Image from "next/image"; const Profile = () => { - const [activeIndex, setActiveIndex] = useState(0); const [user, setUser] = useLocalStorageWithEffect('user', {}); const { returnImageProxy } = useImageProxy(); const menu = useRef(null); - const router = useRouter(); - - const homeItems = [ - { label: 'All', icon: 'pi pi-star' }, - { label: 'Resources', icon: 'pi pi-book' }, - { label: 'Workshops', icon: 'pi pi-video' }, - { label: 'Courses', icon: 'pi pi-desktop' } - ]; const purchases = [ // { @@ -106,13 +97,7 @@ const Profile = () => { -
-

Your Content

-
-
- -
+ ) ) diff --git a/src/styles/globals.css b/src/styles/globals.css index 5889fdd..ea53104 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -79,4 +79,4 @@ h3 { .p-tabmenu .p-tabmenu-nav::-webkit-scrollbar { display: none; -} +} \ No newline at end of file