Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fetchdata/feat/mentee community #299

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

Fetchdata/feat/mentee community #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3f8fd14
fetached data
Nwonye-Michael Oct 22, 2023
3ca0a3d
Merge branch 'dev' of https://github.com/hngx-org/Mentor--Me into fet…
Nwonye-Michael Oct 22, 2023
8714480
final commit???
Nwonye-Michael Oct 22, 2023
aed9230
Merge branch 'dev' into fetchdata/feat/Mentee-community
Nwonye-Michael Oct 22, 2023
84e85c0
Merge branch 'dev' into fetchdata/feat/Mentee-community
0laolu Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 51 additions & 63 deletions app/(mentee)/(dashboard-route)/mentee-community/[forum]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Suspense fallback={<LoadingSpinner />}>
<section>
Expand All @@ -25,70 +50,38 @@ const DiscussionsPage = ({ params }: { params: { forum: string } }) => {
{/* Info */}
<div className="flex flex-col gap-2">
<h1 className="font-bold text-[1.125rem] font-Hanken md:text-[2rem]">
{
discussionCommunitites[params.forum as keyof discussionComms]
.name
}
{forum.name}
</h1>
{/* Member info */}
<div className="flex">
<div className="flex gap-1 ">
{/* Member Pfps */}
<div className="flex items-center">
{/* image */}
{discussionCommunitites[
params.forum as keyof discussionComms
].members
.slice(0, 3)
.map((member, idx) => (
<div
className={`w-[1.5rem] border-solid rounded-full overflow-hidden border-2 border-NeutalBase relative ${
idx === 1 ? "right-3" : idx === 2 ? "right-6" : ""
} ${idx === 1 ? "-z-10" : idx === 2 ? "-z-20" : ""}`}
key={member.name}
>
<Image
src={
member.profilePhotoUrl !== undefined // could simply use non-null assertion operator but this is safer
? member.profilePhotoUrl
: ""
}
className="object-cover aspect-square"
alt="Member"
/>
</div>
))}
<Image
alt="members"
src={membersCardAvatar}
width={36}
height={20}
className="flex xl:h-6 xl:w-[56] h-4 w-9 lg:h-[22px] lg:w-[51px] "
/>{" "}
</div>
{/* Member count */}
<span className=" md:text-base relative font-medium text-Accent1 font-Hanken right-5">
{`${
discussionCommunitites[params.forum as keyof discussionComms]
.members.length
}`}{" "}
members
<span className=" md:text-base relative font-medium text-Accent1 font-Hanken ">
{forum.members.length} members
</span>
</div>
{/* Comm description */}
<p className="text-Neutral60 font-Hanken md:text-[1.125rem] max-w-[680px]">
{
discussionCommunitites[params.forum as keyof discussionComms]
.description
// discussionCommunitites[params.forum as keyof discussionComms]
// .description

forum?.description
}
</p>
</div>

{/* Start a discussion */}
{/* <button
type="button"
onClick={() => setIsModalOpen((p) => !p)}
className="mt-3 px-12 py-4 md:py-[1.125rem] text-white bg-NeutalBase rounded-lg font-Inter hover:bg-Neutral60 cursor-pointer md:flex gap-3 items-center"
>
<span className="hidden md:block">
<MsgEditIcon />
</span>
<span className="text-[.875rem] font-Hanken font-semibold">
Start a discussion
</span>
</button> */}
{/* Join a discussion */}

<button
type="button"
Expand All @@ -99,28 +92,23 @@ const DiscussionsPage = ({ params }: { params: { forum: string } }) => {
</section>
{/* Discussion list */}
<section className="p-8 pb-[3rem] flex flex-col gap-4 md:p-14">
{discussionCommunitites[
params.forum as keyof discussionComms
].discussions.map((item) => (
// <BigDiscussionCard
// mentor={item.author.isMentor}
// name={item.author.name}
// title={item.topic}
// desc={item.note}
// heroCard={item.imageUrl}
// image={item.author.profilePhotoUrl}
// />
{forum?.discussions.map((item) => (
<DiscussionCard
author={item.author}
description={item.note}
title={item.topic}
key={item.author.name}
image={item.imageUrl}
image={images.DiscussionPhoto}
/>
))}
</section>
</section>
</Suspense>

// <div>
// {forum.description}
// {forum?.members?.length}
// members
// </div>
);
};

Expand Down
7 changes: 7 additions & 0 deletions app/(mentee)/(dashboard-route)/mentee-community/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<SetStateAction<Community[]>>;
Expand Down
17 changes: 15 additions & 2 deletions app/(mentee)/(dashboard-route)/mentee-community/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);

Expand Down Expand Up @@ -46,6 +54,11 @@ export default function MenteeCommunitiesPage() {
discussionData={discussionData}
setDiscussionData={setDiscussionData}
/>

<DiscussionForums
discussionData={initialForums}
setDiscussionData={setInitialForums}
/>
{/* Free mentorship sessions */}
<MentorshipSessions />
</section>
Expand Down
121 changes: 52 additions & 69 deletions app/(mentor)/(dashboard-mentor)/mentor-community/[forum]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Suspense fallback={<LoadingSpinner />}>
<section>
{isModalOpen && (
{/* {isModalOpen && (
<StartDiscussionModal setIsModalOpen={setIsModalOpen} />
)} */}
{isModalOpen && (
<CreateDiscussionModal onClose={() => setIsModalOpen(false)} />
)}

<section>
Expand All @@ -32,100 +56,59 @@ const DiscussionsPage = ({ params }: { params: { forum: string } }) => {
{/* Info */}
<div className="flex flex-col gap-2">
<h1 className="font-bold text-[1.125rem] font-Hanken md:text-[2rem]">
{
discussionCommunitites[params.forum as keyof discussionComms]
.name
}
{forum.name}
</h1>
{/* Member info */}
<div className="flex">
<div className="flex gap-1 ">
{/* Member Pfps */}
<div className="flex items-center">
{/* image */}
{discussionCommunitites[
params.forum as keyof discussionComms
].members
.slice(0, 3)
.map((member, idx) => (
<div
className={`w-[1.5rem] border-solid rounded-full overflow-hidden border-2 border-NeutalBase relative ${
idx === 1 ? "right-3" : idx === 2 ? "right-6" : ""
} ${idx === 1 ? "-z-10" : idx === 2 ? "-z-20" : ""}`}
key={member.name}
>
<Image
src={
member.profilePhotoUrl !== undefined // could simply use non-null assertion operator but this is safer
? member.profilePhotoUrl
: ""
}
className="object-cover aspect-square"
alt="Member"
/>
</div>
))}
<Image
alt="members"
src={membersCardAvatar}
width={36}
height={20}
className="flex xl:h-6 xl:w-[56] h-4 w-9 lg:h-[22px] lg:w-[51px] "
/>{" "}
</div>
{/* Member count */}
<span className=" md:text-base relative font-medium text-Accent1 font-Hanken right-5">
{`${
discussionCommunitites[
params.forum as keyof discussionComms
].members.length
}`}{" "}
members
<span className=" md:text-base relative font-medium text-Accent1 font-Hanken ">
{forum.members.length} members
</span>
</div>
{/* Comm description */}
<p className="text-Neutral60 font-Hanken md:text-[1.125rem] max-w-[680px]">
{
discussionCommunitites[params.forum as keyof discussionComms]
.description
// discussionCommunitites[params.forum as keyof discussionComms]
// .description

forum?.description
}
</p>
</div>

{/* Start a discussion */}
{/* <button
type="button"
onClick={() => setIsModalOpen((p) => !p)}
className="mt-3 px-12 py-4 md:py-[1.125rem] text-white bg-NeutalBase rounded-lg font-Inter hover:bg-Neutral60 cursor-pointer md:flex gap-3 items-center"
>
<span className="hidden md:block">
<MsgEditIcon />
</span>
<span className="text-[.875rem] font-Hanken font-semibold">
Start a discussion
</span>
</button> */}

<button
type="button"
className="text-[10px] whitespace-nowrap px-[40px] py-[16px] text-white border bg-NeutalBase flex items-center gap-x-1 rounded-[8px]"
onClick={() => setIsModalOpen((p) => !p)}
onClick={() => setIsModalOpen(true)}
className="mt-3 px-12 py-4 md:py-[1.125rem] text-white bg-NeutalBase rounded-lg font-Inter hover:bg-Neutral60 cursor-pointer md:flex gap-3 items-center"
>
<MsgEditIcon />
Start a disscussion
<span className="hidden md:block">
<MsgEditIcon />
</span>
<span className="text-[.875rem] font-Hanken font-semibold">
Start a discussion
</span>
</button>
</section>
{/* Discussion list */}
<section className="p-8 pb-[3rem] flex flex-col gap-4 md:p-14">
{discussionCommunitites[
params.forum as keyof discussionComms
].discussions.map((item, ifx) => (
// <BigDiscussionCard
// mentor={item.author.isMentor}
// name={item.author.name}
// title={item.topic}
// desc={item.note}
// heroCard={item.imageUrl}
// image={item.author.profilePhotoUrl}
// />
{forum?.discussions.map((item) => (
<DiscussionCard
author={item.author}
description={item.note}
title={item.topic}
key={item.author.name}
image={item.imageUrl}
image={images.DiscussionPhoto}
/>
))}
</section>
Expand Down
Loading
Loading