UI Improvements (#140)

* Add Basic Bottom Bar * Add Title (#134) * Fix Console Logs * Overlay Bottom Bar * Basic Recenter Button & Firebase Config Fix * Finalize Canvas Recenter * Remove Manually Regen Button * Add Node Glow * Update Animation * Update MindMap References * Better Title Input (#144) * longer dialog, ellipses on overflow * Deselect on enter * Remove comments cleanup * Actually let you change the title to what you want * Fix Firebase Config Issue * Keep Text Legible on Node Glow * Fix BubbleLink Node Type * Fix Help Dialog Co-authored-by: Saketh Reddy <[email protected]>
SpiritSeal · Oct 22, 2022 · d461284 · d461284
1 parent 1a6a9e1
commit d461284
Show file tree

Hide file tree

Showing 27 changed files with 402 additions and 662 deletions.
diff --git a/.env b/.env
@@ -0,0 +1,18 @@
+REACT_APP_FIREBASE_API_KEY = AIzaSyAcH2oqXkfT2gJjbgmQeU62GmHy78PXyww
+REACT_APP_FIREBASE_AUTH_DOMAIN = bubblemap-app.firebaseapp.com
+REACT_APP_FIREBASE_PROJECT_ID = bubblemap-app
+REACT_APP_FIREBASE_STORAGE_BUCKET = bubblemap-app.appspot.com
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID = 961385019430
+REACT_APP_FIREBASE_APP_ID = 1:961385019430:web:d81b367e47eaecfc430ee7
+REACT_APP_FIREBASE_MEASUREMENT_ID = G-EYXHSKR3ZV
+
+REACT_APP_FIREBASE_API_KEY_DEV = AIzaSyD-oEhhMx9GRPYa1Dn6qhFR_yBV18KOY8Q
+REACT_APP_FIREBASE_AUTH_DOMAIN_DEV = mind-map-testing.firebaseapp.com
+REACT_APP_FIREBASE_PROJECT_ID_DEV = mind-map-testing
+REACT_APP_FIREBASE_STORAGE_BUCKET_DEV = mind-map-testing.appspot.com
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID_DEV = 427950169016
+REACT_APP_FIREBASE_APP_ID_DEV = 1:427950169016:web:ca279979776510972d0d4d
+REACT_APP_FIREBASE_MEASUREMENT_ID_DEV = G-GZZRF9XDMM
+
+
+GENERATE_SOURCEMAP=false
diff --git a/.env.development b/.env.development
diff --git a/.env.production b/.env.production
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -11,13 +11,13 @@
 1. Clone the repo
 
    ```
-   > git clone https://github.com/SpiritSeal/mindmap.git
-   > cd mindmap
+   > git clone https://github.com/SpiritSeal/bubblemap.git
+   > cd bubblemap
    ```
 
    or
 
-   [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/SpiritSeal/mindmap)
+   [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/SpiritSeal/bubblemap)
 
 1. Install dependencies
    ```

diff --git a/.gitignore b/.gitignore
@@ -196,5 +196,4 @@ tsconfig.tsbuildinfo
 
 *.secret
 
-.env
 .runtimeconfig.json
diff --git a/README.md b/README.md
@@ -1,5 +1,7 @@
-# Force Directed Mind Map Tree for rapid (Collaborative) idea generation
+# Bubble Map
+
+Force Directed Mind Mapping Tree for rapid (Collaborative) idea generation
 
 ## Contributing
 
-Interesting in contributing? Check out the [GitHub repository](https://github.com/SpiritSeal/mindmap) and read our [contributing instructions](https://github.com/SpiritSeal/mindmap/blob/main/.github/CONTRIBUTING.md)
+Interesting in contributing? Check out the [GitHub repository](https://github.com/SpiritSeal/bubblemap) and read our [contributing instructions](https://github.com/SpiritSeal/bubblemap/blob/main/.github/CONTRIBUTING.md)
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Mind Map</title>
+    <title>Bubble Map</title>
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "Mind Map",
-  "name": "Mind Map",
+  "short_name": "Bubble Map",
+  "name": "Bubble Map",
   "icons": [],
   "start_url": ".",
   "display": "standalone",

diff --git a/src/App.tsx b/src/App.tsx
@@ -48,6 +48,7 @@ import Routing from './components/Routing';
 import Loading from './components/Loading';
 
 const isDev = process.env.NODE_ENV !== 'production';
+const isPreview = !(window.location.host === 'bubblemap.app');
 
 const firebaseConfig = {
   apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
@@ -59,6 +60,16 @@ const firebaseConfig = {
   measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
 };
 
+const firebaseConfigPreview = {
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY_DEV,
+  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN_DEV,
+  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID_DEV,
+  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET_DEV,
+  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID_DEV,
+  appId: process.env.REACT_APP_FIREBASE_APP_ID_DEV,
+  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID_DEV,
+};
+
 const useInitFirebaseSDKs = (): {
   loading: boolean;
   auth: Auth | null;
@@ -272,12 +283,12 @@ class ErrorBoundary extends Component {
             }}
           >
             <a
-              href="https://github.com/SpiritSeal/mindmap/issues"
+              href="https://github.com/SpiritSeal/bubblemap/issues"
               target="_blank"
               rel="noopener noreferrer"
             >
               Think you found a bug? Please open a new issue in our GitHub Repo:
-              https://github.com/SpiritSeal/mindmap
+              https://github.com/SpiritSeal/bubblemap
             </a>
           </div>
         </div>
@@ -290,7 +301,10 @@ class ErrorBoundary extends Component {
 const App = () => (
   <ErrorBoundary>
     <Suspense fallback={<Loading />}>
-      <FirebaseAppProvider firebaseConfig={firebaseConfig} suspense>
+      <FirebaseAppProvider
+        firebaseConfig={isPreview ? firebaseConfigPreview : firebaseConfig}
+        suspense
+      >
         <Suspense fallback={<Loading />}>
           <AppWithFirebase />
         </Suspense>

diff --git a/src/components/Navigation/index.tsx b/src/components/Navigation/index.tsx
@@ -44,12 +44,12 @@ const Navigation = () => {
         <Toolbar>
           <ButtonBase onClick={() => navigate('/')}>
             <img
-              src={`${process.env.PUBLIC_URL}/assets/logos/Mind Map Logo.svg`}
+              src={`${process.env.PUBLIC_URL}/assets/logos/Bubble Map Logo.svg`}
               height="50"
               width="50"
-              alt="Mind Map Logo"
+              alt="Bubble Map Logo"
             />
-            <strong> Mind Map</strong>
+            <strong> Bubble Map</strong>
           </ButtonBase>
           {/* <NavBarItems /> */}
           <div style={{ marginLeft: 'auto', marginRight: 0 }}>

diff --git a/src/components/Routing/index.tsx b/src/components/Routing/index.tsx
@@ -98,7 +98,12 @@ const Routing = () => {
               element={
                 <>
                   <MindMap />
-                  <ClaimAccount />
+                  <ClaimAccount
+                    location={{
+                      horizontal: 'center',
+                      vertical: 'top',
+                    }}
+                  />
                 </>
               }
             />

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -1,13 +1,21 @@
 import React from 'react';
 import { Box, Button, Container, styled, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
-import { useAuth, useSigninCheck } from 'reactfire';
-import { signInAnonymously } from 'firebase/auth';
+import { useAuth, useFirestore, useSigninCheck } from 'reactfire';
+import { signInAnonymously, UserCredential } from 'firebase/auth';
+import {
+  addDoc,
+  collection,
+  serverTimestamp,
+  Timestamp,
+} from 'firebase/firestore';
+import { MindMap } from '../../types';
 
 const HomePage = () => {
   const auth = useAuth();
+  const firestore = useFirestore();
   const navigate = useNavigate();
-  const signinCheck = useSigninCheck().data;
+  const signInCheck = useSigninCheck().data;
 
   const Content = styled(Container)(({ theme }) => ({
     display: 'flex',
@@ -45,16 +53,46 @@ const HomePage = () => {
     },
   }));
 
+  const mindmapsCollection = collection(firestore, 'mindmaps');
+
+  const createMindMap = (title: string, user: UserCredential) => {
+    const newDocData: MindMap = {
+      metadata: {
+        createdAt: serverTimestamp() as Timestamp,
+        createdBy: user.user.uid,
+        updatedAt: serverTimestamp() as Timestamp,
+        updatedBy: user.user.uid,
+      },
+      nodes: [
+        {
+          parent: 0,
+          text: title,
+          id: 0,
+        },
+      ],
+      permissions: {
+        owner: user.user.uid,
+        delete: [],
+        read: [],
+        write: [],
+      },
+      title,
+    };
+    addDoc(mindmapsCollection, newDocData).then((newDoc) => {
+      navigate(`/mindmaps/${newDoc.id}`);
+    });
+  };
+
   return (
     <div>
       <Box sx={{ pt: 0 }}>
         <Content maxWidth="md">
           <Logo
-            src={`${process.env.PUBLIC_URL}/assets/logos/Mind Map Logo.svg`}
-            alt="MindMap Logo"
+            src={`${process.env.PUBLIC_URL}/assets/logos/Bubble Map Logo.svg`}
+            alt="Bubble Map Logo"
           />
           <div>
-            <Title>Mind Map</Title>
+            <Title>Bubble Map</Title>
             <Typography
               variant="h4"
               component="p"
@@ -64,11 +102,13 @@ const HomePage = () => {
               An intuitive mind mapping tool for rapid collaborative AI-assisted
               idea generation
             </Typography>
-            {!signinCheck.user ? (
+            {!signInCheck.user ? (
               <Button
                 style={{ marginTop: 10 }}
                 onClick={async () => {
-                  signInAnonymously(auth).then(() => navigate('/mindmaps'));
+                  signInAnonymously(auth).then((user) =>
+                    createMindMap('Untitled MindMap', user)
+                  );
                 }}
                 variant="contained"
                 size="large"

diff --git a/src/pages/MindMap/Bubble.tsx b/src/pages/MindMap/Bubble.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { SimulationNodeDatum } from 'd3-force';
 import { Divider, Menu, MenuItem, useTheme } from '@mui/material';
 import { localNode as nodeType } from '../../types';
+import './MindMap.css';
 
 const radius = 15;
 const lineHeight = 15.5;
@@ -233,6 +234,7 @@ const Bubble = ({
             : theme.palette.primary.main
         }
         stroke={getStrokeColor()}
+        className={selected ? 'root-node-glow' : ''}
       />
       {/* print the main text in the bubble */}
       {/* main text uses https://observablehq.com/@mbostock/fit-text-to-circle */}

diff --git a/src/pages/MindMap/BubbleLink.tsx b/src/pages/MindMap/BubbleLink.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { SimulationNodeDatum } from 'd3-force';
 import { useTheme } from '@mui/material';
+import { node } from '../../types';
 
 const BubbleLink = ({
   sourceNode,
   targetNode,
 }: {
-  sourceNode: SimulationNodeDatum;
-  targetNode: SimulationNodeDatum;
+  sourceNode: SimulationNodeDatum & node;
+  targetNode: SimulationNodeDatum & node;
 }) => {
   const theme = useTheme();
 

diff --git a/src/pages/MindMap/MindMap.css b/src/pages/MindMap/MindMap.css
@@ -32,3 +32,16 @@ body::-webkit-scrollbar {
 .no-translate {
   transform: none !important;
 }
+
+.root-node-glow {
+  animation: glow 1s infinite alternate;
+}
+
+@keyframes glow {
+  from {
+    stroke-width: 0.5;
+  }
+  to {
+    stroke-width: 1.5;
+  }
+}