feat(web): try to add flow

quake_webapp/packages/calendar-timeline/src/CalendarTimeline.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import Timeline from 'react-calendar-timeline'
 import 'react-calendar-timeline/lib/Timeline.css'
 import dayjs from "dayjs";
@@ -11,42 +11,63 @@ export type Props = {
 }
 
 function CalendarTimeline(props: Props) {
-  let groups: any = [];
   let group_map: any = {};
-  let items: any = [];
-
-  if (props.entries && props.entries.items) {
-    let index = 1;
-    for (let item of props.entries.items) {
-      groups.push({
-        id: index,
-        title: item
-      })
-      group_map[item] = index;
-      index = index + 1;
+
+  const [entries, setEntries] = React.useState(props.entries);
+  const [data, setData] = React.useState(props.data);
+
+  React.useEffect(() => {
+    setData(props.data);
+  }, [props])
+
+  React.useEffect(() => {
+    setEntries(props.entries);
+  }, [props])
+
+  const buildData =  useMemo(() => {
+    let items: any = [];
+    if (!!data && data.length > 0) {
+      let index = 1;
+      for (let datum of data) {
+        items.push({
+          id: index,
+          group: group_map[datum],
+          title: datum.title,
+          start_time: dayjs(datum.start_time).toDate(),
+          end_time: dayjs(datum.end_time).toDate()
+        })
+
+        index = index + 1;
+      }
     }
-  }
-
-  if (!!props.data && props.data.length > 0) {
-    let index = 1;
-    for (let datum of props.data) {
-      items.push({
-        id: index,
-        group: group_map[datum],
-        title: datum.title,
-        start_time: dayjs(datum.start_time).toDate(),
-        end_time: dayjs(datum.end_time).toDate()
-      })
-
-      index = index + 1;
+
+    return items
+  }, [data, group_map])
+
+  const buildGroups = useMemo(() => {
+    let groups: any = [];
+    console.log(entries);
+    if (entries && entries.items) {
+      let index = 1;
+      for (let item of entries.items) {
+        groups.push({
+          id: index,
+          title: item
+        })
+        group_map[item] = index;
+        index = index + 1;
+      }
     }
-  }
+
+    console.log(groups);
+    return groups;
+  }, [entries, group_map]);
 
   return (
     <div>
       <Timeline
-        groups={groups}
-        items={items}
+        groups={buildGroups}
+        items={buildData}
         defaultTimeStart={dayjs().add(-7, 'day').toDate()}
         defaultTimeEnd={dayjs().add(7, 'day').toDate()}
       />