feat: implemented ui updates and new features

Author: boris0301

src/client/sidebar/components/LoadingOverlay.tsx renamed to src/client/components/loading-overlay.tsx

@@ -1,54 +1,35 @@
 import { useEffect, useState } from 'react';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import { serverFunctions } from '../../utils/serverFunctions';
+import useAuth from '../../hooks/useAuth';
+import { CircularProgress, Container, Typography } from '@mui/material';
 
-interface AuthState {
-  authorized: boolean;
-  token?: string;
-  message?: string;
-}
-
-type Status = 'idle' | 'loading' | 'success' | 'error';
-
-const Dialog = () => {
+const CreateDiagramDialog = () => {
+  const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
-  const [, setAuthState] = useState<null | AuthState>(null);
-  const [authStatus, setAuthStatus] = useState<Status>('idle');
 
   useEffect(() => {
-    const getAuth = async () => {
-      setAuthStatus('loading');
-      try {
-        const state = await serverFunctions.getAuthorizationState();
-        setAuthState(state);
-        setAuthStatus('success');
-
-        if (state.authorized) {
-          const url = buildUrl('/app/plugins/confluence/select', state.token);
-          setDiagramsUrl(url);
-        }
-      } catch (error) {
-        console.log('Error getting auth data', error);
-        setAuthStatus('error');
-      }
-    };
-
-    getAuth();
-  }, []);
+    if (!authState?.authorized) return;
+    // const url = buildUrl('/app/plugins/confluence/select', state.token);
+    const url = buildUrl(
+      '/app/diagrams/new?pluginSource=googledocs',
+      authState.token
+    );
+    setDiagramsUrl(url);
+  }, [authState]);
 
   useEffect(() => {
     const handleMessage = async (e: MessageEvent) => {
       const action = e.data.action;
-      console.log('action', action, e.data);
       if (action === 'save') {
         const data = e.data.data;
-        console.log(data);
         const metadata = new URLSearchParams({
           projectID: data.projectID,
           documentID: data.documentID,
           major: data.major,
           minor: data.minor,
         });
+
         try {
           await serverFunctions.insertBase64ImageWithMetadata(
             data.diagramImage,
@@ -68,8 +49,41 @@ const Dialog = () => {
     };
   }, []);
 
-  if (authStatus !== 'success') {
-    return null;
+  if (authStatus === 'idle' || authStatus === 'loading') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <CircularProgress />
+      </Container>
+    );
+  }
+
+  if (authStatus === 'error') {
+    return (
+      <Container
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '96.5vh',
+        }}
+      >
+        <Typography variant="h5" gutterBottom my={2} textAlign="center">
+          Error
+        </Typography>
+        <Typography paragraph textAlign="center">
+          Something went wrong. Please try again later.
+        </Typography>
+      </Container>
+    );
   }
 
   return (
@@ -87,4 +101,4 @@ const Dialog = () => {
   );
 };
 
-export default Dialog;
+export default CreateDiagramDialog;

src/client/dialog/components/Dialog.tsx renamed to src/client/create-diagram-dialog/components/create-diagram-dialog.tsx

@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom';
+import CreateDiagramDialog from './components/create-diagram-dialog';
+import './styles.css';
+
+ReactDOM.render(<CreateDiagramDialog />, document.getElementById('index'));

src/client/dialog/index.html renamed to src/client/create-diagram-dialog/index.html

@@ -3,23 +3,23 @@ import { serverFunctions } from '../../utils/serverFunctions';
 import { buildUrl, handleDialogClose } from '../../utils/helpers';
 import useAuth from '../../hooks/useAuth';
 
-const EditDialog = () => {
+const EditDiagramDialog = () => {
   const { authState, authStatus } = useAuth();
   const [diagramsUrl, setDiagramsUrl] = useState('');
 
   useEffect(() => {
-    if (!authState) return;
+    if (!authState?.authorized) return;
+
     const getMetadata = async () => {
       try {
         const metadata = await serverFunctions.readSelectedImageMetadata();
-        console.log(metadata, 'metadata');
         if (typeof metadata === 'string') {
           const params = new URLSearchParams(metadata);
           const projectID = params.get('projectID');
           const documentID = params.get('documentID');
           const major = params.get('major');
           const minor = params.get('minor');
-          if (projectID && documentID && major && minor && authState?.token) {
+          if (projectID && documentID && major && minor) {
             const iframeUrl = buildUrl(
               `/app/projects/${projectID}/diagrams/${documentID}/version/v.${major}.${minor}/edit`,
               authState.token
@@ -31,6 +31,7 @@ const EditDialog = () => {
         console.log(error);
       }
     };
+
     getMetadata();
   }, [authState]);
 
@@ -84,4 +85,4 @@ const EditDialog = () => {
   );
 };
 
-export default EditDialog;
+export default EditDiagramDialog;

src/client/create-diagram-dialog/index.jsx

@@ -0,0 +1,6 @@
+import ReactDOM from 'react-dom';
+import EditDiagramDialog from './components/edit-diagram-dialog';
+
+import './styles.css';
+
+ReactDOM.render(<EditDiagramDialog />, document.getElementById('index'));