Merge pull request #33 from oslabs-beta/jake/fixed_dummy_data_btn

Jake/fixed dummy data btn
open-source-labs · Apr 28, 2022 · 36b0b34 · 36b0b34
2 parents 915265c + c6182ae
commit 36b0b34
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/frontend/components/App.tsx b/frontend/components/App.tsx
@@ -119,7 +119,8 @@ const App = () => {
               setSidebarHidden,
               sidebarIsHidden,
               setFilePath,
-              newFilePath
+              newFilePath,
+              setERView
             }}
           />
           <Main $fullwidth={sidebarIsHidden}>

diff --git a/frontend/components/sidebar/Sidebar.tsx b/frontend/components/sidebar/Sidebar.tsx
@@ -63,6 +63,7 @@ const Sidebar = ({
   sidebarIsHidden,
   setFilePath,
   newFilePath,
+  setERView
 }: AppState) => {
 
   const toggleOpen = () => setSidebarHidden(!sidebarIsHidden);
@@ -88,7 +89,7 @@ const Sidebar = ({
           setSelectedView={setSelectedView}
           toggleOpen={toggleOpen}
         />
-        <ViewSelector {...{ selectedView, setSelectedView }} />
+        <ViewSelector {...{ selectedView, setSelectedView, setERView }} />
         <DbList
           selectedDb={selectedDb}
           setSelectedDb={setSelectedDb}

diff --git a/frontend/components/sidebar/ViewSelector.tsx b/frontend/components/sidebar/ViewSelector.tsx
@@ -21,12 +21,12 @@ const ViewButton = styled(Button)`
   }
 `;
 
-type ViewSelectorProps = Pick<AppState, 'selectedView' | 'setSelectedView'>;
+type ViewSelectorProps = Pick<AppState, 'selectedView' | 'setSelectedView' | 'setERView' >;
 
 /**
  * Selector for view on sidebar. Updates App state with selected view
  */
-const ViewSelector = ({ selectedView, setSelectedView }: ViewSelectorProps) => (
+const ViewSelector = ({ selectedView, setSelectedView, setERView }: ViewSelectorProps) => (
   <ViewBtnGroup variant="contained" fullWidth>
     <ViewButton
       onClick={() => setSelectedView('queryView')}
@@ -37,7 +37,10 @@ const ViewSelector = ({ selectedView, setSelectedView }: ViewSelectorProps) => (
       Queries
     </ViewButton>
     <ViewButton
-      onClick={() => setSelectedView('dbView')}
+      onClick={() => {
+        setSelectedView('dbView')
+        if (setERView) setERView(true)
+      }}
       $isSelected={
         selectedView === 'dbView' || selectedView === 'quickStartView'
       }

diff --git a/frontend/components/views/DbView/TablesTabBar.tsx b/frontend/components/views/DbView/TablesTabBar.tsx
@@ -50,7 +50,8 @@ const TablesTabs = ({
   tables,
   selectTable,
   selectedTable,
-  selectedDb
+  selectedDb,
+  setERView,
 }: TablesTabBarProps) => {
   const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
     selectTable(tables[newValue]);
@@ -98,8 +99,18 @@ const TablesTabs = ({
   );
 
 
-  const handleView = () => {
-    setActive(!active);
+  const handleView = (e ,newActive) => {
+    // force at least one selected view
+    if (newActive !== null) {
+      // set the new view to the currect view
+      setActive(newActive);
+
+      // disable the dummy data button when in ER View
+      if (setERView) {
+        if (active) setERView(newActive);
+        else setERView(newActive);
+      };
+    }
   };
 
   const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
@@ -115,10 +126,10 @@ const TablesTabs = ({
         onChange={handleView}
         aria-label="active-view"
       >
-        <ToggleButton value="true" aria-label="er">
+        <ToggleButton value={true} aria-label="er">
           ER diagram
         </ToggleButton>
-        <ToggleButton value="false" aria-label="table">
+        <ToggleButton value={false} aria-label="table">
           Table
         </ToggleButton>
       </StyledToggleButtonGroup>

diff --git a/frontend/types.ts b/frontend/types.ts
@@ -26,6 +26,7 @@ export interface AppState {
   sidebarIsHidden: boolean;
   setFilePath: (filePath: string) => void;
   newFilePath: string;
+  setERView?: (boolean) => void;
 }
 
 export interface FilePath {