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

import React, { useCallback, 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, useToast } 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 { RootStackParamList } from "./Navigation"
import { ErrorToast } from "../components/toast/ErrorToast"
import { InfoToast } from "../components/toast/InfoToast"

import { Dimensions } from "react-native";

const NotesViewPage = ({ navigation }: DrawerScreenProps<RootStackParamList, '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 lastError = useSelector((state: RootState) => state.noteViewState.lastError)
  const toast = useToast();

  useEffect(() => {
    if (lastError) {
      toast.closeAll()
      toast.show({
        render: ({
          id
        }) => {
          return <ErrorToast headerText={"Error"} text={lastError} onClose={() => toast.close(id)} />;
        },
        duration: 3000
      });
    }
  }, [lastError])

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

  const handleSortChanged = useCallback((key: "items" | "date", sortSettings: any) => {
    let currentState = sortSettings[key];
    let otherKey = "items"

    if (key == "items") {
      otherKey = "date"
    }

    if (currentState == SortOptions.None) {
      setSortSettings({
        ...sortSettings,
        [key]: SortOptions.Asc,
        [otherKey]: SortOptions.None
      })
    }
    else if (currentState == SortOptions.Asc) {
      setSortSettings({
        ...sortSettings,
        [key]: SortOptions.Desc,
        [otherKey]: SortOptions.None
      })
    }
    else {
      setSortSettings({
        ...sortSettings,
        [key]: SortOptions.None,
        [otherKey]: SortOptions.None
      })
    }
  }, [setSortSettings]);

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

  // 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 = useCallback(() => {
    dispatch(getAllNotes({
      myComments: myCommentsCheck,
      generalComments: generalCommentsCheck,
      sortOptions: sortSettings
    }));
  }, [myCommentsCheck, generalCommentsCheck, sortSettings]);


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

    if (!requestPending) {
      // creating new comment
      toast.show({
        render: ({
          id
        }) => {
          return <InfoToast text={"Adding note"} onClose={() => toast.close(id)} />;
        },
        duration: 2000
      });
      if (replyingTo != null) {
        dispatch(createNote({
          newNote: { note: newComment, reply_to: replyingTo.messageId } as Note
        }))
      }
      else {
        dispatch(createNote({
          newNote: { note: newComment } as Note
        }))
      }
    }
  }, [dispatch, createNote]);



  return (
    <Box>
      <VStack>
        <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={1} marginLeft={2.5} marginRight={2.5}>
          <Text fontWeight="semibold" mt={3} ml={2} fontSize="md" color="#4D4D4D">General comments</Text>
          <Switch isChecked={generalCommentsCheck} onValueChange={() => { if (!notesLoading) setGeneralCommentsCheck(!generalCommentsCheck) }} size="lg" marginRight={2} />
        </Flex>
        <Flex direction="row" align="flex-start" justifyContent="space-between" marginTop={-1} marginLeft={2.5} marginRight={2.5}>
          <Text fontWeight="semibold" mt={3} ml={2} fontSize="md" color="#4D4D4D">My comments</Text>
          <Switch padding={0} isChecked={myCommentsCheck} onValueChange={() => { if (!notesLoading) setMyCommentsCheck(!myCommentsCheck) }} size="lg" marginRight={2} />
        </Flex>
        <Popover // @ts-ignore
          trigger={triggerProps => {
            return <Button marginLeft={4} marginBottom={2} width={150} backgroundColor="#F4DFAB" {...triggerProps} onPress={() => setIsSortOpen(true)}
              borderRadius={7}
              rightIcon={(sortSettings.date != SortOptions.None || sortSettings.items != SortOptions.None) ? (getSortIcon(sortSettings.date != SortOptions.None ? sortSettings.date : sortSettings.items, "xs", "#654B07")) : undefined}
            >
              <Text fontSize={14} color="#654B07">
                Sort {(sortSettings.date != SortOptions.None || sortSettings.items != SortOptions.None) ? (sortSettings.date != SortOptions.None ? "by date" : "by items") : ""}
              </Text>
            </Button>;
          }} isOpen={isSortOpen} onClose={() => setIsSortOpen(!isSortOpen)}>
          <Popover.Content w="48">
            <Popover.Arrow />
            <Popover.CloseButton onPress={() => setIsSortOpen(false)} />
            <Popover.Header><Text fontSize={"md"} color="#654B07">Sort Options</Text></Popover.Header>
            <Popover.Body>
              <VStack>
                <Button size="md" variant="outline" onPress={() => handleSortChanged("items", sortSettings)}
                  rightIcon={getSortIcon(sortSettings.items, "sm", "#654B07")}
                >
                  Items</Button>
                <Button size="md" variant="outline" marginTop={"5%"} onPress={() => handleSortChanged("date", sortSettings)}
                  rightIcon={getSortIcon(sortSettings.date, "sm", "#654B07")}>
                  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 backgroundColor={"#F4DFAB"} onPress={() => { setIsSortOpen(false); getNotes() }}>
                  <Text color="#654B07">
                    Save
                  </Text>
                </Button>
              </Button.Group>
            </Popover.Footer>
          </Popover.Content>
        </Popover>
        {
          notesLoading ? (
            <LoadingBox text="Loading notes" />
          )
            :
            (<NotesListView height={Dimensions.get('window').height - 307} notes={notes} navigation={navigation} handleCreateComment={handleCreateComment} requestPending={requestPending} />)
        }


      </VStack>
    </Box>
  );
}

export default NotesViewPage;