used boolstate and abbreviation

web-server/src/components/Teams/CreateTeams.tsx

@@ -9,14 +9,14 @@ import {
   Tooltip
 } from '@mui/material';
 import { useSnackbar } from 'notistack';
-import { FC, useState } from 'react';
+import { FC } from 'react';
 import React from 'react';
 
 import {
   useTeamCRUD,
   TeamsCRUDProvider
 } from '@/components/Teams/useTeamsConfig';
-import { useEasyState } from '@/hooks/useEasyState';
+import { useBoolState, useEasyState } from '@/hooks/useEasyState';
 import { BaseRepo } from '@/types/resources';
 
 import AnimatedInputWrapper from '../AnimatedInputWrapper/AnimatedInputWrapper';
@@ -163,7 +163,7 @@ const TeamRepos: FC<{ hideCardComponents?: boolean }> = ({
   } = useTeamCRUD();
 
   const searchQuery = useEasyState('');
-  const [searchFocus, setSearchFocus] = useState(false);
+  const searchFocus = useBoolState(false);
 
   return (
     <FlexBox col gap={2}>
@@ -193,8 +193,8 @@ const TeamRepos: FC<{ hideCardComponents?: boolean }> = ({
           getOptionLabel={(option) => `${option.parent}/${option.name}`}
           renderInput={(params) => (
             <TextField
-              onFocus={() => setSearchFocus(true)}
-              onBlur={() => setSearchFocus(false)}
+              onFocus={searchFocus.true}
+              onBlur={searchFocus.false}
               onChange={(e) => {
                 handleReposSearch(e as React.ChangeEvent<HTMLInputElement>);
                 searchQuery.set(e.target.value);
@@ -203,10 +203,10 @@ const TeamRepos: FC<{ hideCardComponents?: boolean }> = ({
               label={
                 selectedRepos.length ? (
                   `${selectedRepos.length} selected`
-                ) : !searchFocus ? (
+                ) : !searchFocus.value ? (
                   <AnimatedInputWrapper />
                 ) : (
-                  'Search for organization/repo'
+                  'Search for org/repo'
                 )
               }
               error={teamRepoError}