Projekt

Obecné

Profil

Stáhnout (6.08 KB) Statistiky
| Větev: | Tag: | Revize:
1 b5ac7218 Fantič
import React, { useCallback, useEffect, useState } from "react"
2 917be067 Fantič
import { log } from "../logging/logger"
3
import { DrawerScreenProps } from "@react-navigation/drawer"
4 2135f53d Fantič
import { Box, Button, ChevronDownIcon, ChevronUpIcon, Flex, HStack, MinusIcon, Popover, Switch, Text, VStack } from "native-base"
5 917be067 Fantič
import { SortOptions } from "../types/general"
6 b225ffee Fantič
import { Note } from "../types/note"
7
import NotesListView from "../components/notes/NotesListView"
8 bb690a9a Fantič
import { useDispatch, useSelector } from "react-redux"
9
import { AppDispatch, RootState } from "../stores/store"
10
import LoadingBox from "../components/loading/LoadingBox"
11 2135f53d Fantič
import { createNote, getAllNotes } from "../stores/actions/notesThunks"
12 d3c12593 Fantič
import { RootDrawerParamList } from "./Navigation"
13 760dd761 Fantič
14 2135f53d Fantič
const NotesViewPage = ({ navigation }: DrawerScreenProps<RootDrawerParamList, 'Notes'>) => {
15 917be067 Fantič
16 3a226033 Fantič
  const { notes, notesLoading, requestPending, triggerRefresh } = useSelector((state: RootState) => state.noteViewState)
17 2135f53d Fantič
18 bb690a9a Fantič
  const dispatch = useDispatch<AppDispatch>();
19
20 917be067 Fantič
  const [isSortOpen, setIsSortOpen] = useState(false);
21
22
  const [myCommentsCheck, setMyCommentsCheck] = useState(false);
23
  const [generalCommentsCheck, setGeneralCommentsCheck] = useState(true);
24
25
  const [sortSettings, setSortSettings] = useState({
26
    items: SortOptions.None,
27
    date: SortOptions.None
28
  });
29
30 760dd761 Fantič
  const handleSortChanged = useCallback((key: "items" | "date", sortSettings: any) => {
31 917be067 Fantič
    let currentState = sortSettings[key];
32
    if (currentState == SortOptions.None) {
33
      setSortSettings({
34
        ...sortSettings,
35
        [key]: SortOptions.Asc
36
      })
37
    }
38
    else if (currentState == SortOptions.Asc) {
39
      setSortSettings({
40
        ...sortSettings,
41
        [key]: SortOptions.Desc
42
      })
43
    }
44
    else {
45
      setSortSettings({
46
        ...sortSettings,
47
        [key]: SortOptions.None
48
      })
49
    }
50 b5ac7218 Fantič
  }, [setSortSettings]);
51 917be067 Fantič
52
  const getSortIcon = (sortOption: SortOptions, size: string) => {
53
    switch (sortOption) {
54
      case SortOptions.Asc:
55
        return <ChevronUpIcon size={size} />;
56
      case SortOptions.Desc:
57
        return <ChevronDownIcon size={size} />;
58
      default:
59
        return <MinusIcon size={size} />;
60
    }
61
  };
62
63 3a226033 Fantič
  // trigger refresh on triggerRefresh increment
64 bb690a9a Fantič
  useEffect(() => {
65
    log.debug("NotesViewPage", "useEffect", "getNotes");
66
    getNotes();
67 3a226033 Fantič
  }, [triggerRefresh])
68 bb690a9a Fantič
69
  // general comments check changed
70
  useEffect(() => {
71 2135f53d Fantič
    if (!notesLoading) {
72 bb690a9a Fantič
      log.debug("NotesViewPage", "useEffect", "getNotes");
73
      getNotes();
74
    }
75
  }, [generalCommentsCheck, myCommentsCheck])
76
77
78 bc25708c Fantič
  const getNotes = useCallback(() => {
79 bb690a9a Fantič
    dispatch(getAllNotes({
80
      myComments: myCommentsCheck,
81
      generalComments: generalCommentsCheck,
82
      sortOptions: sortSettings
83
    }));
84 bc25708c Fantič
  }, [myCommentsCheck, generalCommentsCheck, sortSettings]);
85 917be067 Fantič
86
87 bc25708c Fantič
  const handleCreateComment = useCallback((newComment: string, replyingTo: { messageId: string; userName: string } | null) => {
88 2135f53d Fantič
    console.log(newComment, replyingTo)
89 917be067 Fantič
90 2135f53d Fantič
    if (!requestPending) {
91 3a226033 Fantič
      // creating new comment
92 2135f53d Fantič
      if (replyingTo != null) {
93
        dispatch(createNote({
94
          newNote: { note: newComment, reply_to: replyingTo.messageId } as Note
95 3a226033 Fantič
        }))
96
      }
97 2135f53d Fantič
      else {
98 3a226033 Fantič
        dispatch(createNote({
99 2135f53d Fantič
          newNote: { note: newComment } as Note
100 3a226033 Fantič
        }))
101
      }
102 2135f53d Fantič
    }
103 bc25708c Fantič
  }, [dispatch, createNote]);
104
105 bb690a9a Fantič
106 2135f53d Fantič
107 b225ffee Fantič
  return (
108 b5ac7218 Fantič
    <Box marginLeft={2.5} marginRight={2.5} marginTop={2.5}>
109 b225ffee Fantič
      <VStack>
110 b5ac7218 Fantič
        <HStack height={75} justifyContent="space-between">
111
          <Box justifyContent={"center"}>
112 b225ffee Fantič
            <Popover // @ts-ignore
113
              trigger={triggerProps => {
114
                return <Button colorScheme="primary" {...triggerProps} onPress={() => setIsSortOpen(true)}>
115
                  Sort Options
116
                </Button>;
117
              }} isOpen={isSortOpen} onClose={() => setIsSortOpen(!isSortOpen)}>
118
              <Popover.Content w="48">
119
                <Popover.Arrow />
120
                <Popover.CloseButton onPress={() => setIsSortOpen(false)} />
121
                <Popover.Header>Sort Options</Popover.Header>
122
                <Popover.Body>
123
                  <VStack>
124 760dd761 Fantič
                    <Button size="md" variant="outline" onPress={() => handleSortChanged("items", sortSettings)}
125 b225ffee Fantič
                      rightIcon={getSortIcon(sortSettings.items, "sm")}
126
                    >
127
                      Items</Button>
128 760dd761 Fantič
                    <Button size="md" variant="outline" marginTop={"5%"} onPress={() => handleSortChanged("date", sortSettings)}
129 b225ffee Fantič
                      rightIcon={getSortIcon(sortSettings.date, "sm")}>
130
                      Date</Button>
131
                  </VStack>
132
                </Popover.Body>
133
                <Popover.Footer justifyContent="flex-end">
134
                  <Button.Group space={2}>
135
                    <Button colorScheme="coolGray" variant="ghost" onPress={() => setIsSortOpen(false)}>
136
                      Cancel
137
                    </Button>
138
                    <Button colorScheme="success" onPress={() => { setIsSortOpen(false); getNotes() }}>
139
                      Save
140
                    </Button>
141
                  </Button.Group>
142
                </Popover.Footer>
143
              </Popover.Content>
144
            </Popover>
145
          </Box>
146 b5ac7218 Fantič
147
          <VStack space={0.5}>
148
            <Flex direction="row" alignItems="center" justify="flex-end" height={35}>
149 b225ffee Fantič
              <Text>My comments</Text>
150 2135f53d Fantič
              <Switch isChecked={myCommentsCheck} onValueChange={() => { if (!notesLoading) setMyCommentsCheck(!myCommentsCheck) }} size="md" />
151 b225ffee Fantič
            </Flex>
152 b5ac7218 Fantič
            <Flex direction="row" alignItems="center" justify="flex-end" height={35}>
153 b225ffee Fantič
              <Text>General comments</Text>
154 2135f53d Fantič
              <Switch isChecked={generalCommentsCheck} onValueChange={() => { if (!notesLoading) setGeneralCommentsCheck(!generalCommentsCheck) }} size="md" />
155 b225ffee Fantič
            </Flex>
156
          </VStack>
157
        </HStack>
158 b5ac7218 Fantič
        {
159
          notesLoading ? (
160
            <LoadingBox text="Loading notes" />
161
          )
162
            :
163
            (<NotesListView notes={notes} navigation={navigation} handleCreateComment={handleCreateComment} requestPending={requestPending} />)
164
        }
165 67b916af Fantič
166 2135f53d Fantič
167 b225ffee Fantič
      </VStack>
168
    </Box>
169 917be067 Fantič
  );
170
}
171
172
export default NotesViewPage;