Revert "modes for SPA"

This reverts commit 0774bfc.

Author: moribellamy

internal/dev_server/ui/src/App.tsx

@@ -32,8 +32,8 @@ function App() {
   >({});
   const [flags, setFlags] = useState<LDFlagSet | null>(null);
   const [showBanner, setShowBanner] = useState(false);
+  const [showEvents, setShowEvents] = useState(false);
   const [context, setContext] = useState<string>('{}');
-  const [mode, setMode] = useState<'flags' | 'events'>('flags');
 
   const fetchDevFlags = useCallback(async () => {
     if (!selectedProject) {
@@ -133,8 +133,24 @@ function App() {
     [selectedProject, fetchDevFlags],
   );
 
-  const flagsContent = () => {
-    return (
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: '1rem',
+      }}
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        width="100%"
+        maxWidth="900px"
+        minWidth="600px"
+        padding="2rem"
+      >
         <Box display="flex" flexDirection="column" padding="1rem" width="100%">
           {showBanner && (
             <Box marginBottom="2rem" width="100%">
@@ -175,6 +191,8 @@ function App() {
                 />
               )}
               <Box display="flex" alignItems="center" gap="1rem">
+                <FlagsButton onPress={() => { setShowEvents(false); }} />
+                <EventsButton onPress={() => { setShowEvents(true); }} />
                 <SyncButton
                   selectedProject={selectedProject}
                   setFlags={setFlags}
@@ -185,56 +203,25 @@ function App() {
           )}
           {selectedProject && (
             <Box width="100%">
-              <Flags
-                availableVariations={availableVariations}
-                selectedProject={selectedProject}
-                flags={flags}
-                overrides={overrides}
-                setOverrides={(
-                  newOverrides: Record<
-                    string,
-                    { value: LDFlagValue; version: number }
-                  >,
-                ) => {
-                  setOverrides(newOverrides);
-                }}
-              />
+              {!showEvents && (
+                <Flags
+                  availableVariations={availableVariations}
+                  selectedProject={selectedProject}
+                  flags={flags}
+                  overrides={overrides}
+                  setOverrides={(
+                    newOverrides: Record<
+                      string,
+                      { value: LDFlagValue; version: number }
+                    >,
+                  ) => {
+                    setOverrides(newOverrides);
+                  }}
+                />
+              )}
             </Box>
           )}
         </Box>
-    )
-  };
-
-  const eventsContent = () => {
-    return <span>Stubbed content</span>;
-  };
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: '1rem',
-      }}
-    >
-      <Box
-        display="flex"
-        flexDirection="column"
-        alignItems="center"
-        width="100%"
-        maxWidth="900px"
-        minWidth="600px"
-        padding="2rem"
-      >
-        <Box display="flex" justifyContent="flex-start" marginBottom="1rem" width="100%">
-          <FlagsButton onPress={() => { setMode('flags'); }} />
-          <Box marginLeft="1rem">
-            <EventsButton onPress={() => { setMode('events'); }} />
-          </Box>
-        </Box>
-        <Box width="100%" height="1px" backgroundColor="yellow" marginBottom="1rem" />
-        {mode === 'flags' ? flagsContent() : eventsContent()}
       </Box>
     </div>
   );