aswi2023one-team-to-rule-them-all-gitlab/src/pages/NotesViewPage.tsx @ 67b916af

import React, { useEffect, useState } from "react"
import { log } from "../logging/logger"
import { DrawerScreenProps } from "@react-navigation/drawer"
import { Box, Button, ChevronDownIcon, ChevronUpIcon, Flex, HStack, MinusIcon, Popover, Switch, Text, VStack } from "native-base"
import { SortOptions } from "../types/general"
import { Note } from "../types/note"
import NotesListView from "../components/notes/NotesListView"
import { useDispatch, useSelector } from "react-redux"
import { AppDispatch, RootState } from "../stores/store"
import LoadingBox from "../components/loading/LoadingBox"
import { createNote, getAllNotes } from "../stores/actions/notesThunks"
import { RootDrawerParamList } from "./Navigation"
const NotesViewPage = ({ navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {

  const { notes, notesLoading, requestPending, triggerRefresh } = useSelector((state: RootState) => state.noteViewState)

  const dispatch = useDispatch<AppDispatch>();

  const [isSortOpen, setIsSortOpen] = useState(false);

  const [myCommentsCheck, setMyCommentsCheck] = useState(false);
  const [generalCommentsCheck, setGeneralCommentsCheck] = useState(true);

  const [sortSettings, setSortSettings] = useState({
    items: SortOptions.None,
    date: SortOptions.None
  });

  const handleSortChanged = (key: "items" | "date") => {
    let currentState = sortSettings[key];
    if (currentState == SortOptions.None) {
      setSortSettings({
        ...sortSettings,
        [key]: SortOptions.Asc
      })
    }
    else if (currentState == SortOptions.Asc) {
      setSortSettings({
        ...sortSettings,
        [key]: SortOptions.Desc
      })
    }
    else {
      setSortSettings({
        ...sortSettings,
        [key]: SortOptions.None
      })
    }
  }

  const getSortIcon = (sortOption: SortOptions, size: string) => {
    switch (sortOption) {
      case SortOptions.Asc:
        return <ChevronUpIcon size={size} />;
      case SortOptions.Desc:
        return <ChevronDownIcon size={size} />;
      default:
        return <MinusIcon size={size} />;
    }
  };

  // trigger refresh on triggerRefresh increment
  useEffect(() => {
    log.debug("NotesViewPage", "useEffect", "getNotes");
    getNotes();
  }, [triggerRefresh])

  // general comments check changed
  useEffect(() => {
    if (!notesLoading) {
      log.debug("NotesViewPage", "useEffect", "getNotes");
      getNotes();
    }
  }, [generalCommentsCheck, myCommentsCheck])


  const getNotes = () => {
    dispatch(getAllNotes({
      myComments: myCommentsCheck,
      generalComments: generalCommentsCheck,
      sortOptions: sortSettings
    }));
  }

  const handleCreateComment = (newComment: string, replyingTo: { messageId: string; userName: string } | null) => {

    console.log(newComment, replyingTo)

    if (!requestPending) {
      // creating new comment
      if (replyingTo != null) {
        dispatch(createNote({
          newNote: { note: newComment, reply_to: replyingTo.messageId } as Note
        }))
      }
      else {
        dispatch(createNote({
          newNote: { note: newComment } as Note
        }))
      }
    }
  }


  return (
    <Box width="92%" marginLeft="5%">
      <VStack>
        <HStack marginTop="5%">
          <Box width="30%" justifyContent={"center"}>
            <Popover // @ts-ignore
              trigger={triggerProps => {
                return <Button colorScheme="primary" {...triggerProps} onPress={() => setIsSortOpen(true)}>
                  Sort Options
                </Button>;
              }} isOpen={isSortOpen} onClose={() => setIsSortOpen(!isSortOpen)}>
              <Popover.Content w="48">
                <Popover.Arrow />
                <Popover.CloseButton onPress={() => setIsSortOpen(false)} />
                <Popover.Header>Sort Options</Popover.Header>
                <Popover.Body>
                  <VStack>
                    <Button size="md" variant="outline" onPress={() => handleSortChanged("items")}
                      rightIcon={getSortIcon(sortSettings.items, "sm")}
                    >
                      Items</Button>
                    <Button size="md" variant="outline" marginTop={"5%"} onPress={() => handleSortChanged("date")}
                      rightIcon={getSortIcon(sortSettings.date, "sm")}>
                      Date</Button>
                  </VStack>
                </Popover.Body>
                <Popover.Footer justifyContent="flex-end">
                  <Button.Group space={2}>
                    <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsSortOpen(false)}>
                      Cancel
                    </Button>
                    <Button colorScheme="success" onPress={() => { setIsSortOpen(false); getNotes() }}>
                      Save
                    </Button>
                  </Button.Group>
                </Popover.Footer>
              </Popover.Content>
            </Popover>
          </Box>
          <VStack width="70%" space="0">
            <Flex direction="row" alignItems="center" justify="flex-end">
              <Text>My comments</Text>
              <Switch isChecked={myCommentsCheck} onValueChange={() => { if (!notesLoading) setMyCommentsCheck(!myCommentsCheck) }} size="md" />
            </Flex>
            <Flex direction="row" alignItems="center" justify="flex-end" marginTop="-7.5%">
              <Text>General comments</Text>
              <Switch isChecked={generalCommentsCheck} onValueChange={() => { if (!notesLoading) setGeneralCommentsCheck(!generalCommentsCheck) }} size="md" />
            </Flex>
          </VStack>
        </HStack>
        <Box>
          {
            notesLoading ? (
              <LoadingBox text="Loading notes" />
            )
              :
              (<NotesListView notes={notes} navigation={navigation} handleCreateComment={handleCreateComment} requestPending={requestPending} />)
          }
        </Box>


      </VStack>
    </Box>
  );
}

export default NotesViewPage;