From eecee06b9c06a516b14b04e358bfc60f8e5618b2 Mon Sep 17 00:00:00 2001
From: Liam Arbuckle <liam@skinetics.tech>
Date: Thu, 23 Feb 2023 23:53:57 +1100
Subject: [PATCH] =?UTF-8?q?=E2=98=84=EF=B8=8F=F0=9F=8C=9E=20=E2=86=9D=20Ad?=
 =?UTF-8?q?ding=20component=20to=20view=20individual=20articles=20on=20a?=
 =?UTF-8?q?=20per-page=20basis?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Journal/Article.tsx | 75 ++++++++++++++++++++++++++++++++++
 pages/journal/editArticle.tsx  | 11 +++++
 pages/journal/feed.tsx         | 16 +++++++-
 3 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 components/Journal/Article.tsx
 create mode 100644 pages/journal/editArticle.tsx

diff --git a/components/Journal/Article.tsx b/components/Journal/Article.tsx
new file mode 100644
index 00000000..bcbeba66
--- /dev/null
+++ b/components/Journal/Article.tsx
@@ -0,0 +1,75 @@
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import { Text, Spacer, User, Button } from '@nextui-org/react';
+
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+const JournalArticle: NextPage = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const [article, setArticle] = useState<any>({});
+
+    const router = useRouter();
+    const { id } = router.query;
+
+    useEffect (() => {
+        async function getArticle () {
+            const { data, error } = await supabase
+                .from('articles') // Should select from "posts" that are marked as articles (maybe?)
+                .select("*")
+                .filter("id", "eq", id)
+                .single();
+            if (error) {
+                console.log ( error );
+            } else {
+                setArticle(data);
+            };
+        };
+
+        if ( typeof id !== "undefined" ) { getArticle(); };
+    }, [id]);
+
+    const deleteArticle = async () => {
+        try {
+            const { data, error } = await supabase
+                .from('articles')
+                .delete()
+                .eq('id', id)
+            if (error) throw error;
+            router.push('/journal/feed');
+        } catch ( error: any ) {
+            alert(error.message);
+        }
+    }
+
+    return (
+        <>
+            <Text h2>{article.title}</Text>
+            <Spacer y={.5} />
+            <User
+                name={article.user_email?.toLowerCase()}
+                size="md"
+            />
+            <Spacer y={1} />
+            <Text size="$lg">
+                {article.content}
+            </Text>
+            { session?.user && article.user_id === session?.user?.id ?
+                <>
+                    <Spacer y={.5} />
+                    <Button size="sm" onPress={() => router.push("/journal/editArticle?id=" + id)}> {/* localhost:3000/editArticle */}
+                        Edit
+                    </Button>
+                    <Spacer y={.5} />
+                    <Button size="sm" color="error" onPress={() => deleteArticle()}>
+                        Delete
+                    </Button>
+                </>
+            : null}
+        </>
+    )
+}
+
+export default JournalArticle;
\ No newline at end of file
diff --git a/pages/journal/editArticle.tsx b/pages/journal/editArticle.tsx
new file mode 100644
index 00000000..4427e3d6
--- /dev/null
+++ b/pages/journal/editArticle.tsx
@@ -0,0 +1,11 @@
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { Text, Textarea, Grid, Button } from '@nextui-org/react';
+import { useState, useEffect } from "react";
+
+import { withPageAuth } from "@supabase/auth-helpers-nextjs";
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+const EditJournalArticle: NextPage = () => {
+    const supabase = useSupabaseClient();
+}
\ No newline at end of file
diff --git a/pages/journal/feed.tsx b/pages/journal/feed.tsx
index 56887c37..1ce2eeab 100644
--- a/pages/journal/feed.tsx
+++ b/pages/journal/feed.tsx
@@ -1 +1,15 @@
-import type { NextPage } from "next";
\ No newline at end of file
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useState, useEffect } from "react";
+import { Text } from '@nextui-org/react';
+
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+
+const JournalFeed: NextPage = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const router = useRouter();
+
+    const [articles, setArticles] = useState([]);
+}
\ No newline at end of file