Merge pull request #531 from SCCapstone/508

508: Change dropdown to picker
SCCapstone · Apr 16, 2024 · 8acdb14 · 8acdb14
2 parents b782d16 + 8fd84c8
commit 8acdb14
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 67 deletions.
diff --git a/FU.SPA/src/components/pages/Discover.jsx b/FU.SPA/src/components/pages/Discover.jsx
@@ -1,12 +1,6 @@
 import dayjs from 'dayjs';
 import { useSearchParams } from 'react-router-dom';
-import {
-  Typography,
-  MenuItem,
-  InputLabel,
-  FormControl,
-  Select,
-} from '@mui/material';
+import { Typography, Tabs, Tab } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { TagsSelector, GamesSelector, SortOptionsSelector } from '../Selectors';
 import SearchService from '../../services/searchService';
@@ -362,28 +356,20 @@ export default function Discover() {
 
   const renderTabSelectors = () => {
     return (
-      <div className="selectors-wrapper">
-        <FormControl>
-          <InputLabel id="social-option-label">Discover</InputLabel>
-          <Select
-            labelId="social-option-label"
-            value={tabOption}
-            label="Discover"
-            onChange={(e) => {
-              setTabOption(e.target.value);
-              setPage(1);
-            }}
-          >
-            {Object.keys(tabOptions).map((option, index) => (
-              <MenuItem key={index} value={tabOptions[option]}>
-                {tabOptions[option]}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      </div>
+      <Tabs
+        value={tabOption}
+        onChange={(_, newValue) => {
+          setTabOption(newValue);
+          setPage(1);
+        }}
+        variant="fullWidth"
+      >
+        <Tab label={tabOptions.Posts} value={tabOptions.Posts} />
+        <Tab label={tabOptions.Users} value={tabOptions.Users} />
+      </Tabs>
     );
   };
+
   return (
     <div className="page-content">
       <div

diff --git a/FU.SPA/src/components/pages/Social.jsx b/FU.SPA/src/components/pages/Social.jsx
@@ -1,4 +1,4 @@
-import { Select, MenuItem, InputLabel, FormControl } from '@mui/material';
+import { Tabs, Tab, ButtonGroup, Button } from '@mui/material';
 import { useEffect, useState, useContext } from 'react';
 import UserService from '../../services/userService';
 import RelationService from '../../services/relationService';
@@ -177,49 +177,45 @@ export default function Social() {
     );
   };
 
-  const renderTabSelectors = () => {
+  const renderRelationButtons = () => {
     return (
-      <div className="selectors-wrapper">
-        <FormControl>
-          <InputLabel id="social-option-label">Social</InputLabel>
-          <Select
-            labelId="social-option-label"
-            value={tabOption}
-            label="Social"
-            onChange={(e) => {
-              setTabOption(e.target.value);
+      <ButtonGroup orientation="vertical">
+        {Object.keys(relationOptions).map((option, index) => (
+          <Button
+            key={index}
+            variant={
+              relationOption === relationOptions[option]
+                ? 'contained'
+                : 'outlined'
+            }
+            onClick={() => {
+              setRelationOption(relationOptions[option]);
               setPage(1);
             }}
           >
-            {Object.keys(tabOptions).map((option, index) => (
-              <MenuItem key={index} value={tabOptions[option]}>
-                {tabOptions[option]}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-        {tabOption === tabOptions.Users && (
-          <FormControl>
-            <InputLabel id="status-selector-label">Relation Status</InputLabel>
-            <Select
-              labelId="status-selector-label"
-              label="Relation Status"
-              value={relationOption}
-              onChange={(e) => {
-                setRelationOption(e.target.value);
-                setPage(1);
-              }}
-              style={{ minWidth: '150px', textAlign: 'left' }}
-            >
-              {Object.keys(relationOptions).map((option, index) => (
-                <MenuItem key={index} value={relationOptions[option]}>
-                  {relationOptions[option]}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        )}
-      </div>
+            {relationOptions[option]}
+          </Button>
+        ))}
+      </ButtonGroup>
+    );
+  };
+
+  const renderTabSelectors = () => {
+    return (
+      <>
+        <Tabs
+          value={tabOption}
+          onChange={(_, newValue) => {
+            setTabOption(newValue);
+            setPage(1);
+          }}
+          variant="fullWidth"
+        >
+          <Tab label={tabOptions.Posts} value={tabOptions.Posts} />
+          <Tab label={tabOptions.Users} value={tabOptions.Users} />
+        </Tabs>
+        {tabOption === tabOptions.Users && renderRelationButtons()}
+      </>
     );
   };