fix: start observing events only on page rendered

MDeLuise · Sep 11, 2023 · 7aff37a · 7aff37a
1 parent 2fe88b5
commit 7aff37a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/frontend/src/components/AllLogs.tsx b/frontend/src/components/AllLogs.tsx
@@ -160,7 +160,8 @@ export default function AllLogs(props: {
  entries: diaryEntry[],
  plants: plant[],
  openEditEvent: (arg: diaryEntry) => void,
- printError: (err: any) => void;
+ printError: (err: any) => void,
+ active: boolean;
 }) {
  const pageSize = 5;
  const [entities, setEntities] = useState<diaryEntry[]>([]);
@@ -169,6 +170,8 @@ export default function AllLogs(props: {
  const [fetchNew, setFetchNew] = useState<boolean>(true);
  const [filteredPlantId, setFilteredPlantId] = useState<number[]>([]);
  const [filteredEventType, setFilteredEventType] = useState<string[]>([]);
+ const [wasAlreadyRendered, setWasAlreadyRendered] = useState<boolean>(false);
+
 
  const observerCallback = (entries: IntersectionObserverEntry[], _observer: IntersectionObserver) => {
  const entry = entries[0];
@@ -177,11 +180,13 @@ export default function AllLogs(props: {
  }
  };
 
+
  const observer = new IntersectionObserver(observerCallback, {
  rootMargin: '0px',
  threshold: 1.0,
  });
 
+
  useEffect(() => {
  if (pageNo === -1) {
  return;
@@ -191,12 +196,26 @@ export default function AllLogs(props: {
  }
  }, [pageNo, entities, fetchNew]);
 
+
  useEffect(() => {
  setPageNo(0);
  setEntities([]);
  setFetchNew(true);
  }, [filteredPlantId, filteredEventType, props.entries]);
 
+
+ useEffect(() => {
+ if (!wasAlreadyRendered && props.active) {
+ setTimeout(() => {
+ if (myRef.current !== undefined) {
+ observer.observe(myRef.current as Element);
+ }
+ }, 700);
+ setWasAlreadyRendered(true);
+ }
+ }, [props.active]);
+
+
  const getPage = () => {
  if (myRef.current !== undefined && myRef.current !== null) {
  observer.unobserve(myRef.current);
@@ -239,11 +258,6 @@ export default function AllLogs(props: {
 
  useEffect(() => {
  setPageNo(0);
- setTimeout(() => {
- if (myRef.current !== undefined) {
- observer.observe(myRef.current as Element);
- }
- }, 700);
  }, []);
 
  const myRef = useRef<Element>();
@@ -273,7 +287,7 @@ export default function AllLogs(props: {
  return <LogEntry
  entity={entity}
  last={index == entities.length - 1}
- key={entity.id}
+ key={index}
  lastRef={myRef}
  editEvent={() => props.openEditEvent(entity)}
  />;

diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
@@ -334,6 +334,7 @@ export default function Home(props: { isLoggedIn: () => boolean, requestor: Axio
  setEditEventVisible(true);
  }}
  printError={printError}
+ active={activeTab == 1}
  />
  </Box>
 
@@ -350,7 +351,7 @@ export default function Home(props: { isLoggedIn: () => boolean, requestor: Axio
  requestor={props.requestor}
  visibility={activeTab === 3}
  printError={printError}
- />
+  />
  </Box>
  </Box>