Fixed issues with DropDown implementation on BookmarksPage and mobile…

… design on bookmarks page
cornell-dti · Apr 18, 2024 · 8bae035 · 8bae035
1 parent bf8ac5e
commit 8bae035
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 46 deletions.
diff --git a/frontend/src/components/utils/DropDown.tsx b/frontend/src/components/utils/DropDown.tsx
@@ -94,6 +94,7 @@ export default function DropDown({ menuItems, isMobile }: Props) {
  borderRadius: '10px',
  backgroundColor: '#E8E8E8',
  scale: isMobile ? '0.75' : '1',
+ whiteSpace: 'nowrap',
  }}
  >
  {selected}

diff --git a/frontend/src/components/utils/DropDownWithLabel.tsx b/frontend/src/components/utils/DropDownWithLabel.tsx
@@ -44,13 +44,14 @@ const DropDownWithLabel: React.FC<DropDownWithLabelProps> = ({
 }) => {
  return (
  <div>
- <Grid container spacing={0} direction="row" alignItems="center" justifyContent="flex-end">
+ <Grid container direction="row" alignItems="center" justifyContent="flex-end" wrap="nowrap">
  <Grid item>
  <Typography
  variant="body1"
  style={{
  fontSize: isMobile ? '15px' : '23.157px',
  paddingRight: isMobile ? '0px' : '11px',
+ whiteSpace: 'nowrap',
  ...labelStyle,
  }}
  >

diff --git a/frontend/src/pages/BookmarksPage.tsx b/frontend/src/pages/BookmarksPage.tsx
@@ -14,7 +14,7 @@ import { createAuthHeaders, getUser } from '../utils/firebase';
 import ReviewComponent from '../components/Review/Review';
 import { sortReviews } from '../utils/sortReviews';
 import DropDownWithLabel from '../components/utils/DropDownWithLabel';
-import { AptSortField, sortApartments } from '../utils/sortApartments';
+import { AptSortFields, sortApartments } from '../utils/sortApartments';
 
 type Props = {
  user: firebase.User | null;
@@ -87,7 +87,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  const [aptsToShow, setAptsToShow] = useState<number>(defaultShow);
  const [savedAptsData, setSavedAptsData] = useState<CardData[]>([]);
  // handle sort (either number of reviews or average rate)
- const [sortAptsBy, setSortAptsBy] = useState<AptSortField>('numReviews');
+ const [sortAptsBy, setSortAptsBy] = useState<AptSortFields>('numReviews');
 
  // handle toggle
  const handleViewAll = () => {
@@ -103,7 +103,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  const [resultsToShow, setResultsToShow] = useState<number>(2);
  const [likeStatuses, setLikeStatuses] = useState<Likes>({});
  const [toggle, setToggle] = useState(false);
- const [showMoreLessState, setShowMoreLessState] = useState<String>('Show More');
+ const [showMoreLessState, setShowMoreLessState] = useState<string>('Show More');
  const [isMobile, setIsMobile] = useState<boolean>(false);
 
  useEffect(() => {
@@ -115,9 +115,6 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
 
  useTitle('Bookmarks');
 
- const [savedAptsData, setsavedAptsData] = useState<CardData[]>([]);
- const savedAPI = '/api/saved-apartments';
-
  // Fetch helpful reviews data when the component mounts or when user changes or when toggle changes
  useEffect(() => {
  const fetchLikedReviews = async () => {
@@ -136,9 +133,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  savedAPI,
  {
  callback: (data) => {
- sortApartments(data, sortAptsBy).then((res) => {
- setSavedAptsData(res);
- });
+ setSavedAptsData(data);
  },
  },
  createAuthHeaders(token)
@@ -200,6 +195,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  <Grid item xs={11} sm={11} md={9}>
  <Box
  display="flex"
+ flexDirection={isMobile ? 'column' : 'row'}
  justifyContent="space-between"
  alignItems="center"
  className={headerContainer}
@@ -218,18 +214,12 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  item: 'Review Count',
  callback: () => {
  setSortAptsBy('numReviews');
- sortApartments(savedAptsData, 'numReviews').then((res) => {
- setSavedAptsData(res);
- });
  },
  },
  {
  item: 'Rating',
  callback: () => {
- setSortAptsBy('overallRating');
- sortApartments(savedAptsData, 'overallRating').then((res) => {
- setSavedAptsData(res);
- });
+ setSortAptsBy('avgRating');
  },
  },
  ]}
@@ -241,7 +231,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  {savedAptsData.length > 0 ? (
  <Grid container spacing={4} className={gridContainer}>
  {savedAptsData &&
- savedAptsData
+ sortApartments(savedAptsData, sortAptsBy, false)
  .slice(0, aptsToShow)
  .map(({ buildingData, numReviews, company }, index) => {
  const { id } = buildingData;
@@ -264,7 +254,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  </Grid>
  );
  })}
- <Grid item xs={12} justifyContent="center">
+ <Grid item container xs={12} justifyContent="center">
  {savedAptsData.length > defaultShow &&
  (savedAptsData.length > aptsToShow ? (
  <ToggleButton
@@ -287,6 +277,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
 
  <Box
  display="flex"
+ flexDirection={isMobile ? 'column' : 'row'}
  justifyContent="space-between"
  alignItems="center"
  className={headerContainer}
@@ -297,30 +288,6 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  </Typography>
  </Box>
 
- {!isMobile && (
- <Box>
- <DropDownWithLabel
- label="Sort by"
- menuItems={[
- {
- item: 'Recent',
- callback: () => {
- setSortBy('date');
- },
- },
- {
- item: 'Helpful',
- callback: () => {
- setSortBy('likes');
- },
- },
- ]}
- isMobile={isMobile}
- />
- </Box>
- )}
- </Box>
- {isMobile && (
  <Box>
  <DropDownWithLabel
  label="Sort by"
@@ -341,7 +308,7 @@ const BookmarksPage = ({ user, setUser }: Props): ReactElement => {
  isMobile={isMobile}
  />
  </Box>
- )}
+ </Box>
 
  {helpfulReviewsData.length === 0 && (
  <Typography paragraph>You have not marked any reviews helpful.</Typography>

diff --git a/frontend/src/utils/sortApartments.ts b/frontend/src/utils/sortApartments.ts
@@ -1,6 +1,6 @@
 import { CardData } from '../App';
 import { ApartmentWithId } from '../../../common/types/db-types';
-type Fields = keyof CardData | keyof ApartmentWithId | 'originalOrder';
+export type AptSortFields = keyof CardData | keyof ApartmentWithId | 'originalOrder';
 
 /**
  * Sort apartments based on a specific property.
@@ -10,7 +10,7 @@ type Fields = keyof CardData | keyof ApartmentWithId | 'originalOrder';
  * @returns CardData[] – a sorted shallow copy of the array of CardData objects
  */
 
-const sortApartments = (arr: CardData[], property: Fields, orderLowToHigh: boolean) => {
+const sortApartments = (arr: CardData[], property: AptSortFields, orderLowToHigh: boolean) => {
  // clone array to ensure we can keep the original indexes.
  let clonedArr: CardData[] = arr.slice();
  if (property === 'originalOrder') {