terminally-online/src/screens/home.tsx

import React, { useState } from 'react';
import { View } from 'react-native';
import {
  Button,
  Menu,
  IconButton,
  Divider,
  useTheme,
  Searchbar,
} from 'react-native-paper';
import { useDispatch, useSelector } from 'react-redux';
import { RootScrollView } from '../components';
import styles from '../styles';
import { SORT, SORT_DIRECTION } from '../types';
import { getSortIcon, getViewIcon } from '../utilities';
import {
  RootState,
  cycleView,
  toggleSortDirection,
  setSortDirection,
  toggleFavoritesOnly,
  setSort,
  setFilter,
} from '../state';
import { MEME_TYPE, memeTypePlural } from '../database';
import { useDimensions } from '../contexts';

const Home = () => {
  const theme = useTheme();
  const dimensions = useDimensions();
  const sort = useSelector((state: RootState) => state.home.sort);
  const sortDirection = useSelector(
    (state: RootState) => state.home.sortDirection,
  );
  const view = useSelector((state: RootState) => state.home.view);
  const favoritesOnly = useSelector(
    (state: RootState) => state.home.favoritesOnly,
  );
  const filter = useSelector((state: RootState) => state.home.filter);
  const dispatch = useDispatch();

  const [sortMenuVisible, setSortMenuVisible] = useState(false);
  const [filterMenuVisible, setFilterMenuVisible] = useState(false);

  const handleSortModeChange = (newSort: SORT) => {
    if (newSort === sort) {
      dispatch(toggleSortDirection());
    } else {
      dispatch(setSort(newSort));
      if (newSort === SORT.TITLE) {
        dispatch(setSortDirection(SORT_DIRECTION.ASCENDING));
      } else {
        dispatch(setSortDirection(SORT_DIRECTION.DESCENDING));
      }
    }
    setSortMenuVisible(false);
  };

  const handleFilterChange = (newFilter: MEME_TYPE | undefined) => {
    dispatch(setFilter(newFilter));
    setFilterMenuVisible(false);
  };

  const [search, setSearch] = useState('');

  return (
    <RootScrollView padded>
      <Searchbar placeholder="Search" value={search} onChangeText={setSearch} />
      <View style={[styles.flexRowSpaceBetween, styles.centeredVertical]}>
        <View style={[styles.flexRow, styles.centeredVertical]}>
          <Menu
            visible={sortMenuVisible}
            onDismiss={() => setSortMenuVisible(false)}
            anchor={
              <Button
                onPress={() => setSortMenuVisible(true)}
                icon={getSortIcon(sort, sortDirection)}
                contentStyle={styles.flexRowReverse}
                compact>
                Sort By: {sort}
              </Button>
            }>
            {Object.keys(SORT).map(key => {
              return (
                <Menu.Item
                  key={key}
                  onPress={() =>
                    handleSortModeChange(SORT[key as keyof typeof SORT])
                  }
                  title={SORT[key as keyof typeof SORT]}
                />
              );
            })}
          </Menu>
        </View>
        <View style={styles.flexRow}>
          <IconButton
            icon={getViewIcon(view)}
            iconColor={theme.colors.primary}
            size={dimensions.static.verticalScale(16)}
            onPress={() => dispatch(cycleView())}
          />
          <IconButton
            icon={favoritesOnly ? 'heart' : 'heart-outline'}
            iconColor={theme.colors.primary}
            size={dimensions.static.verticalScale(16)}
            onPress={() => dispatch(toggleFavoritesOnly())}
          />
          <Menu
            visible={filterMenuVisible}
            onDismiss={() => setFilterMenuVisible(false)}
            anchor={
              <IconButton
                onPress={() => setFilterMenuVisible(true)}
                icon={filter ? 'filter' : 'filter-outline'}
                iconColor={theme.colors.primary}
                size={dimensions.static.verticalScale(16)}
              />
            }>
            <Menu.Item
              // eslint-disable-next-line unicorn/no-useless-undefined
              onPress={() => handleFilterChange(undefined)}
              title="All"
            />
            {Object.keys(MEME_TYPE).map(key => {
              return (
                <Menu.Item
                  key={key}
                  onPress={() =>
                    handleFilterChange(MEME_TYPE[key as keyof typeof MEME_TYPE])
                  }
                  title={
                    memeTypePlural[MEME_TYPE[key as keyof typeof MEME_TYPE]]
                  }
                />
              );
            })}
          </Menu>
        </View>
      </View>
      <Divider />
    </RootScrollView>
  );
};

export default Home;