#103 move ListItemButton to shared components.

src/components/Header/components/BranchStep/Body.jsx

@@ -6,7 +6,13 @@ import { FixedSizeList } from 'react-window';
 import debounce from 'lodash.debounce';
 import styled from 'styled-components';
 
-import { Avatar, ListItem as ListItemOrigin, ListItemAvatar, ListSubheader, TextField } from '@mui/material';
+import {
+  Avatar,
+  ListItem as ListItemOrigin,
+  ListItemAvatar,
+  ListSubheader,
+  TextField,
+} from '@mui/material';
 import List from '@mui/material/List';
 import ListItemText from '@mui/material/ListItemText';
 
@@ -18,12 +24,12 @@ import slice from '@/redux/modules/branches';
 import repositoriesSlice from '@/redux/modules/repositories';
 
 import Highlight from '@/shared/components/Highlight';
+import ListItemButton from '@/shared/components/ListItemButton';
 import LoadingOverlay from '@/shared/components/LoadingOverlay';
 import { ScrollBarMixin } from '@/shared/components/ScrollBar';
 import { useUIProperty } from '@/shared/hooks';
 import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
 
-import ListItemButton from '../shared/ListItemButton';
 import Marker from '../shared/Marker';
 
 import Secondary from './Secondary';
@@ -83,14 +89,13 @@ const Body = () => {
   const { isFetching, items } = useSelector(slice.selectors.getState);
   const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
   const [filtered, setFiltered] = useState(items);
-  const { selected: repository } = useSelector(repositoriesSlice.selectors.getState);
+  const { selected: repository } = useSelector(
+    repositoriesSlice.selectors.getState,
+  );
   const { defaultBranch } = repository || {};
 
   const changeSearch = useMemo(
-    () => debounce(
-      (value) => setSearch(value),
-      300,
-    ),
+    () => debounce((value) => setSearch(value), 300),
     [],
   );
 
@@ -142,7 +147,10 @@ const Body = () => {
             primary={(
               <Primary>
                 {isDefault && <Marker>default</Marker>}
-                <Highlight search={search} text={item.name} />
+                <Highlight
+                  search={search}
+                  text={item.name}
+                />
               </Primary>
             )}
             secondary={<Secondary item={item} />}

src/components/Header/components/ProfileStep/Body.jsx

@@ -4,7 +4,13 @@ import { useDebounce } from 'react-use';
 
 import styled from 'styled-components';
 
-import { Avatar, ListItem as ListItemOrigin, ListItemAvatar, ListSubheader, TextField } from '@mui/material';
+import {
+  Avatar,
+  ListItem as ListItemOrigin,
+  ListItemAvatar,
+  ListSubheader,
+  TextField,
+} from '@mui/material';
 import List from '@mui/material/List';
 import ListItemText from '@mui/material/ListItemText';
 
@@ -13,13 +19,12 @@ import { UrlPratTypes } from '@/models/UrlPartTypes';
 import slice from '@/redux/modules/profiles';
 
 import Highlight from '@/shared/components/Highlight';
+import ListItemButton from '@/shared/components/ListItemButton';
 import LoadingOverlay from '@/shared/components/LoadingOverlay';
 import ScrollBar from '@/shared/components/ScrollBar';
 import { useUIProperty } from '@/shared/hooks';
 import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
 
-import ListItemButton from '../shared/ListItemButton';
-
 const Container = styled.div`
   min-height: 100px;
   display: flex;
@@ -57,13 +62,19 @@ const NotData = styled(({ className }) => (
 `;
 
 const SearchHeader = (
-  <ListSubheader component="li" disableSticky>
+  <ListSubheader
+    component="li"
+    disableSticky
+  >
     Search results
   </ListSubheader>
 );
 
 const TopHeader = (
-  <ListSubheader component="li" disableSticky>
+  <ListSubheader
+    component="li"
+    disableSticky
+  >
     Top profiles
   </ListSubheader>
 );
@@ -132,7 +143,12 @@ const Body = () => {
           <Avatar src={profile.avatar} />
         </ListItemAvatar>
         <ListItemText
-          primary={<Highlight search={search} text={profile.login} />}
+          primary={(
+            <Highlight
+              search={search}
+              text={profile.login}
+            />
+          )}
           secondary={profile.type}
         />
       </ListItem>

src/components/Header/components/RepositoryStep/Body.jsx

@@ -25,12 +25,12 @@ import { UrlPratTypes } from '@/models/UrlPartTypes';
 import slice from '@/redux/modules/repositories';
 
 import Highlight from '@/shared/components/Highlight';
+import ListItemButton from '@/shared/components/ListItemButton';
 import LoadingOverlay from '@/shared/components/LoadingOverlay';
 import { ScrollBarMixin } from '@/shared/components/ScrollBar';
 import { useUIProperty } from '@/shared/hooks';
 import { useRedirectTo } from '@/shared/hooks/useRedirectTo';
 
-import ListItemButton from '../shared/ListItemButton';
 import Marker from '../shared/Marker';
 
 import Secondary from './Secondary';