Merge pull request #42 from vishalkondle45/feature/forum

feat: saved in forums

app/(private)/calendar/page.tsx

@@ -141,9 +141,11 @@ const CalendarPage = () => {
       </Text>
       <Stack gap={rem(4)}>
         {events
-          ?.filter((i) => dayjs(i.from).isSame(day, 'day') || dayjs(i.to).isSame(day, 'day'))
+          ?.filter(
+            (i: EventDocument) => dayjs(i.from).isSame(day, 'day') || dayjs(i.to).isSame(day, 'day')
+          )
           .slice(0, 2)
-          .map((event) => (
+          .map((event: EventDocument) => (
             <Badge
               variant={dayjs(date).isSame(day, 'day') ? 'white' : 'filled'}
               color={event?.color}
@@ -156,11 +158,12 @@ const CalendarPage = () => {
             </Badge>
           ))}
       </Stack>
-      {events?.filter((i) => dayjs(i.from).isSame(day, 'day') || dayjs(i.to).isSame(day, 'day'))
-        ?.length > 2 && (
+      {events?.filter(
+        (i: EventDocument) => dayjs(i.from).isSame(day, 'day') || dayjs(i.to).isSame(day, 'day')
+      )?.length > 2 && (
         <Text c={dayjs(date).isSame(day, 'day') ? 'white' : 'blue'} fz="xs">
           {(events?.filter(
-            (i) => dayjs(i.from).isSame(day, 'day') || dayjs(i.to).isSame(day, 'day')
+            (i: EventDocument) => dayjs(i.from).isSame(day, 'day') || dayjs(i.to).isSame(day, 'day')
           )?.length || 0) - 2}{' '}
           more...
         </Text>
@@ -170,7 +173,7 @@ const CalendarPage = () => {
 
   const _renderDay = (day: Date) => {
     const noOfEvents = events?.filter(
-      (i) => dayjs(i.from).isSame(day, 'day') || dayjs(i.to).isSame(day, 'day')
+      (i: EventDocument) => dayjs(i.from).isSame(day, 'day') || dayjs(i.to).isSame(day, 'day')
     ).length;
     return (
       <Indicator

app/(private)/forum/[forum]/page.tsx

@@ -5,21 +5,34 @@ import { Button, Divider, Group, rem, Select, Stack, Text } from '@mantine/core'
 import { useDisclosure } from '@mantine/hooks';
 import dayjs from 'dayjs';
 import { Forum, AskQuestion, ReplyToQuestion } from '@/components/Forum';
-import useFetchData from '@/hooks/useFetchData';
 import { ForumType } from '@/components/Forum/Forum.types';
 import { FORUM_ANSWERS_SORT_OPTIONS } from '@/lib/constants';
+import { ForumDocument } from '@/models/Forum';
+import { apiCall } from '@/lib/client_functions';
 
 const ForumPage = ({ params }: { params: { forum: string } }) => {
-  const { data, refetch, loading } = useFetchData(`/api/forums?_id=${params.forum}`);
+  const [forum, setForum] = useState<ForumDocument | null | any>(null);
+  const [answers, setAnswers] = useState<ForumType[]>([]);
   const [opened, { open, close }] = useDisclosure(false);
   const [value, setValue] = useState<string | null>('highest');
-  const [answers, setAnswers] = useState(data?.[1]);
+
+  const getForum = async () => {
+    const res: any | undefined = await apiCall(`/api/forums?_id=${params.forum}`);
+    if (res?.data) {
+      setForum(res?.data?.[0]);
+      setAnswers(res?.data?.[1]);
+    }
+  };
+
+  useEffect(() => {
+    getForum();
+  }, [params.forum]);
 
   useEffect(() => {
-    if (!data?.length || !data[1]) {
+    if (!forum || !answers) {
       return;
     }
-    const sortIt = [...data[1]];
+    const sortIt = [...answers];
     switch (value) {
       case 'newest':
         sortIt.sort((a: any, b: any) => dayjs(b.updatedAt).diff(dayjs(a.updatedAt), 'seconds'));
@@ -34,43 +47,36 @@ const ForumPage = ({ params }: { params: { forum: string } }) => {
         );
         break;
     }
-    setAnswers(sortIt);
-  }, [value, data]);
 
-  if (loading) {
-    return <></>;
-  }
+    setAnswers(sortIt);
+  }, [value]);
 
   return (
     <>
       <Group mb="md" justify="space-between">
         <Stack>
-          <Text
-            fw={700}
-            fz="lg"
-            dangerouslySetInnerHTML={{ __html: String(data?.[0]?.question) }}
-          />
+          <Text fw={700} fz="lg" dangerouslySetInnerHTML={{ __html: String(forum?.question) }} />
           <Group>
             <Text c="dimmed" size={rem(14)}>
-              Asked {dayjs(data?.[0]?.createdAt).fromNow()}
+              Asked {dayjs(forum?.createdAt).fromNow()}
             </Text>
             <Text c="dimmed" size={rem(14)}>
-              Modified {dayjs(data?.[0]?.updatedAt).fromNow()}
+              Modified {dayjs(forum?.updatedAt).fromNow()}
             </Text>
             <Text c="dimmed" size={rem(14)}>
-              Viewed {data?.[0]?.views?.length} times
+              Viewed {forum?.views?.length} times
             </Text>
           </Group>
         </Stack>
         <Button onClick={open}>Ask Question</Button>
       </Group>
       <Divider mb="md" />
-      <Stack gap="xl">
-        <Forum forum={data?.[0]} refetch={refetch} />
+      <Stack gap="md">
+        <Forum forum={forum} refetch={getForum} />
         <Divider variant="dashed" />
         <Group gap={0} wrap="nowrap" justify="space-between">
           <Text fw={700} size="lg">
-            {data?.[1]?.length} Answers
+            {answers?.length} Answers
           </Text>
           <Select
             data={FORUM_ANSWERS_SORT_OPTIONS}
@@ -80,11 +86,10 @@ const ForumPage = ({ params }: { params: { forum: string } }) => {
             placeholder="Sort by"
           />
         </Group>
-        {answers &&
-          answers?.map((forum: ForumType) => (
-            <Forum key={String(forum._id)} forum={forum} refetch={refetch} />
-          ))}
-        <ReplyToQuestion refetch={refetch} parent={data[0]?._id} />
+        {answers?.map((forumItem: ForumType) => (
+          <Forum key={String(forumItem._id)} forum={forumItem} refetch={getForum} />
+        ))}
+        <ReplyToQuestion refetch={getForum} parent={forum?._id} />
       </Stack>
       <AskQuestion opened={opened} close={close} />
     </>

app/(private)/forum/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Group, Stack } from '@mantine/core';
+import { Button, Group, Stack, Title } from '@mantine/core';
 import { useDisclosure, useMediaQuery } from '@mantine/hooks';
 import { ForumItem, AskQuestion } from '@/components/Forum';
 import useFetchData from '@/hooks/useFetchData';
@@ -14,13 +14,15 @@ const ForumPage = () => {
 
   return (
     <>
-      <Group mb="md" justify="right">
+      <Group mb="md" justify="space-between">
+        <Title>Questions</Title>
         <Button onClick={open}>Ask Question</Button>
       </Group>
       <Stack>
         {loading ? (
           <Skelton items={6} height={90} />
         ) : (
+          Array.isArray(forums) &&
           forums?.map((forum: ForumType) => (
             <ForumItem key={String(forum._id)} forum={forum} isMobile={isMobile} />
           ))

app/(private)/forum/saved/page.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { Button, Group, Stack, Title } from '@mantine/core';
+import { useDisclosure, useMediaQuery } from '@mantine/hooks';
+import { ForumItem, AskQuestion } from '@/components/Forum';
+import useFetchData from '@/hooks/useFetchData';
+import { ForumType } from '@/components/Forum/Forum.types';
+import Skelton from '@/components/Skelton/Skelton';
+
+const ForumPage = () => {
+  const { data: forums, loading } = useFetchData('/api/forums/saved');
+  const [opened, { open, close }] = useDisclosure(false);
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+  return (
+    <>
+      <Group mb="md" justify="space-between">
+        <Title>Saved</Title>
+        <Button onClick={open}>Ask Question</Button>
+      </Group>
+      <Stack>
+        {loading ? (
+          <Skelton items={6} height={90} />
+        ) : (
+          Array.isArray(forums) &&
+          forums?.map((forum: ForumType) => (
+            <ForumItem key={String(forum._id)} forum={forum} isMobile={isMobile} />
+          ))
+        )}
+      </Stack>
+      <AskQuestion opened={opened} close={close} />
+    </>
+  );
+};
+
+export default ForumPage;

app/(private)/forum/tags/page.tsx

@@ -16,6 +16,7 @@ import { useRouter } from 'next/navigation';
 import { Tag } from '@/components/Forum';
 import useFetchData from '@/hooks/useFetchData';
 import Skelton from '@/components/Skelton/Skelton';
+import { TagType } from '@/components/Forum/Forum.types';
 
 const TagsPage = () => {
   const [sort, setSort] = useState('popular');
@@ -56,8 +57,8 @@ const TagsPage = () => {
             <Skelton items={8} height={70} />
           ) : (
             data
-              ?.filter((tag) => String(tag._id).includes(search))
-              ?.map((tag) => (
+              ?.filter((tag: TagType) => String(tag._id).includes(search))
+              ?.map((tag: TagType) => (
                 <Tag
                   key={String(tag._id)}
                   tag={String(tag._id)}

app/api/forums/saved/route.ts

@@ -0,0 +1,31 @@
+import { getServerSession } from 'next-auth';
+import { NextResponse } from 'next/server';
+import startDb from '@/lib/db';
+import Forum from '@/models/Forum';
+import { authOptions } from '../../auth/[...nextauth]/authOptions';
+import { UserDataTypes } from '../../auth/[...nextauth]/next-auth.interfaces';
+
+export const maxDuration = 60;
+export const dynamic = 'force-dynamic';
+
+export async function GET() {
+  try {
+    const session: UserDataTypes | null = await getServerSession(authOptions);
+    if (!session?.user) {
+      return NextResponse.json({ error: 'You are not authorized' }, { status: 401 });
+    }
+    await startDb();
+
+    const forums = await Forum.find({
+      question: { $exists: true },
+      description: { $exists: true },
+      saved: session?.user._id,
+    })
+      .populate({ path: 'user', select: 'name' })
+      .sort('-updatedAt');
+
+    return NextResponse.json(forums, { status: 200 });
+  } catch (error: any) {
+    return NextResponse.json({ error: error?.message }, { status: 500 });
+  }
+}

components/Forum/Forum.types.ts

@@ -4,3 +4,9 @@ import { UserDocument } from '@/models/User';
 export interface ForumType extends ForumDocument {
   user: UserDocument;
 }
+
+export interface TagType {
+  _id: string;
+  total: number;
+  today: number;
+}

lib/constants.tsx

@@ -1,6 +1,7 @@
 import { HarmBlockThreshold, HarmCategory } from '@google/generative-ai';
 import {
   IconArchive,
+  IconBookmarkFilled,
   IconCalendar,
   IconCalendarDown,
   IconCalendarUp,
@@ -139,6 +140,7 @@ export const APPS: AppType[] = [
     sidebar: [
       { label: 'Home', path: '/forum', icon: <IconMessageQuestion /> },
       { label: 'Tags', path: '/forum/tags', icon: <IconTagsFilled /> },
+      { label: 'Saved', path: '/forum/saved', icon: <IconBookmarkFilled /> },
     ],
   },
   { label: 'Passwords', path: '/passwords', icon: <IconLock />, color: 'red', sidebar: [] },

store/features/dataSlice.ts

@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 export interface DataState {
-  data: any[];
+  data: any;
 }
 
 const initialState: DataState = {
@@ -15,9 +15,12 @@ export const dataSlice = createSlice({
     set: (state, action) => {
       state.data = action.payload;
     },
+    reset: (state) => {
+      state.data = [];
+    },
   },
 });
 
-export const { set } = dataSlice.actions;
+export const { set, reset } = dataSlice.actions;
 
 export default dataSlice.reducer;