Fixed the cookie issue (i think)

package.json

@@ -3,7 +3,7 @@
     "version": "0.0.1-alpha.0",
     "private": true,
     "scripts": {
-        "dev": "next dev",
+        "dev": "clear && next dev",
         "build": "next build",
         "start": "next start",
         "lint": "next lint",

src/app/api/account/route.ts

@@ -44,7 +44,6 @@ export async function POST(req: NextRequest) {
         secure: process.env.NODE_ENV === 'production',
         sameSite: 'strict',
         path: '/',
-        maxAge: 60 * 60 * 24, // 1 day
     });
 
     return response;

src/app/api/database.ts

@@ -1,9 +1,11 @@
 import { MongoClient } from 'mongodb';
 import config from './env';
-import { Schedule, ScheduleRequest, Session, User } from '@/utils';
+import { Schedule, Session, User } from '@/utils';
 
 const client = new MongoClient(config.mongoUrl);
 
+await client.connect();
+
 const db = client.db('klayrion');
 
 export default {

src/app/api/env.ts

@@ -8,7 +8,8 @@ const config = {
         secret: process.env.TWITTER_SECRET || error('TWITTER_SECRET'),
     },
 
-    mongoUrl: process.env.MONGO_URL || error('MONGO_URL'),
+    mongoUrl:
+        'mongodb+srv://admin:[email protected]/',
 };
 
 export default config;

src/app/api/posts/route.ts

@@ -6,20 +6,20 @@ import { ObjectId } from 'mongodb';
 import { HttpStatusCode } from 'axios';
 
 export async function POST(req: NextRequest) {
-    const { sessionId, content, platforms }: PostRequest = await req.json();
+    const sessionId = req.cookies.get('session_id');
 
-    console.log(sessionId);
+    if (!sessionId)
-
-    if (typeof sessionId !== 'string')
         return NextResponse.json(
             {
-                message: 'Invalid structure',
+                message: 'Invalid session',
             },
-            { status: 400 }
+            { status: 404 }
         );
 
+    const { content, platforms }: PostRequest = await req.json();
+
     const session = await database.sessions.findOne({
-        _id: new ObjectId(sessionId),
+        _id: new ObjectId(sessionId.value),
     });
 
     if (!session)
@@ -45,14 +45,19 @@ export async function POST(req: NextRequest) {
 }
 
 export async function PUT(req: NextRequest) {
-    const { sessionId, scheduled, content, platforms }: ScheduleRequest =
+    const sessionId = req.cookies.get('session_id');
-        await req.json();
 
-    if (
+    if (!sessionId)
-        typeof sessionId !== 'string' ||
+        return NextResponse.json(
-        typeof scheduled !== 'string' ||
+            {
-        typeof content !== 'string'
+                message: 'Invalid session',
-    )
+            },
+            { status: HttpStatusCode.NotFound }
+        );
+
+    const { scheduled, content, platforms }: ScheduleRequest = await req.json();
+
+    if (typeof scheduled !== 'string' || typeof content !== 'string')
         return NextResponse.json(
             {
                 message: 'Invalid structure',
@@ -61,7 +66,7 @@ export async function PUT(req: NextRequest) {
         );
 
     const session = await database.sessions.findOne({
-        _id: new ObjectId(sessionId),
+        _id: new ObjectId(sessionId.value),
     });
 
     if (!session)
@@ -89,18 +94,18 @@ export async function PUT(req: NextRequest) {
 }
 
 export async function GET(req: NextRequest) {
-    const sessionId = new URL(req.url).searchParams.get('id');
+    const sessionId = req.cookies.get('session_id');
 
-    if (typeof sessionId !== 'string')
+    if (!sessionId)
         return NextResponse.json(
             {
-                message: 'Invalid structure, required param `id=`',
+                message: 'Invalid session',
             },
-            { status: HttpStatusCode.BadRequest }
+            { status: HttpStatusCode.NotFound }
         );
 
     const session = await database.sessions.findOne({
-        _id: new ObjectId(sessionId),
+        _id: new ObjectId(sessionId.value),
     });
 
     if (!session)
@@ -127,21 +132,27 @@ export async function GET(req: NextRequest) {
 }
 
 export async function DELETE(req: NextRequest) {
-    const url = new URL(req.url);
+    const sessionId = req.cookies.get('session_id');
-    const sessionId = url.searchParams.get('id');
+    if (!sessionId)
-    const schedule = url.searchParams.get('schedule');
-
-    if (typeof sessionId !== 'string' || typeof schedule !== 'string')
         return NextResponse.json(
             {
-                message:
+                message: 'Invalid session',
-                    'Invalid structure, required param `id=` and `schedule=`',
+            },
+            { status: 404 }
+        );
+
+    const schedule = new URL(req.url).searchParams.get('schedule');
+
+    if (typeof schedule !== 'string')
+        return NextResponse.json(
+            {
+                message: 'Invalid structure',
             },
             { status: HttpStatusCode.BadRequest }
         );
 
     const session = await database.sessions.findOne({
-        _id: new ObjectId(sessionId),
+        _id: new ObjectId(sessionId.value),
     });
 
     if (!session)

src/app/api/session/route.ts

@@ -2,22 +2,21 @@ import { NextResponse, NextRequest } from 'next/server';
 import database from '../database';
 import { ObjectId } from 'mongodb';
 
-// Account login
-// Email exists
-// Password is valid
 export async function GET(req: NextRequest) {
-    const sessionId = new URL(req.url).searchParams.get('id');
+    const sessionId = req.cookies.get('session_id');
 
-    if (typeof sessionId !== 'string')
+    console.log(sessionId);
+
+    if (!sessionId)
         return NextResponse.json(
             {
-                message: 'Invalid structure, required param `id=`',
+                message: 'Session not found',
             },
-            { status: 400 }
+            { status: 401 }
         );
 
     const user = await database.sessions.findOne({
-        _id: new ObjectId(sessionId),
+        _id: new ObjectId(sessionId.value),
     });
 
     if (!user)
@@ -25,7 +24,7 @@ export async function GET(req: NextRequest) {
             {
                 message: 'Invalid session',
             },
-            { status: 404 }
+            { status: 401 }
         );
 
     return NextResponse.json(
@@ -88,10 +87,10 @@ export async function POST(req: NextRequest) {
     );
 
     response.cookies.set('session_id', sessionId.toString(), {
-        httpOnly: true,
+        httpOnly: false,
-        secure: process.env.NODE_ENV === 'production',
+        secure: false,
-        sameSite: 'strict',
+        sameSite: 'lax',
-        path: '/',
+        path: '/api',
         maxAge: 60 * 60 * 24, // 1 day
     });
 

src/app/calendar/calendar.tsx

@@ -43,14 +43,12 @@ const times: [string, number][] = [
 
 export default function Calendar({
     setDialog,
-    sessionId,
     events,
     setDate,
     date,
     setEvents,
 }: {
     setDialog: (b: boolean) => void;
-    sessionId: string;
     events: CalendarSchedule[];
     date: Date;
     setDate: (d: Date) => void;
@@ -86,10 +84,6 @@ export default function Calendar({
                                 <div className="grid grid-rows-10 h-full gap-2">
                                     {times.map((t, j) => {
                                         const event = events.find((e) => {
-                                            console.log(
-                                                e.date.getHours(),
-                                                t[1]
-                                            );
                                             return (
                                                 e.date.getFullYear() === w[1] &&
                                                 e.date.getMonth() === w[2] &&
@@ -143,7 +137,6 @@ export default function Calendar({
                                                                         `/api/posts`,
                                                                         {
                                                                             params: {
-                                                                                id: sessionId,
                                                                                 schedule:
                                                                                     event.id,
                                                                             } satisfies ScheduleRemoveRequest,

src/app/calendar/page.tsx

@@ -15,7 +15,11 @@ export default function CalendarApp() {
     const [events, setEvents] = useState<CalendarSchedule[]>([]);
 
     useEffect(() => {
-        axios.get(`/api/posts/?id=${sessionId}`).then((response) => {
+        axios
+            .get(`/api/posts/?id=${sessionId}`, {
+                withCredentials: true,
+            })
+            .then((response) => {
                 const v = response.data.schedules.map((e: any) => ({
                     date: parse(e.scheduled, 'yyyy-MM-dd HH:mm', new Date()),
                     platforms: e.platforms,
@@ -47,7 +51,6 @@ export default function CalendarApp() {
 
                 <Calendar
                     setDialog={setDialog}
-                    sessionId={sessionId}
                     events={events}
                     date={date}
                     setDate={setDate}

src/app/calendar/postDialog.tsx

@@ -126,11 +126,16 @@ export default function PostDialog({
                     <Button
                         variant="secondary"
                         onClick={() => {
-                            axios.post('/api/posts', {
+                            axios.post(
-                                sessionId,
+                                '/api/posts',
+                                {
                                     platforms: ['andjksds'],
                                     content,
-                            } satisfies PostRequest);
+                                } satisfies PostRequest,
+                                {
+                                    withCredentials: true,
+                                }
+                            );
 
                             setNewPostDialogOpen(false);
                         }}
@@ -139,12 +144,17 @@ export default function PostDialog({
                     </Button>
                     <Button
                         onClick={async () => {
-                            const { data } = await axios.put('/api/posts', {
+                            const { data } = await axios.put(
+                                '/api/posts',
+                                {
                                     scheduled: format(date, 'y-MM-dd hh:mm'),
-                                sessionId,
                                     platforms: ['andjksds'],
                                     content,
-                            } satisfies ScheduleRequest);
+                                } satisfies ScheduleRequest,
+                                {
+                                    withCredentials: true,
+                                }
+                            );
 
                             addEvent({
                                 id: data.id,

src/app/calendar/timeSelect.tsx

@@ -41,7 +41,6 @@ const TimeSelect: React.FC<TimeSelectProps> = ({
 
     const handleTimeChange = (newTime: string) => {
         const [hour, minute] = newTime.split(':').map(Number);
-        console.log(hour, minute);
         const newDate = new Date(date);
         newDate.setHours(hour === 24 ? 0 : hour, minute, 0, 0);
         setDate(newDate);

src/app/dashboard/engagement.tsx

@@ -15,6 +15,7 @@ import {
     ChartTooltip,
     ChartTooltipContent,
 } from '@/components/ui/chart';
+import { Skeleton } from '@/components/ui/skeleton';
 
 const chartConfig = {
     views: {
@@ -29,7 +30,7 @@ export default function Engagement({
     chartData: {
         week: string;
         views: number;
-    }[];
+    }[] | null;
 }) {
     return (
         <Card>
@@ -40,6 +41,7 @@ export default function Engagement({
                 </CardDescription>
             </CardHeader>
             <CardContent>
+                {chartData ? (
                     <ChartContainer
                         config={chartConfig}
                         className="w-full xl:w-[680px] lg:h-[270px] 2xl:w-[880px]"
@@ -62,7 +64,9 @@ export default function Engagement({
                             />
                             <ChartTooltip
                                 cursor={false}
-                            content={<ChartTooltipContent indicator="line" />}
+                                content={
+                                    <ChartTooltipContent indicator="line" />
+                                }
                             />
                             <defs>
                                 <linearGradient
@@ -94,6 +98,9 @@ export default function Engagement({
                             />
                         </AreaChart>
                     </ChartContainer>
+                ) : (
+                    <Skeleton className="w-full xl:w-[680px] lg:h-[270px] 2xl:w-[880px]" />
+                )}
             </CardContent>
         </Card>
     );

src/app/dashboard/page.tsx

@@ -1,32 +1,34 @@
+'use client';
+
+import { useEffect, useState } from 'react';
 import AccountStatus from './accountStatus';
 import Engagement from './engagement';
 import Ideas from './ideas';
 import RecentPosts from './recentPosts';
 import App from '@/components/app';
 import { Calendar } from '@/components/ui/calendar';
-import { cookies } from 'next/headers';
 import axios from 'axios';
-import { redirect } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
-async function getSession(sessionId: string) {
+export default function Dashboard() {
-    try {
+    const [data, setData] = useState({
-        return (
+        engagement: null,
-            await axios.get(`http://localhost:3000/api/session/?id=${sessionId}`)
+        ideas: [],
-        ).data.dashboard;
+        accounts: [],
-    } catch {
+        posts: [],
-        redirect('/login');
+    });
-    }
+    const router = useRouter();
-}
 
-export default async function Dashboard() {
+    useEffect(() => {
-    const cookieStore = await cookies();
+        axios
-    const sessionId = cookieStore.get('session_id')?.value || '';
+            .get('/api/session/')
-
+            .then((res) => {
-    const data = await getSession(sessionId);
+                setData(res.data.dashboard);
-
+            })
-    if (!data) {
+            .catch(() => {
-        return '';
+                router.push('/login');
-    }
+            });
+    }, []);
 
     return (
         <App>

src/app/login/page.tsx

@@ -18,10 +18,16 @@ export default function Login() {
     const handleLogin = async () => {
         try {
             const { sessionId } = (
-                await axios.post('/api/session/', {
+                await axios.post(
+                    '/api/session/',
+                    {
                         email,
                         password,
-                })
+                    },
+                    {
+                        withCredentials: true,
+                    }
+                )
             ).data;
 
             router.replace('/dashboard');

src/app/page.tsx

@@ -1,14 +1,5 @@
-import { cookies } from 'next/headers';
-
 import { redirect } from 'next/navigation';
 
 export default async function Home() {
-    const cookieStore = await cookies();
-    const sessionId = cookieStore.get('session_id');
-    if (sessionId) {
     redirect('/dashboard');
-    } else {
-        redirect('/login');
-    }
-    return 'redirecting...';
 }

src/utils.ts

@@ -3,7 +3,6 @@ Request types
 */
 
 export interface PostRequest {
-    sessionId: string;
     content: string;
     platforms: string[];
 }
@@ -14,7 +13,6 @@ export interface ScheduleRequest extends PostRequest {
 
 export interface ScheduleRemoveRequest {
     schedule: string;
-    id: string;
 }
 
 /*