Merge pull request #6 from LinumLabs/feature/rr/FAIR-96

[FAIR-96] yolo

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_FAIROSHOST=https://fairos.fairdatasociety.org/v1/

components/ContentHeader/index.tsx

@@ -3,17 +3,15 @@ import FolderIcon from 'assets/icons/folder.svg';
 import HamburgerIcon from 'assets/icons/hamburger.svg';
 import UnionIcon from 'assets/icons/union.svg';
 import Dropdown from 'components/Dropdown';
+import usePods from 'hooks/usePods';
 
 const ContentHeader = () => {
-  const dropdownOptions = [
-    { title: 'Pod 1', href: '/' },
-    { title: 'Pod 2', href: '/' },
-  ];
+  const { pods } = usePods();
 
   return (
     <div className="my-6 flex justify-between">
       <div className="flex items-center">
-        <Dropdown style="outset" options={dropdownOptions}>
+        <Dropdown style="outset" options={pods}>
           <FolderIcon />
         </Dropdown>
         <span className="text-xl font-semibold text-purple">

components/Dropdown/index.tsx

@@ -4,7 +4,7 @@ import Button, { StyleTypes } from 'components/Button';
 import ChevronDownIcon from 'assets/icons/chevron-down.svg';
 import useOnClickOutside from 'use-onclickoutside';
 
-interface DropdownItem {
+export interface DropdownItem {
   title: string;
   href?: string;
 }

components/Layout/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import { ReactNode, useEffect } from 'react';
 import Router from 'next/router';
 import Topbar from 'components/Topbar';
@@ -18,7 +19,7 @@ const Layout = ({ children }: Props) => {
       setSidebarVisible(false);
       Router.push('/login');
     }
-  }, [isAuthenticated, setSidebarVisible]);
+  }, [isAuthenticated]);
 
   return (
     <section className="relative w-full min-h-screen">

components/Sidebar/index.tsx

@@ -1,9 +1,16 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 import classes from './Sidebar.module.scss';
 import AlertIcon from 'assets/icons/alert.svg';
-import BinIcon from 'assets/icons/bin.svg';
+// import BinIcon from 'assets/icons/bin.svg';
 import ChevronIcon from 'assets/icons/chevron-right.svg';
+import usePods from 'hooks/usePods';
 
 const Sidebar = () => {
+  const { pods } = usePods();
+  const router = useRouter();
+  const { slug = '/' } = router.query;
+
   return (
     <aside
       className={`fixed left-0 top-0 bottom-0 z-0 w-48 lg:w-72 px-6 pt-20 bg-white shadow-xl ${classes.root}`}
@@ -13,18 +20,20 @@ const Sidebar = () => {
       </header>
 
       <main className={`${classes.list} text-purple`}>
-        <a className={classes.listItem} href="#">
-          Pod 1 <ChevronIcon />
-        </a>
-        <a className={`${classes.listItem} ${classes.listItemActive}`} href="#">
-          Pod 2 <ChevronIcon />
-        </a>
-        <a className={classes.listItem} href="#">
-          Pod 3 <ChevronIcon />
-        </a>
-        <a className={classes.listItem} href="#">
+        {pods.map((pod, ix) => (
+          <Link key={ix + pod.slug} href={pod.slug}>
+            <a
+              className={`${classes.listItem} ${
+                slug === pod.slug ? classes.listItemActive : ''
+              }`}
+            >
+              {pod.title} <ChevronIcon />
+            </a>
+          </Link>
+        ))}
+        {/* <a className={classes.listItem} href="#">
           Trash Pod <BinIcon />
-        </a>
+        </a> */}
       </main>
 
       <footer className="flex items-center mt-8 text-purple">

components/TextInput/index.tsx

@@ -1,19 +1,31 @@
+import { SyntheticEvent } from 'react';
+
 type InputTypes = 'text' | 'password';
 
 type Props = {
   type?: InputTypes;
   label?: string;
   placeholder?: string;
+  value: string;
+  onChange: (evt: SyntheticEvent) => void;
 };
 
-const TextInput = ({ type = 'text', label, placeholder }: Props) => {
+const TextInput = ({
+  type = 'text',
+  label,
+  placeholder,
+  value,
+  onChange,
+}: Props) => {
   return (
     <div className="mb-8">
       {!!label && <label className="block mb-3">{label}</label>}
       <input
         type={type}
         placeholder={placeholder}
         className="text-purple border-blue border-2 rounded-lg py-2.5 px-4 w-full md:w-1/3"
+        value={value}
+        onChange={onChange}
       />
     </div>
   );

contexts/Pods.tsx

@@ -0,0 +1,17 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+export interface PodItem {
+  title: string;
+  slug?: string;
+}
+
+export interface PodsContextProps {
+  pods: PodItem[];
+  setPods: Dispatch<SetStateAction<PodItem[]>>;
+}
+
+export const PodsContext = createContext<PodsContextProps>(
+  {} as PodsContextProps
+);
+
+export default PodsContext.Provider;

contexts/User.tsx

@@ -2,6 +2,7 @@ import { createContext, Dispatch, SetStateAction } from 'react';
 
 export type UserObject = {
   username: string;
+  password?: string | null;
 };
 
 export interface UserContextProps {

hooks/useFairOs.tsx

@@ -0,0 +1,206 @@
+/* eslint-disable no-useless-catch */
+// import qs from 'qs';
+import axios from 'axios';
+import { PodItem } from 'contexts/Pods';
+import useUser from 'hooks/useUser';
+
+interface Payload {
+  username?: string;
+  password?: string;
+  address?: string;
+  mnemonic?: string;
+  podName?: string;
+  podReference?: string;
+  directory?: string;
+  file?: any;
+  files?: any;
+}
+
+const host = process.env.NEXT_PUBLIC_FAIROSHOST;
+
+const podNameDefault = 'Home';
+
+const useFairOs = () => {
+  const { user } = useUser();
+
+  const login = async (payload: Payload) => {
+    const { username, password } = payload;
+
+    try {
+      const response = await axios({
+        baseURL: host,
+        url: 'user/login',
+        method: 'POST',
+        data: {
+          user_name: username,
+          password: password,
+        },
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        withCredentials: true,
+      });
+
+      localStorage.setItem('user', JSON.stringify({ username }));
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const logout = async () => {
+    try {
+      const response = await axios({
+        baseURL: host,
+        method: 'POST',
+        url: 'user/logout',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        withCredentials: true,
+        data: {
+          user_name: '',
+          password: '',
+        },
+      });
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const userLoggedIn = async (username: string) => {
+    try {
+      const requestBody = {
+        user_name: username,
+      };
+
+      const response = await axios({
+        baseURL: host,
+        method: 'GET',
+        url: 'user/isloggedin',
+        data: requestBody,
+        params: { user_name: username },
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        withCredentials: true,
+      });
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const getDirectory = async (payload: Payload) => {
+    const { directory, podName } = payload;
+
+    try {
+      const pod_name =
+        podName === undefined || podName === null ? podNameDefault : podName;
+      let data = { dir_path: '', pod_name: pod_name };
+
+      if (directory === 'root') {
+        data = {
+          dir_path: '/',
+          pod_name: pod_name,
+        };
+      } else {
+        data = {
+          dir_path: '/' + directory,
+          pod_name: pod_name,
+        };
+      }
+
+      const response = await axios({
+        baseURL: host,
+        method: 'GET',
+        url: 'dir/ls',
+        params: data,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        withCredentials: true,
+      });
+
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  const getPods = async () => {
+    const response = await axios({
+      baseURL: host,
+      method: 'GET',
+      url: 'pod/ls',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      withCredentials: true,
+    });
+
+    return response;
+  };
+
+  const openPod = async (podName: string) => {
+    try {
+      const openPod = await axios({
+        baseURL: host,
+        method: 'POST',
+        url: 'pod/open',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        data: {
+          pod_name:
+            podName === undefined || podName === null
+              ? podNameDefault
+              : podName,
+          password: user.password,
+        },
+        withCredentials: true,
+      });
+
+      return openPod;
+    } catch (err) {
+      return err;
+    }
+  };
+
+  const getPodsWithHref = async () => {
+    const { data } = await getPods();
+    const podsWithHref: PodItem[] = [];
+
+    data.pod_name.forEach((pod: string) => {
+      if (pod.toLowerCase() === 'home') {
+        podsWithHref.push({
+          title: pod,
+          slug: '/',
+        });
+      } else {
+        podsWithHref.push({
+          title: pod,
+          slug: `/pods/${pod.toLowerCase()}`,
+        });
+      }
+    });
+
+    return podsWithHref;
+  };
+
+  return {
+    login,
+    logout,
+    userLoggedIn,
+    getDirectory,
+    getPods,
+    getPodsWithHref,
+    openPod,
+  };
+};
+
+export default useFairOs;

hooks/usePods.tsx

@@ -0,0 +1,6 @@
+import { PodsContext } from 'contexts/Pods';
+import { useContext } from 'react';
+
+const usePods = () => useContext(PodsContext);
+
+export default usePods;