🪁🫒 ↝ Merge pull request #24 from Signal-K/sta-30-create-article-compo…

…nent-in-client

🪤🪡 ↝ Long form articles now part of the ecosystem

https://elianna.notion.site/Long-form-articles-fe4a790159b146a5a4dbb305eaa2720a
https://www.notion.so/skinetics/Long-form-articles-fe4a790159b146a5a4dbb305eaa2720a?pvs=4

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> = ( props ) => {
+    const router = useRouter();
+    const { article } = props;
+
+    /* function getDate() {
+        let time = Date.parse(article.inserted_at)
+    } */
+
+    return (
+        <NextUIProvider>
+        <Card
+            isPressable
+            css = {{ mb: "$10" }}
+            onPress={() => router.push("/journal/Article?id=" + article.id)}
+        >
+            <Card.Body>
+                <Text h2>{article.title}</Text>
+                {/*<Text b>posted {getDate()}</Text>*/}
+                <Text b>By {article.user_id.toLowerCase()}</Text>
+            </Card.Body>
+        </Card>
+        </NextUIProvider>
+    )
+}
+
+export default JournalArticleCard;

components/Journal/Box.tsx

@@ -0,0 +1,5 @@
+import { styled } from "@nextui-org/react";
+
+export const Box = styled("div", {
+    boxSizing: "border-box"
+});

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 (
+        <Navbar isBordered isCompact>
+            <Navbar.Brand as={Link} href="/">
+                ShareArticles
+            </Navbar.Brand>
+            <Navbar.Content hideIn="xs" variant="highlight-rounded">
+                <Navbar.Link href="/journal/">Main Feed</Navbar.Link>
+                <Navbar.Link href="/journal/createArticle">Create Article</Navbar.Link>
+            </Navbar.Content>
+
+            <Navbar.Content>
+                {!session?.user ?  /*User doesnt exist*/
+                    <>
+                        <Navbar.Link href="/login">
+                            <Button auto flat>
+                                Login
+                            </Button>
+                        </Navbar.Link>
+                    </>
+                :         /* User does exist */
+                    <>
+                        <Navbar.Item>
+                            <Text>Hey, {session?.user?.email}</Text>
+                        </Navbar.Item>
+                        <Navbar.Item>
+                            <Button auto flat onPress={() => signOutUser()}>
+                                Sign Out
+                            </Button>
+                        </Navbar.Item>
+                    </>
+                }  
+            </Navbar.Content>
+        </Navbar>
+    )
+}
+
+export default JournalNavbarComponent;

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 }) {

components/Posts/ProfileCard.jsx

@@ -47,7 +47,7 @@ export function ProfileContent ({ activeTab, userId }) {
                 <div>
                 { posts.length > 0 && posts.map(post => (
                     <PostCard key={post.created_at} {...post} profiles={profile} /*media={media}*/ />
-                ))}
+                ))} {/* Section to show their long-form articles here */}
                 {/*<PostCard key = { postMessage.id } { ..post } />*/}
                 {/* Create a post card to tag the user */}
                 </div>

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",

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';

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<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/');
+        } catch ( error: any ) {
+            alert(error.message);
+        }
+    }
+
+    return (
+        <NextUIProvider>
+            <JournalNavbarComponent />
+            <Box css={{ px: "$12", py: "$15", mt: "$12", "@xsMax": {px: "$10"}, maxWidth: "800px", margin: "0 auto" }}>
+                <>
+                    <Text h2>{article.title}</Text>
+                    <Spacer y={.5} />
+                    <Avatar url={article?.user_id?.avatar_url} size='lg' />
+                    <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}
+                </>
+            </Box>
+        </NextUIProvider>
+    )
+}
+
+export default JournalArticle;

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 (
+            <Html lang='en'>
+                <Head>{CssBaseline.flush()}</Head>
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        );
+    };
+};
+
+export default JournalDocument;

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 (
+        <Grid.Container gap={1}>
+            <Text h3>Title</Text>
+            <Grid xs={12}>
+                <Textarea 
+                    name="title" 
+                    aria-label="title"
+                    placeholder="Article Title"
+                    fullWidth={true}
+                    rows={1}
+                    size="xl"
+                    onChange={handleChange}
+                />
+            </Grid>
+            <Text h3>Article Text</Text>
+            <Grid xs={12}>
+                <Textarea 
+                    name="content" 
+                    aria-label="content"
+                    placeholder="Article Text"
+                    fullWidth={true}
+                    rows={6}
+                    size="xl"
+                    onChange={handleChange}
+                />
+            </Grid>
+            <Grid xs={12}>
+                <Text>Posting as {session?.user?.email}</Text>
+            </Grid>
+            <Button onPress={createArticle}>Create Article</Button>
+        </Grid.Container>
+    );
+};
+
+export default CreateJournalArticle;