🧶🎄 ↝ Testing build with journal components

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.ts

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

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",
@@ -27,6 +28,7 @@
     "@types/react-dom": "^18.0.10",
     "alea": "^1.0.1",
     "autoprefixer": "^10.4.13",
+    "bootstrap": "^5.2.3",
     "eslint": "8.30.0",
     "eslint-config-next": "13.1.0",
     "ethers": "5.7.2",
@@ -40,7 +42,7 @@
     "rc-slider": "^10.1.1",
     "rc-tooltip": "^6.0.1",
     "react": "18.2.0",
-    "react-bootstrap": "^2.7.2",
+    "react-bootstrap": "1.0.0-beta.12",
     "react-clickout-handler": "^1.2.1",
     "react-color": "^2.19.3",
     "react-dom": "18.2.0",
@@ -83,4 +85,4 @@
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.4"
   }
-}
+}

pages/journal/index.tsx

@@ -0,0 +1,51 @@
+import type { NextPage } from "next";
+import { useRouter } from "next/router";
+import { useState, useEffect } from "react";
+import { Text, NextUIProvider } from '@nextui-org/react';
+
+import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
+import JournalArticleCard from "../../components/Journal/ArticleCard";
+import JournalNavbarComponent from "../../components/Journal/JournalNavbar";
+import { Box } from "../../components/Journal/Box";
+
+const JournalFeed: NextPage = () => {
+    const supabase = useSupabaseClient();
+    const session = useSession();
+
+    const router = useRouter();
+    const [articles, setArticles] = useState([]);
+
+    useEffect(() => {
+        getArticles();
+    }, []);
+
+    const getArticles = async () => {
+        try {
+            const { data, error } = await supabase
+                .from('articles')
+                .select("*")
+                .limit(10)
+            console.log(data);
+            if (data != null) { setArticles(data); };
+        } 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>Main Feed</Text>
+                    <Text size="$lg" css={{my: "$8"}}>
+                        Check out articles from users here
+                    </Text>
+                    {articles.map((article) => (
+                        <JournalArticleCard article={article}/>
+                    ))}
+                </>
+            </Box>
+        </NextUIProvider>
+    );
+};
+
+export default JournalFeed;