diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 1b8ac88..0000000 --- a/.prettierignore +++ /dev/null @@ -1,3 +0,0 @@ -# Ignore artifacts: -build -coverage diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 0967ef4..0000000 --- a/.prettierrc +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/README.md b/README.md index db579d2..7dbf7eb 100644 --- a/README.md +++ b/README.md @@ -17,9 +17,9 @@ If you are developing a production application, we recommend updating the config ```js export default defineConfig([ - globalIgnores(["dist"]), + globalIgnores(['dist']), { - files: ["**/*.{ts,tsx}"], + files: ['**/*.{ts,tsx}'], extends: [ // Other configs... @@ -34,40 +34,40 @@ export default defineConfig([ ], languageOptions: { parserOptions: { - project: ["./tsconfig.node.json", "./tsconfig.app.json"], + project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, -]); +]) ``` You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: ```js // eslint.config.js -import reactX from "eslint-plugin-react-x"; -import reactDom from "eslint-plugin-react-dom"; +import reactX from 'eslint-plugin-react-x' +import reactDom from 'eslint-plugin-react-dom' export default defineConfig([ - globalIgnores(["dist"]), + globalIgnores(['dist']), { - files: ["**/*.{ts,tsx}"], + files: ['**/*.{ts,tsx}'], extends: [ // Other configs... // Enable lint rules for React - reactX.configs["recommended-typescript"], + reactX.configs['recommended-typescript'], // Enable lint rules for React DOM reactDom.configs.recommended, ], languageOptions: { parserOptions: { - project: ["./tsconfig.node.json", "./tsconfig.app.json"], + project: ['./tsconfig.node.json', './tsconfig.app.json'], tsconfigRootDir: import.meta.dirname, }, // other options... }, }, -]); +]) ``` diff --git a/eslint.config.js b/eslint.config.js index 41328dc..a0d668c 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -1,15 +1,15 @@ -import js from "@eslint/js"; -import globals from "globals"; -import reactHooks from "eslint-plugin-react-hooks"; -import reactRefresh from "eslint-plugin-react-refresh"; -import tseslint from "typescript-eslint"; -import { defineConfig, globalIgnores } from "eslint/config"; +import js from '@eslint/js' +import globals from 'globals' +import reactHooks from 'eslint-plugin-react-hooks' +import reactRefresh from 'eslint-plugin-react-refresh' +import tseslint from 'typescript-eslint' +import { defineConfig, globalIgnores } from 'eslint/config' import eslintConfigPrettier from "eslint-config-prettier"; export default defineConfig([ - globalIgnores(["dist"]), + globalIgnores(['dist']), { - files: ["**/*.{ts,tsx}"], + files: ['**/*.{ts,tsx}'], extends: [ js.configs.recommended, tseslint.configs.recommended, @@ -21,4 +21,4 @@ export default defineConfig([ globals: globals.browser, }, }, -]); +]) diff --git a/package-lock.json b/package-lock.json index 4f60746..9fbb0ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,6 @@ "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.5.2", "globals": "^17.6.0", - "prettier": "3.8.4", "react-highlight-words": "^0.21.0", "typescript": "~6.0.2", "typescript-eslint": "^8.59.2", @@ -3357,22 +3356,6 @@ "node": ">= 0.8.0" } }, - "node_modules/prettier": { - "version": "3.8.4", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.4.tgz", - "integrity": "sha512-N2MylSdi48+5N/6S5j+maeHbUSIzzZ5uOcX5Hm4QpV8Dkb1HFjfAKTKX6yNPJQD9AhcT3ifHNB66tWTTJDi11Q==", - "dev": true, - "license": "MIT", - "bin": { - "prettier": "bin/prettier.cjs" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "url": "https://github.com/prettier/prettier?sponsor=1" - } - }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 7d40b67..3dbd1a7 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,6 @@ "eslint-plugin-react-hooks": "^7.1.1", "eslint-plugin-react-refresh": "^0.5.2", "globals": "^17.6.0", - "prettier": "3.8.4", "react-highlight-words": "^0.21.0", "typescript": "~6.0.2", "typescript-eslint": "^8.59.2", diff --git a/renovate.json b/renovate.json index 6c7980a..c433e3a 100644 --- a/renovate.json +++ b/renovate.json @@ -1,6 +1,8 @@ { "$schema": "https://docs.renovatebot.com/renovate-schema.json", - "extends": ["config:recommended"], + "extends": [ + "config:recommended" + ], "minimumReleaseAge": "14 days", "gitAuthor": "Renovate" } diff --git a/src/App.tsx b/src/App.tsx index c9e625a..ed25317 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,273 +1,252 @@ -import "./App.css"; + +import './App.css' import { useAuth, hasAuthParams } from "react-oidc-context"; -import React, { useState } from "react"; +import React, {useState} from 'react'; import { - SettingOutlined, - UserOutlined, - DeploymentUnitOutlined, -} from "@ant-design/icons"; -import { Breadcrumb, type MenuProps } from "antd"; -import { Layout, Menu, theme } from "antd"; + SettingOutlined, + UserOutlined, + DeploymentUnitOutlined, +} from '@ant-design/icons'; +import {Breadcrumb, type MenuProps} from 'antd'; +import { Layout, Menu, theme } from 'antd'; import Home from "./Home.tsx"; -import { Route, Routes, useLocation, useNavigate } from "react-router"; +import {Route, Routes, useLocation, useNavigate} from "react-router"; import Profile from "./Profile.tsx"; -import { type UserContextType } from "./hooks/UserContext.ts"; -import { UserContext } from "./hooks/UserContext.ts"; -import type { userObject } from "./hooks/UserContext.ts"; +import {type UserContextType} from './hooks/UserContext.ts'; +import {UserContext} from './hooks/UserContext.ts'; +import type {userObject} from "./hooks/UserContext.ts"; import Organisations from "./Organisations.tsx"; -import { RefreshContext } from "./hooks/RefreshContext.ts"; +import {RefreshContext} from "./hooks/RefreshContext.ts"; import Bridges from "./Bridges.tsx"; -import { - OrgContext, - type OrgContextType, - type OrgObject, -} from "./hooks/OrgContext.ts"; +import {OrgContext, type OrgContextType, type OrgObject} from "./hooks/OrgContext.ts"; import CreateOrgFlow from "./CreateOrgFlow.tsx"; const { Header, Content, Sider } = Layout; -type MenuItem = Required["items"][number]; +type MenuItem = Required['items'][number]; + function getItem( - label: React.ReactNode, - key: React.Key, - icon?: React.ReactNode, - children?: MenuItem[], + label: React.ReactNode, + key: React.Key, + icon?: React.ReactNode, + children?: MenuItem[], ): MenuItem { - return { - key, - icon, - children, - label, - } as MenuItem; + return { + key, + icon, + children, + label, + } as MenuItem; } + const App: React.FC = () => { - const navigate = useNavigate(); - const location = useLocation(); - const { - token: { colorBgContainer, borderRadiusLG }, - } = theme.useToken(); - /******************* + const navigate = useNavigate(); + const location = useLocation(); + const { + token: {colorBgContainer, borderRadiusLG}, + } = theme.useToken(); + /******************* SIGNING IN WITH OIDC *******************/ - const auth = useAuth(); - const hasTriedSignin = React.useRef(false); - // automatically sign-in - React.useEffect(() => { - if ( - !hasAuthParams() && - !auth.isAuthenticated && - !auth.activeNavigator && - !auth.isLoading && - !hasTriedSignin.current - ) { - auth.signinRedirect(); - hasTriedSignin.current = true; + const auth = useAuth(); + const hasTriedSignin = React.useRef(false); + // automatically sign-in + React.useEffect(() => { + if (!hasAuthParams() && + !auth.isAuthenticated && !auth.activeNavigator && !auth.isLoading && + !hasTriedSignin.current + ) { + auth.signinRedirect(); + hasTriedSignin.current = true; + } + }, [auth]); + + const defaultUser: UserContextType = { + currentUser: { + first_name: "", + last_name: "", + email: "", + organisations: [], + id: -1 + }, + setCurrentUser: () => {} } - }, [auth]); - const defaultUser: UserContextType = { - currentUser: { - first_name: "", - last_name: "", - email: "", - organisations: [], - id: -1, - }, - setCurrentUser: () => {}, - }; + const defaultOrg: OrgContextType = { + currentOrg: { + name: "", + status: "partial", + root_user_email: "", + billing_contact: {email: "", id: -1}, + owner_contact: {email: "", id: -1}, + security_contact: {email: "", id: -1}, + organisation_id: -1, + intake_questionnaire: { + question_one: "", + question_two: "", + question_three: "", + }, + }, + setCurrentOrg: () => {} + } - const defaultOrg: OrgContextType = { - currentOrg: { - name: "", - status: "partial", - root_user_email: "", - billing_contact: { email: "", id: -1 }, - owner_contact: { email: "", id: -1 }, - security_contact: { email: "", id: -1 }, - organisation_id: -1, - intake_questionnaire: { - question_one: "", - question_two: "", - question_three: "", - }, - }, - setCurrentOrg: () => {}, - }; + const [currentUser, setCurrentUser] = useState(defaultUser.currentUser); + const [refreshKey, setRefreshKey] = useState(1); + const [currentOrg, setCurrentOrg] = useState(defaultOrg.currentOrg); - const [currentUser, setCurrentUser] = useState( - defaultUser.currentUser, - ); - const [refreshKey, setRefreshKey] = useState(1); - const [currentOrg, setCurrentOrg] = useState( - defaultOrg.currentOrg, - ); - /***************************** + /***************************** GETTING CURRENT USER FROM API *****************************/ - // const [current_user, setUser] = useState(null); + // const [current_user, setUser] = useState(null); - React.useEffect(() => { - (async () => { - if (!auth.user) { - return; - } - try { - const token = auth.user.access_token; - const response = await fetch("/api/v1/user/self/db", { - headers: { - Authorization: `Bearer ${token}`, - }, - }); - setCurrentUser(await response.json()); - } catch (e) { - console.error(e); - } - })(); - }, [auth, refreshKey]); + React.useEffect(() => { + (async () => { + if (!auth.user) { return } + try { + const token = auth.user.access_token; + const response = await fetch("/api/v1/user/self/db", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + setCurrentUser(await response.json()); + } catch (e) { + console.error(e); + } + })(); + }, [auth, refreshKey]); - if (!currentUser) { - return ( - -
Determining your existing user...
; - - ); - } - if (auth.isLoading) { - return ( - -
Signing you in/out...
; - - ); - } - - if (!auth.isAuthenticated) { - return ( - -
Unable to log in
; - - ); - } - - const onClick: MenuProps["onClick"] = (e) => { - switch (e.key) { - case "profile": - navigate("/profile"); - break; - case "orgs": - navigate("/create-org-flow"); - break; - case "logout": - auth.removeUser().then(() => navigate("/profile")); - break; - case "bridges": - navigate("/bridges"); - break; - default: - console.log("Clicked item:", e.key); + if (!currentUser) { + return( + +
Determining your existing user...
; + + ); } - }; - let side_nav_items: MenuItem[] = []; + if (auth.isLoading) { + return( + +
Signing you in/out...
; + + ); + } - const top_nav_items = [ - getItem( - currentUser.first_name + " " + currentUser.last_name, - "account", - , - [getItem("Account details", "profile"), getItem("Log out", "logout")], - ), - ]; + if (!auth.isAuthenticated) { + return( + +
Unable to log in
; + + ); + } - if (currentUser.organisations.length > 0) { - side_nav_items = [ - getItem("Onboarding", "orgs", ), - getItem("Bridges", "bridges", ), + + + const onClick: MenuProps['onClick'] = (e) => { + switch (e.key) { + case 'profile': + navigate('/profile'); + break; + case 'orgs': + navigate('/create-org-flow'); + break; + case 'logout': + auth.removeUser().then(() => navigate('/profile')); + break; + case 'bridges': + navigate('/bridges'); + break; + default: + console.log('Clicked item:', e.key); + } + }; + + + let side_nav_items: MenuItem[] = [] + + const top_nav_items = [ + getItem(currentUser.first_name + " " +currentUser.last_name , 'account', , [getItem('Account details', 'profile'), getItem('Log out', 'logout')]), ]; - const currentOrg = currentUser.organisations[0]["name"]; - top_nav_items.push( - getItem(currentOrg + " Settings", "orgsettings", ), - ); - } + if (currentUser.organisations.length > 0) { - return ( - - - - -
-
-

SR22

-
- + side_nav_items = [ getItem('Onboarding', 'orgs', ), + getItem('Bridges', 'bridges', ), ]; + + const currentOrg = currentUser.organisations[0]['name'] + top_nav_items.push(getItem(currentOrg +" Settings", 'orgsettings', )); + + } + + return ( + + + + +
+
+

SR22

+
+
- - - - - - - - } /> - {currentUser && ( - } /> - )} - {currentUser && ( - } - /> - )} - {currentUser && ( - } /> - )} + + + + + + - {currentUser && ( - } /> - )} - - - + + }/> + {currentUser && }/> } + {currentUser && }/> } + {currentUser && }/> } + + {currentUser && }/> } + + + + - + - - - ); -}; + + -export default App; + ); + +} + + +export default App diff --git a/src/Bridges.tsx b/src/Bridges.tsx index 300f7ce..1a0a078 100644 --- a/src/Bridges.tsx +++ b/src/Bridges.tsx @@ -1,203 +1,161 @@ -import { useRef, useState } from "react"; -import { SearchOutlined } from "@ant-design/icons"; -import type { InputRef, TableColumnsType, TableColumnType } from "antd"; -import { Button, Input, Space, Table } from "antd"; -import type { FilterDropdownProps } from "antd/es/table/interface"; -import Highlighter from "react-highlight-words"; -import { QRCode } from "antd"; +import { useRef, useState } from 'react'; +import { SearchOutlined } from '@ant-design/icons'; +import type { InputRef, TableColumnsType, TableColumnType } from 'antd'; +import { Button, Input, Space, Table } from 'antd'; +import type { FilterDropdownProps } from 'antd/es/table/interface'; +import Highlighter from 'react-highlight-words'; +import { QRCode } from 'antd'; interface BridgeDataType { - fingerprint: string; - bridgeline: string; - qrCodeText: string; + fingerprint: string; + bridgeline: string; + qrCodeText: string; } const Bridges = () => { - const bridgeLines: BridgeDataType[] = [ - { - fingerprint: "0C6DDE3F9FC377A5E69DC044E81C857277148D71", - bridgeline: - "obfs4 62.224.107.157:443 0C6DDE3F9FC377A5E69DC044E81C857277148D71 cert=6vp+cyZmJOp+QFtytv9Ca+Z+ASF4l7r12MeEevvufl4OcDimBhjQlxctjfgdCmnT7iu7Lg iat-mode=0", - qrCodeText: "", - }, - { - fingerprint: "8DFC222D2295A909B34B3AAAA584648EE6FAF14D", - bridgeline: - "obfs4 144.31.125.189:2063 8DFC222D2295A909B34B3AAAA584648EE6FAF14D cert=3BPE8q1dHF1AWoqsQEDGZHrRXPw/AaTwyM7YLGMOfFlxY6qRAlW1Jq0LlzKbe4Gh9+SacA iat-mode=0", - qrCodeText: "", - }, - { - fingerprint: "0C6DDE3F9FC377A5E69DC044E81C857277148D71", - bridgeline: - "obfs4 62.224.107.157:443 0C6DDE3F9FC377A5E69DC044E81C857277148D71 cert=6vp+cyZmJOp+QFtytv9Ca+Z+ASF4l7r12MeEevvufl4OcDimBhjQlxctjfgdCmnT7iu7Lg iat-mode=0", - qrCodeText: "", - }, - { - fingerprint: "8DFC222D2295A909B34B3AAAA584648EE6FAF14D", - bridgeline: - "obfs4 144.31.125.189:2063 8DFC222D2295A909B34B3AAAA584648EE6FAF14D cert=3BPE8q1dHF1AWoqsQEDGZHrRXPw/AaTwyM7YLGMOfFlxY6qRAlW1Jq0LlzKbe4Gh9+SacA iat-mode=0", - qrCodeText: "", - }, - ]; - function makeQRCodeText(bridgeline: string) { - return '["' + bridgeline + '"]'; - } + const bridgeLines: BridgeDataType[] = [ + {fingerprint: '0C6DDE3F9FC377A5E69DC044E81C857277148D71', bridgeline: "obfs4 62.224.107.157:443 0C6DDE3F9FC377A5E69DC044E81C857277148D71 cert=6vp+cyZmJOp+QFtytv9Ca+Z+ASF4l7r12MeEevvufl4OcDimBhjQlxctjfgdCmnT7iu7Lg iat-mode=0", qrCodeText: "" }, + {fingerprint:'8DFC222D2295A909B34B3AAAA584648EE6FAF14D', bridgeline: "obfs4 144.31.125.189:2063 8DFC222D2295A909B34B3AAAA584648EE6FAF14D cert=3BPE8q1dHF1AWoqsQEDGZHrRXPw/AaTwyM7YLGMOfFlxY6qRAlW1Jq0LlzKbe4Gh9+SacA iat-mode=0", qrCodeText: "" }, + {fingerprint: '0C6DDE3F9FC377A5E69DC044E81C857277148D71', bridgeline: "obfs4 62.224.107.157:443 0C6DDE3F9FC377A5E69DC044E81C857277148D71 cert=6vp+cyZmJOp+QFtytv9Ca+Z+ASF4l7r12MeEevvufl4OcDimBhjQlxctjfgdCmnT7iu7Lg iat-mode=0", qrCodeText: ""}, + {fingerprint:'8DFC222D2295A909B34B3AAAA584648EE6FAF14D', bridgeline: "obfs4 144.31.125.189:2063 8DFC222D2295A909B34B3AAAA584648EE6FAF14D cert=3BPE8q1dHF1AWoqsQEDGZHrRXPw/AaTwyM7YLGMOfFlxY6qRAlW1Jq0LlzKbe4Gh9+SacA iat-mode=0", qrCodeText: ""}, + ]; - bridgeLines.forEach((line) => { - line.qrCodeText = makeQRCodeText(line.bridgeline); - }); - console.log(bridgeLines); - const [searchText, setSearchText] = useState(""); - const [searchedColumn, setSearchedColumn] = useState(""); - const searchInput = useRef(null); + function makeQRCodeText(bridgeline: string) { + return '["' + bridgeline + '"]'; + } - const handleSearch = ( - selectedKeys: string[], - confirm: FilterDropdownProps["confirm"], - dataIndex: DataIndex, - ) => { - confirm(); - setSearchText(selectedKeys[0]); - setSearchedColumn(dataIndex); - }; + bridgeLines.forEach((line) => {line.qrCodeText = makeQRCodeText(line.bridgeline)}); + console.log(bridgeLines); - const handleReset = (clearFilters: () => void) => { - clearFilters(); - setSearchText(""); - }; + const [searchText, setSearchText] = useState(''); + const [searchedColumn, setSearchedColumn] = useState(''); + const searchInput = useRef(null); - type DataIndex = keyof BridgeDataType; - const getColumnSearchProps = ( - dataIndex: DataIndex, - ): TableColumnType => ({ - filterDropdown: ({ - setSelectedKeys, - selectedKeys, - confirm, - clearFilters, - close, - }) => ( -
e.stopPropagation()}> - - setSelectedKeys(e.target.value ? [e.target.value] : []) - } - onPressEnter={() => - handleSearch(selectedKeys as string[], confirm, dataIndex) - } - style={{ marginBottom: 8, display: "block" }} - /> - - - - - - -
- ), - filterIcon: (filtered: boolean) => ( - - ), - onFilter: (value, record) => - record[dataIndex] - .toString() - .toLowerCase() - .includes((value as string).toLowerCase()), - filterDropdownProps: { - onOpenChange(open) { - if (open) { - setTimeout(() => searchInput.current?.select(), 100); - } - }, - }, - render: (text) => - searchedColumn === dataIndex ? ( - - ) : ( - text - ), - }); + const handleSearch = ( + selectedKeys: string[], + confirm: FilterDropdownProps['confirm'], + dataIndex: DataIndex, + ) => { + confirm(); + setSearchText(selectedKeys[0]); + setSearchedColumn(dataIndex); + }; - const bridgesColumns: TableColumnsType = [ - { - title: "Fingerprint", - dataIndex: "fingerprint", - key: "fingerprint", - width: "30%", - ...getColumnSearchProps("fingerprint"), - }, + const handleReset = (clearFilters: () => void) => { + clearFilters(); + setSearchText(''); + }; - { - title: "Bridgeline", - dataIndex: "bridgeline", - key: "bridgeline", - width: "40%", - ...getColumnSearchProps("bridgeline"), - }, + type DataIndex = keyof BridgeDataType; + const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType => ({ + filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => ( +
e.stopPropagation()}> + setSelectedKeys(e.target.value ? [e.target.value] : [])} + onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex)} + style={{ marginBottom: 8, display: 'block' }} + /> + + + + + + +
+ ), + filterIcon: (filtered: boolean) => ( + + ), + onFilter: (value, record) => + record[dataIndex] + .toString() + .toLowerCase() + .includes((value as string).toLowerCase()), + filterDropdownProps: { + onOpenChange(open) { + if (open) { + setTimeout(() => searchInput.current?.select(), 100); + } + }, + }, + render: (text) => + searchedColumn === dataIndex ? ( + + ) : ( + text + ), + }); - { - title: "QR Code", - width: "40%", - key: "qrCodeText", - dataIndex: "qrCodeText", - render: (_text, record) => { - return ; - }, - }, - ]; + const bridgesColumns: TableColumnsType = [ + {title: 'Fingerprint', + dataIndex: 'fingerprint', + key: 'fingerprint', + width: '30%', + ...getColumnSearchProps('fingerprint')}, - return ( - <> - - columns={bridgesColumns} - dataSource={bridgeLines} - /> - ; - - ); -}; + {title: 'Bridgeline', + dataIndex: 'bridgeline', + key: 'bridgeline', + width: '40%', + ...getColumnSearchProps('bridgeline')}, -export default Bridges; + {title: 'QR Code', + width: '40%', + key: 'qrCodeText', + dataIndex: 'qrCodeText', + render: (_text, record) => {return ()} + }, + + ] + + + return( + <> + + columns={bridgesColumns} dataSource={bridgeLines} />; + ); + +} + +export default Bridges; \ No newline at end of file diff --git a/src/CreateOrgFlow.tsx b/src/CreateOrgFlow.tsx index d9d4714..23ab56d 100644 --- a/src/CreateOrgFlow.tsx +++ b/src/CreateOrgFlow.tsx @@ -1,254 +1,187 @@ // src/Posts.jsx -import { useUserContext } from "./hooks/UserContext.ts"; -import { Button, Form, Input } from "antd"; +import {useUserContext} from './hooks/UserContext.ts'; +import { Button, Form, Input } from 'antd'; //import React, {useEffect, useState} from "react"; -import { useAuth } from "react-oidc-context"; -import { RefreshContext } from "./hooks/RefreshContext.ts"; -import { useContext, useState } from "react"; -import { useOrgContext } from "./hooks/OrgContext.ts"; +import {useAuth} from "react-oidc-context"; +import {RefreshContext} from "./hooks/RefreshContext.ts"; +import {useContext, useState} from "react"; +import {useOrgContext} from "./hooks/OrgContext.ts"; const CreateOrgStep1 = () => { - const { currentUser } = useUserContext(); - const [form] = Form.useForm(); - const auth = useAuth(); - const { refreshKey, setRefreshKey } = useContext(RefreshContext); - const { currentOrg, setCurrentOrg } = useOrgContext(); - console.log("context value:", { currentOrg, setCurrentOrg }); + const {currentUser} = useUserContext(); + const [form] = Form.useForm(); + const auth = useAuth(); + const {refreshKey, setRefreshKey} = useContext(RefreshContext); + const {currentOrg, setCurrentOrg} = useOrgContext(); + console.log('context value:', {currentOrg, setCurrentOrg}); - const { TextArea } = Input; - const [currentStep, setCurrentStep] = useState(1); + const {TextArea} = Input; + const [currentStep, setCurrentStep] = useState(1); - async function submitOrgBasicData(values: FormData) { - if (!auth.user) { - return; + async function submitOrgBasicData(values: FormData) { + if (!auth.user) { + return + } + try { + const [name, q1, q2] = Object.values(values); + const data = { + "name": name, + "intake_questionnaire": { + "question_one": q1, + "question_two": q2, + } + } + + const token = auth.user.access_token; + const requestOptions = { + method: 'POST', + body: JSON.stringify(data), + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json' + } + } + const response_org = await fetch("/api/v1/org", requestOptions); + const orgID = await response_org.json(); + const response_currentOrg = await fetch("/api/v1/org?org_id=" + orgID['id'], { + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json' + } + }); + const currentOrgData = await response_currentOrg.json() + setCurrentOrg(currentOrgData['organisations'][0]); + setCurrentStep(currentStep + 1); + + } catch (e) { + console.error(e); + } } - try { - const [name, q1, q2] = Object.values(values); - const data = { - name: name, - intake_questionnaire: { - question_one: q1, - question_two: q2, - }, - }; - const token = auth.user.access_token; - const requestOptions = { - method: "POST", - body: JSON.stringify(data), - headers: { - Authorization: `Bearer ${token}`, - "Content-Type": "application/json", - }, - }; - const response_org = await fetch("/api/v1/org", requestOptions); - const orgID = await response_org.json(); - const response_currentOrg = await fetch( - "/api/v1/org?org_id=" + orgID["id"], - { - headers: { - Authorization: `Bearer ${token}`, - "Content-Type": "application/json", - }, - }, - ); - const currentOrgData = await response_currentOrg.json(); - setCurrentOrg(currentOrgData["organisations"][0]); - setCurrentStep(currentStep + 1); - } catch (e) { - console.error(e); + async function submitOrgBillingData(values: FormData) { + if (!auth.user) { + return + } + try { + const [first_name, last_name, email, phone_number, vat_number, street_address, street_address_line_2, locality] = Object.values(values); + const data = { + "organisation_id": currentOrg.organisation_id, + "contact_type": "billing", + "first_name": first_name, + "last_name": last_name, + "email": email, + "phone_number": phone_number, + "vat_number": vat_number, + "street_address": street_address, + "street_address_line_2": street_address_line_2, + "locality": locality, + } + + const token = auth.user.access_token; + const requestOptions = { + method: 'PATCH', + body: JSON.stringify(data), + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json' + } + } + await fetch("/api/v1/org/contact", requestOptions); + setCurrentStep(currentStep + 1); + setRefreshKey(refreshKey +1); + + } catch (e) { + console.error(e); + } } - } - async function submitOrgBillingData(values: FormData) { - if (!auth.user) { - return; + if (!currentUser) { + return
Loading...
; } - try { - const [ - first_name, - last_name, - email, - phone_number, - vat_number, - street_address, - street_address_line_2, - locality, - ] = Object.values(values); - const data = { - organisation_id: currentOrg.organisation_id, - contact_type: "billing", - first_name: first_name, - last_name: last_name, - email: email, - phone_number: phone_number, - vat_number: vat_number, - street_address: street_address, - street_address_line_2: street_address_line_2, - locality: locality, - }; - const token = auth.user.access_token; - const requestOptions = { - method: "PATCH", - body: JSON.stringify(data), - headers: { - Authorization: `Bearer ${token}`, - "Content-Type": "application/json", - }, - }; - await fetch("/api/v1/org/contact", requestOptions); - setCurrentStep(currentStep + 1); - setRefreshKey(refreshKey + 1); - } catch (e) { - console.error(e); + if (currentStep === 1) { + return ( + <> +

Step 1 - Basic info

+
+ + + +

Intake Questionnaire

+ +