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/Planets/PlanetCard.tsx b/components/Planets/PlanetCard.tsx index 0af4b3e5..eea0c102 100644 --- a/components/Planets/PlanetCard.tsx +++ b/components/Planets/PlanetCard.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import Card from "../Card"; import { useSupabaseClient } from "@supabase/auth-helpers-react"; -import { PlanetEditorFromData } from "../../pages/generator/planet-editor"; +import PlanetEditor, { PlanetEditorFromData } from "../../pages/generator/planet-editor"; import StakePlay from "../../pages/stake/play"; export function PlanetCard ({ activeTab, planetId }) { 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 71b28868..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": { @@ -11,6 +11,7 @@ "dependencies": { "@chakra-ui/react": "^2.4.9", "@lens-protocol/react": "^0.3.0", + "@nextui-org/react": "^1.0.0-beta.12", "@primer/octicons-react": "9.1.1", "@supabase/auth-helpers-nextjs": "^0.5.4", "@supabase/auth-helpers-react": "^0.3.1", diff --git a/pages/_app.tsx b/pages/_app.tsx index de6f3389..0c1b4e86 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,9 +1,11 @@ // Global imports import React, { useState } from 'react'; +import { AppProps } from 'next/app'; // Styling imports import '../styles/globals.css'; import { ChakraProvider } from '@chakra-ui/react'; +import { NextUIProvider } from '@nextui-org/react'; // Offchain/Postgres Session Provider import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'; 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/_document.tsx b/pages/journal/_document.tsx new file mode 100644 index 00000000..e8a79397 --- /dev/null +++ b/pages/journal/_document.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import Document, { Html, Head, Main, NextScript, DocumentContext } from "next/document"; +import { CssBaseline } from '@nextui-org/react'; + +class JournalDocument extends Document { + static async getInitialProps (ctx : DocumentContext ) { + const initialProps = await Document.getInitialProps(ctx); + return { + ...initialProps, + styles: React.Children.toArray([ initialProps.styles ]), + }; + } + + render () { + return ( + + {CssBaseline.flush()} + +
+ + + + ); + }; +}; + +export default JournalDocument; \ 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 + +