feat: init collections index + delete

front/components/security/AuthProvider.tsx

@@ -28,7 +28,7 @@ const AuthProvider = (props: any) => {
       userInfo = await getUserInfo(access_token);
       isAuthenticated = true;
       setAuth({ access_token, isAuthenticated, userInfo, isLoading });
-    } else if (!access_token) {
+    } else{
       isAuthenticated = false;
       setAuth({ access_token, isAuthenticated, userInfo, isLoading });
     }

front/components/ui/header.tsx

@@ -8,19 +8,8 @@ export const Header = () => {
   return (
     <div>
       <Menu></Menu>
-      <PreAlphaLabel>🚧 Pre-Alpha</PreAlphaLabel>
     </div>
   );
 };
 
-const PreAlphaLabel = styled.div`
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  padding: 9px;
-  background-color: #080501;
-  color: white;
-  font-size: 19px;
-  font-weight: bold;
-  border-radius: 5px 0 0 0px;
-  `;
+

front/components/ui/layout.tsx

@@ -13,7 +13,7 @@ const Layout = (props: any) => {
           <meta name="description" content={props.description} />
           <link rel="icon" href="/favicon.ico" />
         </Head>
-        <Header></Header>
+        <PreAlphaLabel>🚧 Pre-Alpha</PreAlphaLabel>
         <Main className="min-h-screen">{props.children}</Main>
 
         <Footer>
@@ -43,4 +43,16 @@ const Footer = styled.footer`
   }
 `;
 
+const PreAlphaLabel = styled.div`
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: 9px;
+  background-color: #080501;
+  color: white;
+  font-size: 19px;
+  font-weight: bold;
+  border-radius: 5px 0 0 0px;
+  `;
+
 export default Layout;

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>

front/services/orgs.ts

@@ -0,0 +1,37 @@
+import { getAPIUrl } from "./config";
+
+export async function getUserOrganizations() {
+  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+
+  const requestOptions: any = {
+    method: "GET",
+    headers: HeadersConfig,
+    redirect: "follow",
+    credentials: "include",
+  };
+
+  return fetch(`${getAPIUrl()}orgs/user/page/1/limit/10`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+}
+
+// export async function createNewOrganization(user_id) {}
+
+// export async function getOrganizationData(org_id) {}
+
+export async function deleteOrganizationFromBackend(org_id:any) {
+  const HeadersConfig = new Headers({ "Content-Type": "application/json" });
+
+  const requestOptions: any = {
+    method: "DELETE",
+    headers: HeadersConfig,
+    redirect: "follow",
+    credentials: "include",
+  };
+
+  return fetch(`${getAPIUrl()}orgs/${org_id}`, requestOptions)
+    .then((result) => result.json())
+    .catch((error) => console.log("error", error));
+}
+
+// export async function updateOrganization(org_id) {}