[#164] Implement Search Bar component (#182)

* Added empty search page and search bar component

* Added text input

* Added back button

* Added onKeyPress for enter key

* Cleaned up code and added comments

* Removed .idea from config files and added .idea to gitignore

* Changed let text to useState. Added comments.

* Added commented note about console.log()

frontend/.gitignore

@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.idea
 
 npm-debug.log*
 yarn-debug.log*

frontend/src/Router.jsx

@@ -8,6 +8,7 @@ import Dashboard from './pages/dashboard/DashboardPageController'
 import ProfileSettings from './pages/profileSettings/ProfileSettingsController'
 import Registration from './pages/registration/RegistrationPagesController'
 import Notifications from './pages/notifications/NotificationsPageController'
+import Search from './pages/search/SearchPageController'
 import User from './pages/user/UserPageController'
 import PostComposer from './pages/postComposer/PostComposerController'
 import { AuthContext } from './contexts/AuthProvider'
@@ -31,6 +32,7 @@ const Router = () => {
         <Route path="/user/:username" element={<User />} />
         <Route path="/user/:username/follows" element={<Follows />} />
         <Route path="/notifications" element={<Notifications />} />
+        <Route path="/search" element={<Search />} />
         <Route path="/settings" element={<ProfileSettings />} />
         <Route path="/new-post" element={<PostComposer />} />
       </Routes>

frontend/src/components/search/searchbar/SearchBarController.jsx

@@ -0,0 +1,13 @@
+import SearchBarView from './SearchBarView'
+// import useApi from '../../../hooks/useApi'
+/**
+ * TO DO: Search bar - waiting on backend implementation
+ *
+ * Note: console.log() is temporary until implementation is added. ESLint won't allow empty method.
+ */
+const SearchBarController = () => {
+  console.log('TO DO: Implement Search bar controller')
+  return <SearchBarView />
+}
+
+export default SearchBarController

frontend/src/components/search/searchbar/SearchBarView.jsx

@@ -0,0 +1,51 @@
+import TextField from '@mui/material/TextField'
+import InputAdornment from '@mui/material/InputAdornment'
+import SearchIcon from '@mui/icons-material/Search'
+import React, { useState } from 'react'
+
+/**
+ * This is the search bar component
+ * When 'Enter' key is pressed, the text entered by user is recieved.
+ * TO DO: Send the recieved text to backend and retrieve results.
+ *
+ * Note: console.log() is temporary until implementation is added. ESLint won't allow empty method.
+ */
+
+const SearchBarView = ({ initialText }) => {
+  const [text, setText] = useState(initialText)
+  return (
+    <TextField
+      variant="filled"
+      placeholder="Search Updog"
+      autoComplete="off"
+      onChange={(e) => {
+        setText(e.target.value)
+      }}
+      onKeyPress={(key) => {
+        if (key.key === 'Enter') {
+          console.log(text)
+        }
+      }}
+      InputProps={{
+        disableUnderline: true,
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon />
+          </InputAdornment>
+        ),
+      }}
+      sx={{
+        height: '2em',
+        width: '100%',
+        '& .MuiFilledInput-root': {
+          borderRadius: '3em',
+          height: '100%',
+          width: '100%',
+          paddingBottom: '1em',
+        },
+      }}
+    />
+  )
+}
+
+export default SearchBarView

frontend/src/components/search/searchbar/searchbar.module.scss

@@ -0,0 +1,41 @@
+@use '~/src/styles/theme';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .interactions {
+    border-top: 1px solid theme.$divider;
+    border-bottom: 1px solid theme.$divider;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .reply {
+    padding-bottom: 1rem;
+    border-bottom: 1px solid theme.$divider;
+  }
+}
+
+.condensed {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  justify-content: start;
+  gap: 0.5rem;
+
+  &Interactions {
+    width: 10rem;
+  }
+}
+
+.link {
+  text-decoration: none;
+  color: theme.$onBackground;
+}

frontend/src/pages/search/SearchPage.module.scss

@@ -0,0 +1,15 @@
+@use '~/src/styles/theme';
+
+.subHeader {
+  text-align: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.container {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  display: flex;
+  border-top: 1px solid theme.$divider;
+  border-bottom: 1px solid theme.$divider;
+}

frontend/src/pages/search/SearchPageController.jsx

@@ -0,0 +1,25 @@
+import SearchPageView from './SearchPageView'
+import useApi from '../../hooks/useApi'
+
+/**
+ * This page renders the search UI.
+ */
+const SearchPageController = () => {
+  const { data, loading, err } = useApi(`search`)
+
+  if (data) {
+    return <div>Data... </div>
+  }
+
+  if (loading) {
+    return <div>Loading...</div>
+  }
+
+  if (err) {
+    return <div>Error: {err}</div>
+  }
+
+  return <SearchPageView />
+}
+
+export default SearchPageController

frontend/src/pages/search/SearchPageView.jsx

@@ -0,0 +1,32 @@
+import IconButton from '@mui/material/IconButton'
+import ArrowBackIcon from '@mui/icons-material/ArrowBack'
+import Grid from '@mui/material/Grid'
+import SearchBarView from '../../components/search/searchbar/SearchBarView'
+
+const SearchPageView = ({ body }) => (
+  <Grid
+    container
+    spacing={1}
+    direction="row"
+    justifyContent="space-between"
+    alignItems="center"
+    sx={{
+      paddingTop: '5%',
+      paddingBottom: '5%',
+      paddingLeft: '5%',
+      paddingRight: '10%',
+    }}
+  >
+    <Grid item xs={1}>
+      <IconButton>
+        <ArrowBackIcon />
+      </IconButton>
+    </Grid>
+    <Grid item xs={10}>
+      <SearchBarView />
+    </Grid>
+    {body}
+  </Grid>
+)
+
+export default SearchPageView