Merge pull request #2893 from ever-co/ui-improvements

Tiny UI Improvements

apps/web/app/[locale]/integration/github/component.tsx

@@ -13,6 +13,7 @@ const GitHub = () => {
 	const searchParams = useSearchParams();
 	const installation_id = searchParams?.get('installation_id');
 	const setup_action = searchParams?.get('setup_action');
+	const initialLoad = useRef<boolean>(false);
 
 	const t = useTranslations();
 
@@ -49,15 +50,17 @@ const GitHub = () => {
 	}, [integrationTenantLoading, integrationTenant, getRepositories]);
 
 	useEffect(() => {
-		if (!loadingIntegrationTypes && integrationTypes.length === 0) {
+		if (!loadingIntegrationTypes && integrationTypes.length === 0 && !initialLoad.current) {
+			initialLoad.current = true;
+
 			getIntegrationTypes().then((types) => {
 				const allIntegrations = types.find((item: any) => item.name === 'All Integrations');
 				if (allIntegrations && allIntegrations?.id) {
 					getIntegrationTenant('Github');
 				}
 			});
 		}
-	}, [loadingIntegrationTypes, integrationTypes, getIntegrationTypes, getIntegrationTenant]);
+	}, [loadingIntegrationTypes, integrationTypes, getIntegrationTypes, getIntegrationTenant, initialLoad]);
 
 	return (
 		<div className="flex flex-col p-3">

apps/web/app/[locale]/page-component.tsx

@@ -55,7 +55,7 @@ function MainPage() {
 	React.useEffect(() => {
 		window && window?.localStorage.getItem('conf-fullWidth-mode');
 		setFullWidth(JSON.parse(window?.localStorage.getItem('conf-fullWidth-mode') || 'true'));
-	}, [fullWidth, setFullWidth]);
+	}, [setFullWidth]);
 
 	if (!online) {
 		return <Offline />;

apps/web/app/hooks/features/useDailyPlan.ts

@@ -303,8 +303,11 @@ export function useDailyPlan() {
 		[...profileDailyPlans.items].sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
 
 	useEffect(() => {
-		getMyDailyPlans();
-	}, [getMyDailyPlans]);
+		if (firstLoad) {
+			getMyDailyPlans();
+			getAllDayPlans();
+		}
+	}, [getMyDailyPlans, getAllDayPlans, firstLoad]);
 
 	return {
 		dailyPlan,

apps/web/app/hooks/features/useTimeLogs.ts

@@ -5,9 +5,13 @@ import { timerLogsDailyReportState } from '@app/stores/time-logs';
 import { useQuery } from '../useQuery';
 import { useCallback, useEffect } from 'react';
 import moment from 'moment';
+import { useFirstLoad } from '../useFirstLoad';
 
 export function useTimeLogs() {
 	const { user } = useAuthenticateUser();
+
+	const { firstLoadData: firstLoadTimeLogs, firstLoad } = useFirstLoad();
+
 	const [timerLogsDailyReport, setTimerLogsDailyReport] = useRecoilState(timerLogsDailyReportState);
 
 	const { loading: timerLogsDailyReportLoading, queryCall: queryTimerLogsDailyReport } = useQuery(
@@ -42,11 +46,14 @@ export function useTimeLogs() {
 	);
 
 	useEffect(() => {
-		getTimerLogsDailyReport();
-	}, [getTimerLogsDailyReport]);
+		if (firstLoad) {
+			getTimerLogsDailyReport();
+		}
+	}, [getTimerLogsDailyReport, firstLoad]);
 
 	return {
 		timerLogsDailyReport,
-		timerLogsDailyReportLoading
+		timerLogsDailyReportLoading,
+		firstLoadTimeLogs
 	};
 }

apps/web/app/hooks/features/useTimeSlot.ts

@@ -46,11 +46,10 @@ export function useTimeSlots(hasFilter?: boolean) {
 				organizationId: user?.employee.organizationId ?? '',
 				ids: ids
 			}).then(() => {
-				const updatedSlots = timeSlots.filter((el) => (!ids?.includes(el.id) ? el : null));
-				setTimeSlots(updatedSlots);
+				setTimeSlots((timeSlots) => timeSlots.filter((el) => (!ids?.includes(el.id) ? el : null)));
 			});
 		},
-		[queryDeleteCall, setTimeSlots, timeSlots, user]
+		[queryDeleteCall, setTimeSlots, user]
 	);
 
 	useEffect(() => {

apps/web/app/hooks/features/useTimer.ts

@@ -84,22 +84,22 @@ function useLocalTimeCounter(timerStatus: ITimerStatus | null, activeTeamTask: I
 
 	// Update local time status (storage and store) only when global timerStatus changes
 	useEffect(() => {
-		// if (firstLoad) {
-		const localStatus = getLocalCounterStatus();
-		localStatus && setLocalTimerStatus(localStatus);
-
-		const timerStatusDate = timerStatus?.lastLog?.createdAt
-			? moment(timerStatus?.lastLog?.createdAt).unix() * 1000 - timerStatus?.lastLog?.duration
-			: 0;
-
-		timerStatus &&
-			updateLocalTimerStatus({
-				runnedDateTime:
-					(timerStatus.running ? timerStatusDate || Date.now() : 0) || localStatus?.runnedDateTime || 0,
-				running: timerStatus.running,
-				lastTaskId: timerStatus.lastLog?.taskId || null
-			});
-		// }
+		if (firstLoad) {
+			const localStatus = getLocalCounterStatus();
+			localStatus && setLocalTimerStatus(localStatus);
+
+			const timerStatusDate = timerStatus?.lastLog?.createdAt
+				? moment(timerStatus?.lastLog?.createdAt).unix() * 1000 - timerStatus?.lastLog?.duration
+				: 0;
+
+			timerStatus &&
+				updateLocalTimerStatus({
+					runnedDateTime:
+						(timerStatus.running ? timerStatusDate || Date.now() : 0) || localStatus?.runnedDateTime || 0,
+					running: timerStatus.running,
+					lastTaskId: timerStatus.lastLog?.taskId || null
+				});
+		}
 	}, [firstLoad, timerStatus, getLocalCounterStatus, setLocalTimerStatus, updateLocalTimerStatus]);
 
 	// THis is form constant update of the progress line
@@ -115,16 +115,16 @@ function useLocalTimeCounter(timerStatus: ITimerStatus | null, activeTeamTask: I
 	}, [seconds, firstLoad, timerStatusRef]);
 
 	useEffect(() => {
-		// if (firstLoad) {
-		timerSecondsRef.current = 0;
-		setTimerSeconds(0);
-		// }
+		if (firstLoad) {
+			timerSecondsRef.current = 0;
+			setTimerSeconds(0);
+		}
 	}, [activeTeamTask?.id, setTimerSeconds, firstLoad, timerSecondsRef]);
 
 	useEffect(() => {
-		// if (firstLoad) {
-		setTimerSeconds(timerSecondsRef.current);
-		// }
+		if (firstLoad) {
+			setTimerSeconds(timerSecondsRef.current);
+		}
 	}, [setTimerSeconds, firstLoad]);
 
 	// Time Counter
@@ -276,9 +276,9 @@ export function useTimer() {
 
 	// Loading states
 	useEffect(() => {
-		// if (firstLoad) {
-		setTimerStatusFetching(loading);
-		// }
+		if (firstLoad) {
+			setTimerStatusFetching(loading);
+		}
 	}, [loading, firstLoad, setTimerStatusFetching]);
 
 	useEffect(() => {

apps/web/app/hooks/features/useTimezoneSettings.ts

@@ -2,18 +2,18 @@
 
 import { setActiveTimezoneCookie } from '@app/helpers';
 import { activeTimezoneState, timezoneListState, activeTimezoneIdState, timezonesFetchingState } from '@app/stores';
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 
 export function useTimezoneSettings() {
-	const [timezones, setTimezone] = useRecoilState(timezoneListState);
+	const [timezones] = useRecoilState(timezoneListState);
 	const activeTimezone = useRecoilValue(activeTimezoneState);
 	const [, setActiveTimezoneId] = useRecoilState(activeTimezoneIdState);
-	const [timezonesFetching, setTimezoneFetching] = useRecoilState(timezonesFetchingState);
+	const [timezonesFetching] = useRecoilState(timezonesFetchingState);
 
-	useEffect(() => {
-		setTimezone(timezones);
-	}, [setTimezoneFetching, activeTimezone, setTimezone, timezones]);
+	// useEffect(() => {
+	// 	setTimezone(timezones);
+	// }, [setTimezone, timezones]);
 
 	const setActiveTimezone = useCallback(
 		(timezoneId: (typeof timezones)[0]) => {

apps/web/app/hooks/useCallbackRef.ts

@@ -2,7 +2,7 @@
 
 import { useRef } from 'react';
 
-export function useCallbackRef<T extends (...data: any[]) => void>(func?: T) {
+export function useCallbackRef<T extends ((...data: any[]) => void) | undefined>(func: T) {
 	const ref = useRef(func);
 
 	ref.current = func;

apps/web/app/hooks/useLiveKit.ts

@@ -1,33 +1,32 @@
-"use client";
-import { tokenLiveKitRoom } from "@app/services/server/livekitroom";
-import { useEffect, useState } from "react";
+'use client';
+import { tokenLiveKitRoom } from '@app/services/server/livekitroom';
+import { useEffect, useState } from 'react';
 
 interface ITokenLiveKitProps {
-    roomName: string;
-    username: string;
+	roomName: string;
+	username: string;
 }
 
 export function useTokenLiveKit({ roomName, username }: ITokenLiveKitProps) {
+	const [token, setToken] = useState<string | null>(() => {
+		if (typeof window !== 'undefined') {
+			return window.localStorage.getItem('token-live-kit');
+		}
+		return null;
+	});
 
-    const [token, setToken] = useState<string | null>(() => {
-        if (typeof window !== 'undefined') {
-            return window.localStorage.getItem('token-live-kit');
-        }
-        return null;
-    });
+	useEffect(() => {
+		const fetchToken = async () => {
+			try {
+				const response = await tokenLiveKitRoom({ roomName, username });
+				window.localStorage.setItem('token-live-kit', response.token);
+				setToken(response.token);
+			} catch (error) {
+				console.error('Failed to fetch token:', error);
+			}
+		};
+		fetchToken();
+	}, [roomName, username]);
 
-    useEffect(() => {
-        const fetchToken = async () => {
-            try {
-                const response = await tokenLiveKitRoom({ roomName, username });
-                window.localStorage.setItem('token-live-kit', response.token);
-                setToken(response.token);
-            } catch (error) {
-                console.error('Failed to fetch token:', error);
-            }
-        };
-        fetchToken();
-    }, [roomName, username, token]);
-
-    return { token };
+	return { token };
 }

apps/web/components/layout/header/position-dropdown.tsx

@@ -34,15 +34,18 @@ export const PositionDropDown = ({
 			title: 'CTO'
 		}
 	]);
-	const handleAddNew = (position: string) => {
-		setNewPosition(position);
-		setPositions([
-			...positions,
-			{
-				title: position
-			}
-		]);
-	};
+	const handleAddNew = useCallback(
+		(position: string) => {
+			setNewPosition(position);
+			setPositions([
+				...positions,
+				{
+					title: position
+				}
+			]);
+		},
+		[positions, setPositions, setNewPosition]
+	);
 
 	const items = useMemo(() => mapPositionItems(positions), [positions]);
 

apps/web/components/pages/setting/interaction-observer.tsx

@@ -1,28 +1,31 @@
 'use client';
+import { useCallbackRef } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import { useIntersectionObserver } from '@uidotdev/usehooks';
 import React, { useEffect } from 'react';
 
 export const InteractionObserverVisible = ({
 	id,
 	setActiveSection,
-	children,
+	children
 }: {
 	id: string;
 	setActiveSection: (v: any) => void;
 	children: React.ReactNode;
 	className?: string;
 }) => {
+	const $setActiveSection = useCallbackRef(setActiveSection);
+
 	const [ref, entry] = useIntersectionObserver({
 		threshold: 0.9,
 		root: null,
 		rootMargin: '20px'
 	});
 	useEffect(() => {
 		if (entry?.isIntersecting) {
-			setActiveSection(id);
+			$setActiveSection.current?.(id);
 		}
-	}, [entry, id, setActiveSection]);
+	}, [entry, id, $setActiveSection]);
 
 	return (
 		<div className="relative">

apps/web/components/pages/task/description-block/editor-footer.tsx

@@ -1,4 +1,4 @@
-import { useTeamTasks } from '@app/hooks';
+import { useCallbackRef, useTeamTasks } from '@app/hooks';
 import { detailedTaskState } from '@app/stores';
 import { Button } from 'lib/components';
 import Image from 'next/image';
@@ -17,6 +17,7 @@ interface IDFooterProps {
 }
 
 const EditorFooter = ({ isUpdated, setIsUpdated, editorValue, editorRef, clearUnsavedValues }: IDFooterProps) => {
+	const $setIsUpdated = useCallbackRef(setIsUpdated);
 	const [task] = useRecoilState(detailedTaskState);
 	const { updateDescription } = useTeamTasks();
 	const t = useTranslations();
@@ -37,7 +38,7 @@ const EditorFooter = ({ isUpdated, setIsUpdated, editorValue, editorRef, clearUn
 	useEffect(() => {
 		const handleClickOutsideEditor = (event: MouseEvent) => {
 			if (editorRef.current && !editorRef.current.contains(event.target)) {
-				setIsUpdated();
+				$setIsUpdated.current();
 			}
 		};
 		// Add event listener when component mounts
@@ -46,16 +47,14 @@ const EditorFooter = ({ isUpdated, setIsUpdated, editorValue, editorRef, clearUn
 			// Clean up event listener when component unmounts
 			document.removeEventListener('mousedown', handleClickOutsideEditor);
 		};
-	}, [editorRef, setIsUpdated]);
+	}, [editorRef, $setIsUpdated]);
 
 	return (
 		<div>
 			<div className={`flex justify-end mb-0 ${isUpdated ? 'opacity-100' : 'opacity-0'}`}>
 				<Button
 					variant="grey"
-					onClick={() => {
-						cancelEdit();
-					}}
+					onClick={cancelEdit}
 					className=" dark:bg-gray-500 font-medium min-w-[5rem] w-[3rem] text-sm px-6 py-2 m-1 rounded-lg transition-all"
 					disabled={!isUpdated}
 				>