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

import React, { useEffect, useState } from "react"
import { log } from "../logging/logger"
import { DrawerScreenProps } from "@react-navigation/drawer"
import { RootDrawerParamList } from "../components/Navigation"
import { Box, Button, ChevronDownIcon, ChevronUpIcon, CloseIcon, Flex, HStack, Icon, IconButton, MinusIcon, Popover, Pressable, ScrollView, Switch, Text, TextArea, VStack } from "native-base"
import { SortOptions } from "../types/general"
import { Note } from "../types/note"
import NotesListView from "../components/notes/NotesListView"
import { G, Path } from "react-native-svg"
import { MessageIcon } from "../components/general/Icons"
import { ConfirmDialog } from "../components/general/Dialogs"
const NotesViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {

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

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

  const [replyingTo, setReplyingTo] = useState<{ messageId: string; userName: string } | null>(null);

  const cancelRef = React.useRef(null)

  const notes = [
    {
      uuid: "fadfsfdsaf",
      username: "Alice",
      userId: "123",
      note: "Buy milk and bread",
      avatarUrl: "martin.png",
      items: [],
      createdTime: new Date("2022-01-01T10:00:00Z"),
      updatedTime: new Date("2022-01-01T12:00:00Z"),
      noteColor: "#FFA500",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Bob",
      userId: "456",
      note: "Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM ,Call Jane at 2 PM",
      avatarUrl: "https://example.com/avatar2.jpg",
      items: ["Jane"],
      createdTime: new Date("2022-01-02T10:00:00Z"),
      updatedTime: new Date("2022-01-02T14:00:00Z"),
      noteColor: "#6495ED",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Charlie",
      userId: "789",
      note: "Pick up dry cleaning",
      avatarUrl: "https://example.com/avatar3.jpg",
      items: ["dry cleaning"],
      createdTime: new Date("2022-01-03T10:00:00Z"),
      updatedTime: new Date("2022-01-03T12:30:00Z"),
      noteColor: "#FFA07A",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Dave",
      userId: "012",
      note: "Finish report by Friday",
      avatarUrl: "https://example.com/avatar4.jpg",
      items: ["report"],
      createdTime: new Date("2022-01-04T10:00:00Z"),
      updatedTime: new Date("2022-01-04T16:00:00Z"),
      noteColor: "#7B68EE",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Eve",
      userId: "345",
      note: "Buy flowers for mom's birthday",
      avatarUrl: "https://example.com/avatar5.jpg",
      items: ["flowers"],
      createdTime: new Date("2022-01-05T10:00:00Z"),
      updatedTime: new Date("2022-01-05T18:00:00Z"),
      noteColor: "#F08080",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Frank",
      userId: "678",
      note: "Schedule dentist appointment",
      avatarUrl: "https://example.com/avatar6.jpg",
      items: ["dentist appointment"],
      createdTime: new Date("2022-01-06T10:00:00Z"),
      updatedTime: new Date("2022-01-06T11:00:00Z"),
      noteColor: "#98FB98",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Grace",
      userId: "901",
      note: "Book hotel for vacation",
      avatarUrl: "https://example.com/avatar7.jpg",
      items: ["hotel"],
      createdTime: new Date("2022-01-07T10:00:00Z"),
      updatedTime: new Date("2022-01-07T15:00:00Z"),
      noteColor: "#87CEFA",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Alice",
      userId: "123",
      note: "Buy milk and bread",
      avatarUrl: "https://example.com/avatar1.jpg",
      items: ["milk", "bread"],
      createdTime: new Date("2022-01-01T10:00:00Z"),
      updatedTime: new Date("2022-01-01T12:00:00Z"),
      noteColor: "#FFA500",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Bob",
      userId: "456",
      note: "Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM, Call Jane at 2 PM ,Call Jane at 2 PM",
      avatarUrl: "https://example.com/avatar2.jpg",
      items: ["Jane"],
      createdTime: new Date("2022-01-02T10:00:00Z"),
      updatedTime: new Date("2022-01-02T14:00:00Z"),
      noteColor: "#6495ED",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Charlie",
      userId: "789",
      note: "Pick up dry cleaning",
      avatarUrl: "https://example.com/avatar3.jpg",
      items: ["dry cleaning"],
      createdTime: new Date("2022-01-03T10:00:00Z"),
      updatedTime: new Date("2022-01-03T12:30:00Z"),
      noteColor: "#FFA07A",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Dave",
      userId: "012",
      note: "Finish report by Friday",
      avatarUrl: "https://example.com/avatar4.jpg",
      items: ["report"],
      createdTime: new Date("2022-01-04T10:00:00Z"),
      updatedTime: new Date("2022-01-04T16:00:00Z"),
      noteColor: "#7B68EE",
    },
    {
      uuid: "fadfsfdsaf",
      username: "Eve",
      userId: "345",
      note: "Buy flowers for mom's birthday",
      avatarUrl: "https://example.com/avatar5.jpg",
      items: ["flowers"],
      createdTime: new Date("2022-01-05T10:00:00Z"),
      updatedTime: new Date("2022-01-05T18:00:00Z"),
      noteColor: "#F08080",
    }];

  const [confirmDialog, setConfirmDialog] = React.useState<{
    headerText?: string;
    bodyText?: string;
    confirmText?: string;
    confirmColor?: string;
    cancelRef?: any;
    onClose?: () => void;
    onSubmit?: () => void;
  } | null>(null);

  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} />;
    }
  };

  const getNotes = () => {
    console.log("Get NOTES");
  }

  const handleReply = (messageId: string, userName: string) => {
    console.log("Handling reply: " + messageId);
    setReplyingTo({ messageId, userName })
  }

  const handleEdit = (messageId: string, newMessage: string) => {
    console.log("Handling edit:" + messageId + ", " + newMessage);
  }

  const handleDelete = (messageId: string) => {
    console.log("Handling delete:" + messageId);
  }

  return (
    <Box width="90%" 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={() => setMyCommentsCheck(!myCommentsCheck)} size="md" />
            </Flex>
            <Flex direction="row" alignItems="center" justify="flex-end" marginTop="-7.5%">
              <Text>General comments</Text>
              <Switch isChecked={generalCommentsCheck} onValueChange={() => setGeneralCommentsCheck(!generalCommentsCheck)} size="md" />
            </Flex>
          </VStack>
        </HStack>
        <Box h={replyingTo != null ? "62.5%" : "67.5%"}>
          <NotesListView notes={notes} handleReply={handleReply} handleDelete={handleDelete} handleEdit={handleEdit} setConfirmDialog={setConfirmDialog} />
        </Box>
        {replyingTo != null &&
          <Flex direction="row" alignItems="center" justify="flex-end" h="5%" marginRight="10%">
            <Text>Replying to {replyingTo.userName}</Text>
            <IconButton onPress={() => setReplyingTo(null)} size="sm" icon={<CloseIcon />} marginLeft="-1%">
            </IconButton>
          </Flex>
        }
        <HStack h={replyingTo != null ? "20%" : "15%"} marginTop={replyingTo != null ? "0%" : "5%"}>
          <TextArea placeholder="Add comment" width="90%" autoCompleteType={undefined} ></TextArea>
          <VStack>
            <Box h={replyingTo != null ? "30%" : "45%"}></Box>
            <Box marginLeft="2">
              <Button startIcon={<MessageIcon color="#FFF" />}></Button>
            </Box>
          </VStack>
        </HStack>
      </VStack>
      <ConfirmDialog {...confirmDialog} isShown={confirmDialog != null} cancelRef={cancelRef} />
    </Box>
  );
}

export default NotesViewPage;