Use MUI, structure change, fix API

frontend/components/App.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import CssBaseline from '@mui/material/CssBaseline';
+import Container from '@mui/material/Container';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { SnackbarProvider } from 'notistack';
+
+import NavbarComponent from './Navbar';
+import SearchComponent from './Search';
+import ResultComponent from './Result';
+
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+  },
+});
+
+export default function App() {
+  const [zip, setZip] = useState(0);
+  const [city, setCity] = useState("");
+
+  function handleSearch(value, zip, city) {
+    setZip(zip);
+    setCity(city);
+
+    if (window.history.replaceState) {
+      value = encodeURIComponent(value);
+      window.history.replaceState({}, null, `?s=${value}`);
+    }
+  }
+
+  return (
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <SnackbarProvider>
+        <NavbarComponent />
+        <Container sx={{ marginY: "1rem" }}>
+          <SearchComponent callback={handleSearch} />
+        </Container>
+        <Container sx={{ marginBottom: "2rem" }}>
+          <ResultComponent zip={zip} city={city} />
+        </Container>
+      </SnackbarProvider>
+    </ThemeProvider>
+  );
+}