Add org context, and page to submit a new organisation if none exist for a user

src/App.tsx

@@ -9,12 +9,16 @@ import {
 import {Breadcrumb, type MenuProps} from 'antd';
 import { Layout, Menu, theme } from 'antd';
 import Home from "./Home.tsx";
-import { Route, Routes, useNavigate} from "react-router";
+import {Route, Routes, useLocation, useNavigate} from "react-router";
 import Profile from "./Profile.tsx";
 import {type UserContextType} from './UserContext.tsx';
 import {UserContext} from './UserContext.tsx';
 import type {userObject} from "./UserContext.tsx";
 
+import {type OrgContextType} from './OrgContext.tsx';
+import {OrgContext} from './OrgContext.tsx';
+import type {orgObject} from "./OrgContext.tsx";
+
 const { Header, Content, Sider } = Layout;
 
 type MenuItem = Required<MenuProps>['items'][number];
@@ -37,6 +41,7 @@ function getItem(
 
 const App: React.FC = () => {
     const navigate = useNavigate();
+    const location = useLocation();
     const {
         token: {colorBgContainer, borderRadiusLG},
     } = theme.useToken();
@@ -66,7 +71,23 @@ const App: React.FC = () => {
         setCurrentUser: () => {}
     }
 
+    const defaultOrg: OrgContextType = {
+        currentOrg: {
+            billing_contact: "",
+            owner_contact: "",
+            name: "",
+            status: "",
+            root_user: "",
+            security_contact: "",
+        },
+        setCurrentOrg: () => {}
+    }
+
     const [currentUser, setCurrentUser] = useState<userObject>(defaultUser.currentUser);
+    const [currentOrg, setCurrentOrg] = useState<orgObject>(defaultOrg.currentOrg);
+
+    //  STRILL NEEDS SOMETHING TO get CURRENT USER ORGS and map first one to a CURRENT ORG fetched from the API
+    // STILL NEEDS THE WRAPPER IN THE RETURN STATEMETNS
     /*****************************
      GETTING CURRENT USER FROM API
      *****************************/
@@ -76,7 +97,6 @@ const App: React.FC = () => {
         (async () => {
             if (!auth.user) { return }
             try {
-                console.log(auth.user);
                 const token = auth.user.access_token;
                 const response = await fetch("/api/v1/user/self/db", {
                     headers: {
@@ -90,8 +110,6 @@ const App: React.FC = () => {
         })();
     }, [auth]);
 
-   // const [current_orgs, set_current_orgs] = useState<Organisation | null>(null);
-
 
     if (!currentUser) {
         return(
@@ -121,7 +139,7 @@ const App: React.FC = () => {
 
     const onClick: MenuProps['onClick'] = (e) => {
         switch (e.key) {
-            case 'account':
+            case 'profile':
                 navigate('/profile');
                 break;
             case 'logout':
@@ -140,7 +158,7 @@ const App: React.FC = () => {
     ];
 
     const top_nav_items = [
-        getItem(currentUser.first_name + " " +currentUser.last_name , 'account1', <UserOutlined />, [getItem('Account details', 'account'), getItem('Log out', 'logout')]),
+        getItem(currentUser.first_name + " " +currentUser.last_name , 'account', <UserOutlined />, [getItem('Account details', 'profile'), getItem('Log out', 'logout')]),
         getItem("Organisation Settings", 'orgsettings', <SettingOutlined />),
     ];
     return (
@@ -172,7 +190,7 @@ const App: React.FC = () => {
                 </Sider>
                 <Layout style={{ padding: '0 24px 24px' }}>
                     <Breadcrumb
-                        items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
+                        items={[{ title: 'Home' }, { title: location.pathname.substring(1) }]}
                         style={{ margin: '16px 0' }}
                     />
                     <Content
@@ -187,7 +205,7 @@ const App: React.FC = () => {
 
                         <Routes>
                             <Route path="/" element={<Home/>}/>
-                            {currentUser && <Route path="/account" element={<Profile/>}/> }
+                            {currentUser && <Route path="/profile" element={<Profile/>}/> }
 
                         </Routes>
                     </Content>

src/CreateOrg.tsx

@@ -0,0 +1,85 @@
+// src/Posts.jsx
+
+import {useUserContext} from './UserContext';
+import { Button, Form, Input } from 'antd';
+//import React, {useEffect, useState} from "react";
+import {useAuth} from "react-oidc-context";
+
+const CreateOrg = () => {
+    const { currentUser } = useUserContext();
+    const [form] = Form.useForm();
+    const auth = useAuth();
+
+
+    async function submitOrgData(values: FormData) {
+        if (!auth.user) {
+            return
+        }
+        try {
+            console.log("in here");
+            const [name, q1, q2, q3] = Object.values(values);
+            console.log("end here");
+
+            const data = {
+                "name": name,
+                "intake_questionnaire": {
+                    "question_one": q1,
+                    "question_two": q2,
+                    "question_three": q3,
+                }
+            }
+            console.log(data)
+            const token = auth.user.access_token;
+            const requestOptions = {
+                method: 'POST',
+                body: JSON.stringify(data),
+                headers: {Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json'}
+            }
+            const response = await fetch("/api/v1/org/", requestOptions);
+            await response.json();
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    const onFinish = (values: FormData) => {
+        console.log(values);
+        submitOrgData(values)
+    };
+
+
+    if (!currentUser) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <>
+        <Form
+            layout= "vertical"
+            form={form}
+            onFinish={onFinish}
+        >
+            <Form.Item name="Organisation name" label="Organisation name" rules={[{ required: true }]}>
+            <Input />
+            </Form.Item>
+            <Form.Item name="Question 1" label="How does your organisation support civil society?">
+                <Input placeholder="e.g., Our organisation supports various groups such as ..." />
+            </Form.Item>
+        <Form.Item name="Question 2" label="Name your first reference">
+                <Input placeholder="e.g., SR2 Communciations Limited" />
+            </Form.Item>
+            <Form.Item name="Question 3"  label="Name your second reference">
+            <Input placeholder="e.g., SR2 Professional Services" />
+        </Form.Item>
+        <Form.Item>
+                <Button type="primary"  htmlType="submit">Submit</Button>
+            </Form.Item>
+
+        </Form>
+            </>
+    );
+
+};
+
+export default CreateOrg;

src/OrgContext.tsx

@@ -0,0 +1,25 @@
+import React, { createContext, useContext } from 'react';
+
+interface orgObject {
+    name: string;
+    status: "partial",
+    root_user: "string",
+    owner_contact: "string",
+    billing_contact: "string",
+    security_contact: "string"
+}
+
+export interface OrgContextType {
+    currentOrg: orgObject;
+    setCurrentOrg: React.Dispatch<React.SetStateAction<orgObject>>;
+}
+
+export const OrgContext = createContext<OrgContextType | undefined>(undefined);
+
+export const useOrgContext = () => {
+    const context: OrgContextType | undefined = useContext(OrgContext);
+    if (context === undefined) {
+        throw new Error('Organisation context not found');
+    }
+    return context;
+};

src/UserContext.tsx

@@ -18,7 +18,7 @@ export const UserContext = createContext<UserContextType | undefined>(undefined)
 export const useUserContext = () => {
     const context: UserContextType | undefined = useContext(UserContext);
     if (context === undefined) {
-        throw new Error('jhfhgtfhgfghfhgf not found');
+        throw new Error('User context not found!');
     }
     return context;
 };

src/home.tsx

@@ -1,11 +1,24 @@
 import {Breadcrumb, theme} from "antd";
-import React from "react";
+import React, {useContext} from "react";
+//import {useOrgContext} from './OrgContext';
+import CreateOrg from "./CreateOrg.tsx";
+import {useUserContext} from "./UserContext.tsx";
 
 const Home: React.FC = () => {
     const {
         token: { colorBgContainer, borderRadiusLG },
     } = theme.useToken();
 
+    //const { currentOrg } = useOrgContext();
+    const { currentUser } = useUserContext();
+    console.log(currentUser.organisations);
+    if (currentUser.organisations.length === 0) {
+        return <>
+            <h3>Your user has no organisations yet. Create one here.</h3>
+            <CreateOrg/>
+        </>
+    }
+
     return (<>
         <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />
     <div