client/web: add eslint

Add eslint to require stricter typescript rules, particularly around
required hook dependencies. This commit also updates any files that
were now throwing errors with eslint.

Updates #10261

Signed-off-by: Sonia Appasamy <sonia@tailscale.com>

client/web/src/hooks/auth.ts

@@ -65,17 +65,18 @@ export default function useAuth() {
       .catch((error) => {
         console.error(error)
       })
-  }, [])
+  }, [loadAuth])
 
   useEffect(() => {
     loadAuth().then((d) => {
       if (
         !d.canManageNode &&
-        new URLSearchParams(window.location.search).get("check") == "now"
+        new URLSearchParams(window.location.search).get("check") === "now"
       ) {
         newSession()
       }
     })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return {

client/web/src/hooks/exit-nodes.ts

@@ -71,6 +71,8 @@ export default function useExitNodes(tailnetName: string, filter?: string) {
     }
   }, [data, tailnetName])
 
+  const hasFilter = Boolean(filter)
+
   const mullvadNodesSorted = useMemo(() => {
     const nodes: ExitNode[] = []
 
@@ -91,7 +93,7 @@ export default function useExitNodes(tailnetName: string, filter?: string) {
       })
     }
 
-    if (!Boolean(filter)) {
+    if (!hasFilter) {
       // When nothing is searched, only show a single best-matching
       // exit node per-country.
       //
@@ -121,7 +123,7 @@ export default function useExitNodes(tailnetName: string, filter?: string) {
     }
 
     return nodes.sort(compareByName)
-  }, [locationNodesMap, Boolean(filter)])
+  }, [hasFilter, locationNodesMap])
 
   // Ordered and filtered grouping of exit nodes.
   const exitNodeGroups = useMemo(() => {
@@ -165,7 +167,7 @@ function highestPriorityNode(nodes: ExitNode[]): ExitNode | undefined {
 
 // compareName compares two exit nodes alphabetically by name.
 function compareByName(a: ExitNode, b: ExitNode): number {
-  if (a.Location && b.Location && a.Location.Country == b.Location.Country) {
+  if (a.Location && b.Location && a.Location.Country === b.Location.Country) {
     // Always put "<Country>: Best Match" node at top of country list.
     if (a.Name.includes(": Best Match")) {
       return -1

client/web/src/hooks/node-data.ts

@@ -120,7 +120,7 @@ export default function useNodeData() {
           throw err
         })
     },
-    [data]
+    [data, isPosting, refreshData]
   )
 
   const updatePrefs = useCallback(
@@ -169,7 +169,7 @@ export default function useNodeData() {
       }
     },
     // Run once.
-    []
+    [refreshData]
   )
 
   return { data, refreshData, updateNode, updatePrefs, isPosting }

client/web/src/hooks/self-update.ts

@@ -29,15 +29,8 @@ export enum UpdateState {
 // useInstallUpdate initiates and tracks a Tailscale self-update via the LocalAPI,
 // and returns state messages showing the progress of the update.
 export function useInstallUpdate(currentVersion: string, cv?: VersionInfo) {
-  if (!cv) {
-    return {
-      updateState: UpdateState.UpToDate,
-      updateLog: "",
-    }
-  }
-
   const [updateState, setUpdateState] = useState<UpdateState>(
-    cv.RunningLatest ? UpdateState.UpToDate : UpdateState.Available
+    cv?.RunningLatest ? UpdateState.UpToDate : UpdateState.Available
   )
 
   const [updateLog, setUpdateLog] = useState<string>("")
@@ -132,7 +125,10 @@ export function useInstallUpdate(currentVersion: string, cv?: VersionInfo) {
       if (timer) clearTimeout(timer)
       timer = 0
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  return { updateState, updateLog }
+  return !cv
+    ? { updateState: UpdateState.UpToDate, updateLog: "" }
+    : { updateState, updateLog }
 }