From 9ece86b20b63516b61d27d5300806e1dc42dfef6 Mon Sep 17 00:00:00 2001 From: Liam Arbuckle Date: Fri, 24 Feb 2023 23:17:31 +1100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=9E=F0=9F=A5=84=20=E2=86=9D=20Finishin?= =?UTF-8?q?g=20long=20form=20article=20component?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Journal/Article.tsx | 75 ------------------ components/Journal/ArticleCard.tsx | 36 +++++++++ components/Journal/Box.tsx | 5 ++ components/Journal/JournalNavbar.tsx | 53 +++++++++++++ components/Posts/ProfileCard.jsx | 2 +- package.json | 2 +- pages/journal/Article.tsx | 80 +++++++++++++++++++ pages/journal/createArticle.tsx | 73 +++++++++++++++++ pages/journal/editArticle.tsx | 112 ++++++++++++++++++++++++++- pages/journal/feed.tsx | 15 ---- pages/journal/index.tsx | 58 +++++++++++--- 11 files changed, 407 insertions(+), 104 deletions(-) delete mode 100644 components/Journal/Article.tsx create mode 100644 components/Journal/ArticleCard.tsx create mode 100644 components/Journal/Box.tsx create mode 100644 components/Journal/JournalNavbar.tsx create mode 100644 pages/journal/Article.tsx create mode 100644 pages/journal/createArticle.tsx delete mode 100644 pages/journal/feed.tsx diff --git a/components/Journal/Article.tsx b/components/Journal/Article.tsx deleted file mode 100644 index bcbeba66..00000000 --- a/components/Journal/Article.tsx +++ /dev/null @@ -1,75 +0,0 @@ -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({}); - - 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 ( - <> - {article.title} - - - - - {article.content} - - { session?.user && article.user_id === session?.user?.id ? - <> - - - - - - : null} - - ) -} - -export default JournalArticle; \ No newline at end of file diff --git a/components/Journal/ArticleCard.tsx b/components/Journal/ArticleCard.tsx new file mode 100644 index 00000000..a29a36f8 --- /dev/null +++ b/components/Journal/ArticleCard.tsx @@ -0,0 +1,36 @@ +import { NextPage } from "next"; +import { useRouter } from "next/router"; +import { Card, Text, NextUIProvider } from "@nextui-org/react"; +import { Box } from "./Box"; +import JournalNavbarComponent from "./JournalNavbar"; + +import { useSession } from "@supabase/auth-helpers-react"; + +interface Props { article: any }; + +const JournalArticleCard: NextPage = ( props ) => { + const router = useRouter(); + const { article } = props; + + /* function getDate() { + let time = Date.parse(article.inserted_at) + } */ + + return ( + + router.push("/journal/Article?id=" + article.id)} + > + + {article.title} + {/*posted {getDate()}*/} + By {article.user_id.toLowerCase()} + + + + ) +} + +export default JournalArticleCard; \ No newline at end of file diff --git a/components/Journal/Box.tsx b/components/Journal/Box.tsx new file mode 100644 index 00000000..dfe0c1a5 --- /dev/null +++ b/components/Journal/Box.tsx @@ -0,0 +1,5 @@ +import { styled } from "@nextui-org/react"; + +export const Box = styled("div", { + boxSizing: "border-box" +}); \ No newline at end of file diff --git a/components/Journal/JournalNavbar.tsx b/components/Journal/JournalNavbar.tsx new file mode 100644 index 00000000..daabfe6b --- /dev/null +++ b/components/Journal/JournalNavbar.tsx @@ -0,0 +1,53 @@ +import { useRouter } from "next/router"; +import Link from "next/link"; +import { Navbar, Button, Text } from "@nextui-org/react"; + +import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"; + +const JournalNavbarComponent = () => { + const supabaseClient = useSupabaseClient(); + const session = useSession(); + const router = useRouter(); + + function signOutUser() { + supabaseClient.auth.signOut(); + router.push("/"); // localhost:3000 + } + + return ( + + + ShareArticles + + + Main Feed + Create Article + + + + {!session?.user ? /*User doesnt exist*/ + <> + + + + + : /* User does exist */ + <> + + Hey, {session?.user?.email} + + + + + + } + + + ) +} + +export default JournalNavbarComponent; \ No newline at end of file diff --git a/components/Posts/ProfileCard.jsx b/components/Posts/ProfileCard.jsx index fc721ae6..a4b6a1e5 100644 --- a/components/Posts/ProfileCard.jsx +++ b/components/Posts/ProfileCard.jsx @@ -47,7 +47,7 @@ export function ProfileContent ({ activeTab, userId }) {
{ posts.length > 0 && posts.map(post => ( - ))} + ))} {/* Section to show their long-form articles here */} {/**/} {/* Create a post card to tag the user */}
diff --git a/package.json b/package.json index a1227d09..ad51bfa1 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "social-media", + "name": "desci-journal-client", "version": "0.1.0", "private": true, "scripts": { diff --git a/pages/journal/Article.tsx b/pages/journal/Article.tsx new file mode 100644 index 00000000..143b3b86 --- /dev/null +++ b/pages/journal/Article.tsx @@ -0,0 +1,80 @@ +import type { NextPage } from "next"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import { Text, Spacer, User, Button, NextUIProvider } from '@nextui-org/react'; +import { Box } from "../../components/Journal/Box"; +import JournalNavbarComponent from "../../components/Journal/JournalNavbar"; + +import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"; +import Avatar from "../../components/Avatar"; + +const JournalArticle: NextPage = () => { + const supabase = useSupabaseClient(); + const session = useSession(); + + const [article, setArticle] = useState({}); + + 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/'); + } catch ( error: any ) { + alert(error.message); + } + } + + return ( + + + + <> + {article.title} + + + + + {article.content} + + { session?.user && article.user_id === session?.user?.id ? + <> + + + + + + : null} + + + + ) +} + +export default JournalArticle; \ No newline at end of file diff --git a/pages/journal/createArticle.tsx b/pages/journal/createArticle.tsx new file mode 100644 index 00000000..8ca2b470 --- /dev/null +++ b/pages/journal/createArticle.tsx @@ -0,0 +1,73 @@ +import type { NextPage } from "next"; +import { useRouter } from "next/router"; +import { Text, Textarea, Grid, Button } from '@nextui-org/react'; +import { useState } from "react"; + +import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react"; + +const CreateJournalArticle: NextPage = () => { + const supabase = useSupabaseClient(); + const session = useSession(); + + const router = useRouter(); + + const initialState = { title: '', content: "", }; + const [articleData, setArticleData] = useState(initialState); + const handleChange = ( e: any ) => { setArticleData({ ...articleData, [ e.target.name ] : e.target.value }); }; + const createArticle = async () => { + try { + const { data, error } = await supabase + .from("articles") + .insert([{ + title: articleData.title, + content: articleData.content, + //user_email: session?.user?.email, + user_id: session?.user?.id, + }]) + .single() + + if (error) throw error; + setArticleData(initialState); + router.push("/journal/"); + } catch ( error: any ) { + alert(error.message); + }; + }; + + console.log(articleData); + + return ( + + Title + +