Projekt

Obecné

Profil

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