feat: init collections index + delete

front/pages/index.tsx

@@ -1,11 +1,13 @@
 import type { NextPage } from "next";
 import { Title } from "../components/ui/styles/title";
 import Layout from "../components/ui/layout";
+import { Header } from "../components/ui/header";
 
 const Home: NextPage = () => {
   return (
     <div>
       <Layout title="Index">
+      <Header></Header>
         <Title>Home</Title>
       </Layout>
     </div>

front/pages/login.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Header } from "../components/ui/header";
 import Layout from "../components/ui/layout";
 import { Title } from "../components/ui/styles/title";
 import { loginAndGetToken } from "../services/auth/auth";
@@ -25,6 +26,7 @@ const Login = () => {
   return (
     <div>
       <Layout title="Login">
+      <Header></Header>
         <Title>Login</Title>
 
         <form>

front/pages/organizations/index.tsx

@@ -0,0 +1,67 @@
+import Link from "next/link";
+import React from "react";
+import Layout from "../../components/ui/layout";
+import { Title } from "../../components/ui/styles/title";
+import { deleteOrganizationFromBackend, getUserOrganizations } from "../../services/orgs";
+
+const Organizations = () => {
+  const [userOrganizations, setUserOrganizations] = React.useState([]);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  async function fetchUserOrganizations() {
+    const response = await getUserOrganizations();
+    setUserOrganizations(response);
+    console.log(response);
+    setIsLoading(false);
+  }
+
+  async function deleteOrganization(org_id:any)  {
+   const response = await deleteOrganizationFromBackend(org_id);
+    const newOrganizations = userOrganizations.filter((org:any) => org.org_id !== org_id);
+    setUserOrganizations(newOrganizations);
+  }
+
+
+  React.useEffect(() => {
+    setIsLoading(true);
+    fetchUserOrganizations();
+    setIsLoading(false);
+  }, []);
+
+
+  return (
+    
+    <Layout>
+      <Title>
+        Your Organizations{" "}
+        <Link href={"/organizations/new"}>
+          <a>
+            <button>+</button>
+          </a>
+        </Link>
+      </Title>
+      <hr />
+      {isLoading ? (
+        <p>Loading...</p>
+      ) : (
+        <div>
+          {userOrganizations.map((org: any) => (
+            <div key={org.org_id}>
+              <Link href={`/organizations/${org.org_id}`}>
+                <a>
+                  <h3>{org.name}</h3>
+                </a>
+              </Link>
+              <button onClick={() => deleteOrganization(org.org_id)}>
+                Delete
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+      
+    </Layout>
+  );
+};
+
+export default Organizations;

front/pages/organizations/new.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import Layout from '../../components/ui/layout'
+import { Title } from '../../components/ui/styles/title'
+
+const Organizations = () => {
+  return (
+    <Layout>
+        <Title>New Organization</Title> 
+    </Layout>
+  )
+}
+
+export default Organizations

front/pages/signup.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Header } from "../components/ui/header";
 import Layout from "../components/ui/layout";
 import { Title } from "../components/ui/styles/title";
 import { signup } from "../services/auth/auth";
@@ -30,6 +31,7 @@ const SignUp = () => {
   return (
     <div>
       <Layout title="Sign up">
+      <Header></Header>
         <Title>Sign up </Title>
 
         <form>