public list

react/app/src/App.js

@@ -6,6 +6,7 @@ import { AuthProvider } from "./context/AuthContext";
 import AuthPage from './pages/AuthPage'
 import SnippetPage from './pages/SnippetPage'
 import NewSnippet from './pages/NewSnippetPage'
+import PublicSnippetsPage from "./pages/PublicSnippetsPage";
 
 function App() {
     return (
@@ -23,6 +24,9 @@ function App() {
                     <Route path="/new-snippet" element={<div className="App">
                         <NewSnippet />
                         </div>} />
+                    <Route path="/public-snippets" element={<div className="App">
+                        <PublicSnippetsPage />
+                        </div>} />
                 </Routes>
             </AuthProvider>
         </Router>

react/app/src/components/Header.jsx

@@ -62,7 +62,7 @@ export default function App() {
                                     Snippets
                                 </MDBDropdownToggle>
                                 <MDBDropdownMenu>
-                                    <MDBDropdownItem link>Public snippets</MDBDropdownItem>
+                                    <MDBDropdownItem link href='/public-snippets'>Public snippets</MDBDropdownItem>
                                     <MDBDropdownItem link>My snippets</MDBDropdownItem>
                                     <MDBDropdownItem link>Shared to me snippets</MDBDropdownItem>
                                 </MDBDropdownMenu>

react/app/src/components/SnippetList.jsx

@@ -0,0 +1,30 @@
+import { MDBBtn, MDBCard, MDBCardBody, MDBCardHeader, MDBCardTitle } from "mdb-react-ui-kit";
+import { useNavigate } from "react-router-dom";
+
+const SnippetList = ({ snippets }) => {
+    const navigate = useNavigate();
+
+    const ShortenedSnippet = ({ snippet }) => {
+        return (
+        <MDBCard>
+            <MDBCardHeader>{snippet?.owner}</MDBCardHeader>
+            <MDBCardBody>
+                <MDBCardTitle>{snippet?.title}</MDBCardTitle>
+                <MDBBtn onClick={() => navigate(`/snippet/${snippet?.id}`)}>Open</MDBBtn>
+            </MDBCardBody>
+        </MDBCard>
+        )
+    };
+
+    const snippetComponents = snippets?.map((snippet) => {
+        return <ShortenedSnippet snippet={snippet} key={snippet.id} />;
+    });
+
+    return (
+        <div>
+            {snippetComponents}
+        </div>
+    )
+};
+
+export default SnippetList;

react/app/src/pages/PublicSnippetsPage.jsx

@@ -0,0 +1,32 @@
+import { useContext, useEffect, useState } from 'react';
+import SnippetList from '../components/SnippetList';
+import AuthContext from '../context/AuthContext';
+import BasicPage from './BasicPage'
+
+const PublicSnippetsPage = () => {
+    const { authTokens } = useContext(AuthContext);
+    const [ snippets, setSnippets ] = useState(null);
+
+    const getSnippets = async () => {
+            const response = await fetch(`http://${process.env.REACT_APP_DOMAIN}/api/snippets/`, {
+                method: "GET"
+            });
+            const data = await response.json();
+
+            if (response.status === 200) {
+                setSnippets(data)
+            }
+        };
+
+    useEffect(() => {
+        getSnippets();
+    }, []);
+
+    return (
+        <BasicPage style={{margin: "20%"}}>
+            <SnippetList snippets={snippets} />
+        </BasicPage>
+    );
+}
+
+export default PublicSnippetsPage;