From 3f8fd14fd06ce4897809f210db252c83f52b31af Mon Sep 17 00:00:00 2001 From: Nwonye-Michael <49059581+Nwonye-Michael@users.noreply.github.com> Date: Sun, 22 Oct 2023 21:39:26 +0100 Subject: [PATCH 1/2] fetached data for the mentee forums --- .../mentee-community/[forum]/page.tsx | 114 ++++++------ .../mentee-community/data.ts | 7 + .../mentee-community/page.tsx | 17 +- .../mentor-community/[forum]/page.tsx | 121 ++++++------- .../mentor-community/page.tsx | 36 +++- .../Community/CreateDiscussionModal.tsx | 169 ++++++++++++++++++ components/Community/ForumCard.tsx | 2 +- components/Community/discussion-card.tsx | 15 +- .../Community/startdiscussion-modal.tsx | 27 ++- lib/apiHelper.ts | 55 +++++- 10 files changed, 410 insertions(+), 153 deletions(-) create mode 100644 components/Community/CreateDiscussionModal.tsx diff --git a/app/(mentee)/(dashboard-route)/mentee-community/[forum]/page.tsx b/app/(mentee)/(dashboard-route)/mentee-community/[forum]/page.tsx index 59c99b74..a7099dfa 100644 --- a/app/(mentee)/(dashboard-route)/mentee-community/[forum]/page.tsx +++ b/app/(mentee)/(dashboard-route)/mentee-community/[forum]/page.tsx @@ -1,17 +1,42 @@ "use client"; -import { Suspense, useState } from "react"; +import { Suspense, useEffect, useState } from "react"; import Image from "next/image"; import SearchCommunitySearchbar from "@/components/Community/searchcommunity-searchbar"; -import { discussionComms, discussionCommunitites } from "../data"; +import { + Community, + Community2, + discussionComms, + discussionCommunitites, +} from "../data"; +import { images } from "@/lib/constants/index"; import { MsgEditIcon } from "@/public/assets/Icons/mentor-communities"; import DiscussionCard from "@/components/Community/discussion-card"; import LoadingSpinner from "@/components/loaders/LoadingSpinner"; +import { getSingleForums, post, postSingleForum } from "@/lib/apiHelper"; +import { membersCardAvatar } from "@/public"; const DiscussionsPage = ({ params }: { params: { forum: string } }) => { console.log(discussionCommunitites); + const [forum, setForum] = useState({ + slug: "", + name: "", + members: [], + description: "", + discussions: [], + } as Community); + useEffect(() => { + getSingleForums(setForum, params.forum); + // postSingleForum(roadsidedata); + }, [params.forum]); + + // const { members } = forum; + + // const memeberLenght = members?.length; + console.log("current forum", forum); + return ( }>
@@ -25,70 +50,38 @@ const DiscussionsPage = ({ params }: { params: { forum: string } }) => { {/* Info */}

- { - discussionCommunitites[params.forum as keyof discussionComms] - .name - } + {forum.name}

{/* Member info */} -
+
{/* Member Pfps */}
{/* image */} - {discussionCommunitites[ - params.forum as keyof discussionComms - ].members - .slice(0, 3) - .map((member, idx) => ( -
- Member -
- ))} + members{" "}
{/* Member count */} - - {`${ - discussionCommunitites[params.forum as keyof discussionComms] - .members.length - }`}{" "} - members + + {forum.members.length} members
{/* Comm description */}

{ - discussionCommunitites[params.forum as keyof discussionComms] - .description + // discussionCommunitites[params.forum as keyof discussionComms] + // .description + + forum?.description }

- {/* Start a discussion */} - {/* */} + {/* Join a discussion */}
{/* Discussion list */}
- {discussionCommunitites[ - params.forum as keyof discussionComms - ].discussions.map((item) => ( - // + {forum?.discussions.map((item) => ( ))}
+ + //
+ // {forum.description} + // {forum?.members?.length} + // members + //
); }; diff --git a/app/(mentee)/(dashboard-route)/mentee-community/data.ts b/app/(mentee)/(dashboard-route)/mentee-community/data.ts index 642ef2d3..217927fa 100644 --- a/app/(mentee)/(dashboard-route)/mentee-community/data.ts +++ b/app/(mentee)/(dashboard-route)/mentee-community/data.ts @@ -31,6 +31,13 @@ export type Community = { description: string; discussions: Discussion[]; }; +export type Community2 = { + slug: string; + name: string; + members: Member[]; + description: string; + discussion: Discussion[]; +}; export type discussionState = { discussionData: Community[]; setDiscussionData: Dispatch>; diff --git a/app/(mentee)/(dashboard-route)/mentee-community/page.tsx b/app/(mentee)/(dashboard-route)/mentee-community/page.tsx index c28fef70..d349fdb5 100644 --- a/app/(mentee)/(dashboard-route)/mentee-community/page.tsx +++ b/app/(mentee)/(dashboard-route)/mentee-community/page.tsx @@ -1,13 +1,21 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { DiscussionForums, MentorshipSessions } from "@/components/Community"; import SearchCommunitySearchbar from "@/components/Community/searchcommunity-searchbar"; -import { discussionCommunities } from "./data"; +import { Community, discussionCommunities } from "./data"; import SecondSearchCommunitySearchbar from "@/components/Community/searchcommunity-searchbar2"; import ProtectedRoute from "@/context/ProtectedRoute"; +import { getForums, postSingleForum } from "@/lib/apiHelper"; +import { images } from "@/lib/constants/index"; export default function MenteeCommunitiesPage() { + const [initialForums, setInitialForums] = useState([] as Community[]); + useEffect(() => { + getForums(setInitialForums); + }, []); + console.log(initialForums); + // set discussion data to a state const [discussionData, setDiscussionData] = useState(discussionCommunities); @@ -46,6 +54,11 @@ export default function MenteeCommunitiesPage() { discussionData={discussionData} setDiscussionData={setDiscussionData} /> + + {/* Free mentorship sessions */} diff --git a/app/(mentor)/(dashboard-mentor)/mentor-community/[forum]/page.tsx b/app/(mentor)/(dashboard-mentor)/mentor-community/[forum]/page.tsx index 65e8cd88..de0e80d7 100644 --- a/app/(mentor)/(dashboard-mentor)/mentor-community/[forum]/page.tsx +++ b/app/(mentor)/(dashboard-mentor)/mentor-community/[forum]/page.tsx @@ -1,24 +1,48 @@ "use client"; -import { Suspense, useState } from "react"; +import { Suspense, useEffect, useState } from "react"; import Image from "next/image"; import SearchCommunitySearchbar from "@/components/Community/searchcommunity-searchbar"; -import { discussionComms, discussionCommunitites } from "../data"; +import { Community, discussionComms, discussionCommunitites } from "../data"; import { MsgEditIcon } from "@/public/assets/Icons/mentor-communities"; import DiscussionCard from "@/components/Community/discussion-card"; import { StartDiscussionModal } from "@/components/Community"; import LoadingSpinner from "@/components/loaders/LoadingSpinner"; +import { getSingleForums } from "@/lib/apiHelper"; +import { membersCardAvatar } from "@/public"; +import { images } from "@/lib/constants/index"; +import CreateDiscussionModal from "@/components/Community/CreateDiscussionModal"; const DiscussionsPage = ({ params }: { params: { forum: string } }) => { const [isModalOpen, setIsModalOpen] = useState(false); console.log(discussionCommunitites); + const [forum, setForum] = useState({ + slug: "", + name: "", + members: [], + description: "", + discussions: [], + } as Community); + useEffect(() => { + getSingleForums(setForum, params.forum); + // postSingleForum(roadsidedata); + }, [params.forum]); + + // const { members } = forum; + + // const memeberLenght = members?.length; + console.log("current forum", forum); + return ( }>
- {isModalOpen && ( + {/* {isModalOpen && ( + )} */} + {isModalOpen && ( + setIsModalOpen(false)} /> )}
@@ -32,100 +56,59 @@ const DiscussionsPage = ({ params }: { params: { forum: string } }) => { {/* Info */}

- { - discussionCommunitites[params.forum as keyof discussionComms] - .name - } + {forum.name}

{/* Member info */} -
+
{/* Member Pfps */}
{/* image */} - {discussionCommunitites[ - params.forum as keyof discussionComms - ].members - .slice(0, 3) - .map((member, idx) => ( -
- Member -
- ))} + members{" "}
{/* Member count */} - - {`${ - discussionCommunitites[ - params.forum as keyof discussionComms - ].members.length - }`}{" "} - members + + {forum.members.length} members
{/* Comm description */}

{ - discussionCommunitites[params.forum as keyof discussionComms] - .description + // discussionCommunitites[params.forum as keyof discussionComms] + // .description + + forum?.description }

{/* Start a discussion */} - {/* */} -
{/* Discussion list */}
- {discussionCommunitites[ - params.forum as keyof discussionComms - ].discussions.map((item, ifx) => ( - // + {forum?.discussions.map((item) => ( ))}
diff --git a/app/(mentor)/(dashboard-mentor)/mentor-community/page.tsx b/app/(mentor)/(dashboard-mentor)/mentor-community/page.tsx index c28fef70..7ed9a224 100644 --- a/app/(mentor)/(dashboard-mentor)/mentor-community/page.tsx +++ b/app/(mentor)/(dashboard-mentor)/mentor-community/page.tsx @@ -1,15 +1,42 @@ "use client"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { DiscussionForums, MentorshipSessions } from "@/components/Community"; import SearchCommunitySearchbar from "@/components/Community/searchcommunity-searchbar"; -import { discussionCommunities } from "./data"; +import { Community, discussionCommunities } from "./data"; import SecondSearchCommunitySearchbar from "@/components/Community/searchcommunity-searchbar2"; import ProtectedRoute from "@/context/ProtectedRoute"; +import { getForums } from "@/lib/apiHelper"; export default function MenteeCommunitiesPage() { + const [initialForums, setInitialForums] = useState([ + { + slug: "", + name: "", + members: [], + description: "", + discussions: [], + }, + ] as Community[]); + + const [discussionData, setDiscussionData] = useState([ + { + slug: "", + name: "", + members: [], + description: "", + discussions: [], + }, + ] as Community[]); + + useEffect(() => { + getForums(setInitialForums); + + getForums(setDiscussionData); + }, []); + console.log(initialForums); + // set discussion data to a state - const [discussionData, setDiscussionData] = useState(discussionCommunities); // filter part const [q, setQ] = useState(""); @@ -17,7 +44,7 @@ export default function MenteeCommunitiesPage() { const filterDiscussions = () => { if (q) { // console.log("Search is on. Query: ", q); - const filteredSliderInfo = discussionCommunities.filter((item) => + const filteredSliderInfo = initialForums.filter((item) => item.name.toLowerCase().includes(q.toLowerCase()) ); @@ -42,6 +69,7 @@ export default function MenteeCommunitiesPage() { />
{/* Discussion Forums */} + void }; +const CreateDiscussionModal: React.FC = ({ onClose }) => { + function removeSpacesAndConvertToLower(inputString: string) { + // Remove spaces with regex and convert to lowercase + const result = inputString.replace(/\s+/g, "").toLowerCase(); + return result; + } + // Define state variables for form inputs and image + + const [topic, setTopic] = useState(""); + const [note, setNote] = useState(""); + const [image, setImage] = useState(null); // Store the selected image as a File object + + const handleImageChange = (e: React.ChangeEvent) => { + const selectedImage = e.target.files?.[0]; + if (selectedImage) { + setImage(selectedImage); + } + }; + + const handlePostDiscussion = () => { + // Here, you can use the 'image' state to access the selected image + // and send it to the backend, e.g., using FormData. + + // For example, to create a FormData object and append the image: + + const dataPost: Community = { + slug: removeSpacesAndConvertToLower(topic), + name: topic, + description: note, + members: [ + { + name: "Member 1", + isMentor: true, + profilePhotoUrl: "url-to-member-1-photo", + }, + ], + discussions: [], + }; + console.log(dataPost); + + // Now, you can send 'formData' to the backend using an HTTP request. + // This will send the image data along with other form data. + postSingleForum(dataPost); + + setTopic(""); + setNote(""); + // Close the modal + onClose(); + }; + return ( +
+
+
+

+ Start discussion +

+ +
+ +
+
+ +
+ {" "} + { + setTopic(e.target.value); + }} + /> +
+
+
+ +
+ {" "} +