#70 Added UI sagas and hook.

src/components/Header/User.jsx

@@ -31,6 +31,10 @@ const Container = styled.button`
   &:hover {
     background: rgba(255, 255, 255, 0.1);
   }
+
+  &:active {
+    background: rgba(255, 255, 255, 0.2);
+  }
 `;
 
 const InfoContainer = styled.div`
@@ -75,11 +79,11 @@ const PropertyValue = styled.div`
   margin-left: 2px;
 `;
 
-const User = () => {
+const User = (props) => {
   const { profile } = useSelector(slice.selectors.getState);
 
   return (
-    <Container>
+    <Container {...props}>
       <Avatar src={profile?.avatar_url} />
       <InfoContainer>
         {!profile && <div>Find a user</div>}

src/components/Header/UserSearch.jsx

@@ -1,8 +1,9 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import slice from '@/redux/modules/profiles';
 import Highlight from "@/shared/components/Highlight";
 import LoadingOverlay from "@/shared/components/LoadingOverlay";
 import ScrollBar from "@/shared/components/ScrollBar";
+import { useUIProperty } from "@/shared/hooks";
 import {
   Avatar, ListItem as ListItemOrigin,
   ListItemAvatar, ListSubheader,
@@ -62,9 +63,11 @@ const TopHeader = (
 
 const UserSearch = () => {
   const dispatch = useDispatch();
+  const inputRef = useRef();
   const [search, setSearch] = useState('');
   const [neverChange, setNeverChange] = useState(true);
   const { isFetching, searched, top } = useSelector(slice.selectors.getState);
+  const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
 
   const onChange = useCallback(
     (event) => {
@@ -77,9 +80,10 @@ const UserSearch = () => {
   const onClick = useCallback(
     (user) => () => {
       dispatch(slice.actions.setProfile(user));
+      setBodyOpen(false);
       dispatch(slice.actions.fetchProfile(user.login));
     },
-    [dispatch],
+    [setBodyOpen, dispatch],
   );
 
   useDebounce(
@@ -96,12 +100,23 @@ const UserSearch = () => {
     [search, dispatch],
   );
 
+  useDebounce(
+    () => {
+      if (inputRef.current && bodyOpen) {
+        inputRef.current.querySelector('input').focus();
+      }
+    },
+    100,
+    [bodyOpen],
+  );
+
   return (
     <Container>
       <TextField
         label="Username"
         placeholder="Type username"
         onChange={onChange}
+        ref={inputRef}
       />
       <LoadingOverlay loading={isFetching}>
         <ListContainer>

src/components/Header/index.jsx

@@ -1,15 +1,16 @@
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import FetchTopUser from "@/components/Header/FetchTopUser";
 import User from "@/components/Header/User";
 import UserSearch from "@/components/Header/UserSearch";
+import { StageTypes } from "@/models/StageTypes";
+import { useUIProperty } from "@/shared/hooks";
 import Collapse from "@material-ui/core/Collapse";
 import Grid from "@material-ui/core/Grid";
 import Paper from "@material-ui/core/Paper";
 import { withStyles } from "@material-ui/core/styles";
 import Tab from "@material-ui/core/Tab";
 import Tabs from "@material-ui/core/Tabs";
 
-
 const PaperStyled = withStyles(() => ({
   root: {
     position: 'absolute',
@@ -19,13 +20,29 @@ const PaperStyled = withStyles(() => ({
   },
 }))(Paper);
 
+const StepBodies = {
+  [StageTypes.user]: UserSearch,
+};
+
 const Header = () => {
+  const [step, setStep] = useUIProperty('step');
+  const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
   const [value, setValue] = useState(0);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
+  const StepBody = StepBodies[step];
+
+  const onClick = useCallback(
+    (newStep) => () => {
+      setStep(newStep);
+      setBodyOpen((prev) => !prev);
+    },
+    [setBodyOpen, setStep],
+  );
+
   return (
     <PaperStyled square>
       <FetchTopUser />
@@ -42,17 +59,19 @@ const Header = () => {
         <Tab label="Show" />
       </Tabs>
       <Grid container>
-        <User />
+        <User onClick={onClick(StageTypes.user)} />
         <div>
           Repository
         </div>
         <div>
           Show
         </div>
       </Grid>
-      <Collapse in>
-        <UserSearch />
-      </Collapse>
+      {StepBody && (
+        <Collapse in={bodyOpen}>
+          <StepBody />
+        </Collapse>
+      )}
     </PaperStyled>
   );
 };

src/models/StageTypes.js

@@ -0,0 +1,5 @@
+export const StageTypes = {
+  user: 'user',
+  repository: 'repository',
+  show: 'show',
+};

src/redux/modules/index.js

@@ -1,16 +1,19 @@
 import { all } from 'redux-saga/effects';
 import profiles from "./profiles";
+import ui from './ui';
 
 // Put modules that have their reducers nested in other (root) reducers here
 const nestedSlices = [];
 
 // Put modules whose reducers you want in the root tree in this array.
 const rootSlices = [
   profiles,
+  ui,
 ];
 
 const sagas = [...rootSlices, ...nestedSlices]
   .map((slice) => slice.sagas)
+  .filter(Boolean)
   .reduce((acc, sagas) => [...acc, ...sagas]);
 
 export function* rootSaga() {

src/redux/modules/ui.js

@@ -0,0 +1,21 @@
+import { StageTypes } from "@/models/StageTypes";
+import { createSlice } from "@/redux/utils";
+
+const initialState = {
+  step: StageTypes.user,
+  view: StageTypes.repository,
+  bodyOpen: false,
+};
+
+export default createSlice({
+  name: 'ui',
+  initialState,
+  reducers: {
+    change: (state, { payload }) => {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+  },
+});

src/shared/hooks/index.js

@@ -0,0 +1 @@
+export * from './useUIProperty';

src/shared/hooks/useUIProperty.js

@@ -0,0 +1,31 @@
+import { useCallback, useRef } from "react";
+import slice from '@/redux/modules/ui';
+import { functionalUpdate } from "@/shared/utils/functionalUpdate";
+import { useDispatch, useSelector } from "react-redux";
+
+/**
+ * @param {String} property
+ * @param {*} [defaultValue]
+ * @return {[*, (function(*): void)]}
+ */
+export const useUIProperty = (property, defaultValue) => {
+  const dispatch = useDispatch();
+  const prop = useRef(null);
+
+  prop.current = property || null;
+  const { [property]: value = defaultValue } = useSelector(slice.selectors.getState);
+
+  const prev = useRef(null);
+  prev.current = value;
+
+  const change = useCallback(
+    (newValue) => {
+      dispatch(slice.actions.change({
+        [prop.current]: functionalUpdate(newValue, prev.current),
+      }));
+    },
+    [dispatch],
+  );
+
+  return [value, change];
+};

src/shared/utils/functionalUpdate.js

@@ -0,0 +1,8 @@
+/**
+ * @param {*|function(prevValue): newValue} updater
+ * @param {*} prev
+ * @return {*}
+ */
+export const functionalUpdate = (updater, prev) => {
+  return typeof updater === 'function' ? updater(prev) : updater;
+};

src/shared/utils/index.js

@@ -1 +1,2 @@
 export * from './makeId';
+export * from './functionalUpdate';