#68 Added rule for single quotes

.eslintrc

@@ -96,6 +96,7 @@
         "caseInsensitive": true
       }
     }],
-    "react/forbid-component-props": [0]
+    "react/forbid-component-props": [0],
+    "quotes": ["error", "single", { "avoidEscape": true }]
   }
 }

src/components/Header/StepsBar/Step.jsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 const PaperStyled = withStyles(() => ({
   root: {
     padding: '0 16px',
-    boxShadow: `2px 3px 3px 0px rgba(0,0,0,0.12), -2px 3px 3px 0px rgba(0,0,0,0.12)`,
+    boxShadow: '2px 3px 3px 0px rgba(0,0,0,0.12), -2px 3px 3px 0px rgba(0,0,0,0.12)',
     position: 'absolute',
     top: '100%',
     left: '-40px',

src/components/Header/index.jsx

@@ -1,18 +1,33 @@
 import React, { useCallback, useState } from 'react';
-import { StageTypes } from "@/models/StageTypes";
+import { StageTypes } from '@/models/StageTypes';
 import profilesSlice from '@/redux/modules/profiles';
-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";
-import { useSelector } from "react-redux";
-import RepoStepBody from "./components/RepositoryStep/Body";
-import RepoStepHeader from "./components/RepositoryStep/Header";
-import UserStepBody from "./components/UserStep/Body";
-import UserStepHeader from "./components/UserStep/Header";
+import repositoriesSlice from '@/redux/modules/repositories';
+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';
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
+import BranchStepBody from './components/BranchStep/Body';
+import BranchStepHeader from './components/BranchStep/Header';
+import RepoStepBody from './components/RepositoryStep/Body';
+import RepoStepHeader from './components/RepositoryStep/Header';
+import UserStepBody from './components/UserStep/Body';
+import UserStepHeader from './components/UserStep/Header';
+
+const RepoBranchContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  overflow: hidden;
+  
+  & > * {
+    width: 100%;
+  }
+`;
 
 const PaperStyled = withStyles(() => ({
   root: {
@@ -27,13 +42,15 @@ const PaperStyled = withStyles(() => ({
 const StepBodies = {
   [StageTypes.user]: UserStepBody,
   [StageTypes.repository]: RepoStepBody,
+  [StageTypes.branch]: BranchStepBody,
 };
 
 const Header = () => {
   const [step, setStep] = useUIProperty('step');
   const [bodyOpen, setBodyOpen] = useUIProperty('bodyOpen');
   const [value, setValue] = useState(0);
   const { selected: profile } = useSelector(profilesSlice.selectors.getState);
+  const { selected: repository } = useSelector(repositoriesSlice.selectors.getState);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
@@ -64,7 +81,16 @@ const Header = () => {
       </Tabs>
       <Grid container>
         <UserStepHeader onClick={onClick(StageTypes.user)} />
-        <RepoStepHeader onClick={onClick(StageTypes.repository)} disabled={!profile} />
+        <RepoBranchContainer>
+          <RepoStepHeader
+            onClick={onClick(StageTypes.repository)}
+            disabled={!profile}
+          />
+          <BranchStepHeader
+            onClick={onClick(StageTypes.branch)}
+            disabled={!repository}
+          />
+        </RepoBranchContainer>
         <div>
           Show
         </div>

src/components/Layout.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Header from '@/components/Header';
 import Main from '@/components/Main';
-import Progress from "@/components/Progress";
+import Progress from '@/components/Progress';
 import StageController from '@/components/StageController';
 
 const Layout = () => (

src/components/Main.jsx

@@ -9,9 +9,7 @@ const Container = withStyles({
 })(ContainerOriginal);
 
 const Main = () => (
-  <Container disableGutters fixed>
-    Sometext
-  </Container>
+  <Container disableGutters fixed />
 );
 
 export default Main;

src/components/Progress/index.jsx

@@ -1,8 +1,8 @@
-import React from "react";
+import React from 'react';
 import slice from '@/redux/modules/progress';
 import LinearProgressOrigin from '@material-ui/core/LinearProgress';
-import { useSelector } from "react-redux";
-import styled from "styled-components";
+import { useSelector } from 'react-redux';
+import styled from 'styled-components';
 
 const Container = styled.div`
   position: absolute;

src/redux/api/github/api.github.test.js

@@ -5,7 +5,6 @@ import {
   getBranches,
   getCommits,
 } from './index';
-import { CANCEL } from "redux-saga";
 
 describe('Github Rest API', () => {
   it('should search accounts', async () => {

src/redux/api/github/getBranches.js

@@ -1,6 +1,6 @@
-import { withCancellation } from "@/redux/utils";
+import { withCancellation } from '@/redux/utils';
 import getClient from './getClient';
-import { parsePageInfo, parseRateLimit } from "./utils";
+import { parsePageInfo, parseRateLimit } from './utils';
 
 const reg = /page=(\d+)>; rel="last"/;
 const getCount = (link, defValue = 0) =>

src/redux/api/github/getClient.js

@@ -1,4 +1,4 @@
-import { createOAuthAppAuth } from "@octokit/auth-oauth-app";
+import { createOAuthAppAuth } from '@octokit/auth-oauth-app';
 import { Octokit } from '@octokit/rest';
 
 let instance;

src/redux/api/github/getCommits.js

@@ -1,5 +1,5 @@
-import { parsePageInfo, parseRateLimit } from "@/redux/api/github/utils";
-import { withCancellation } from "@/redux/utils";
+import { parsePageInfo, parseRateLimit } from '@/redux/api/github/utils';
+import { withCancellation } from '@/redux/utils';
 import getClient from './getClient';
 
 /**

src/redux/api/github/getEmojis.js

@@ -1,6 +1,6 @@
-import { withCancellation } from "@/redux/utils";
+import { withCancellation } from '@/redux/utils';
 import getClient from './getClient';
-import { parseRateLimit } from "./utils";
+import { parseRateLimit } from './utils';
 
 /**
  * Gets list of emojis

src/redux/api/github/getProfile.js

@@ -1,6 +1,6 @@
-import { withCancellation } from "@/redux/utils";
+import { withCancellation } from '@/redux/utils';
 import getClient from './getClient';
-import { parseRateLimit } from "./utils";
+import { parseRateLimit } from './utils';
 
 /**
  * Gets profile by owner's login

src/redux/api/github/getRepositories.js

@@ -1,5 +1,5 @@
-import { parseRateLimit, parsePageInfo } from "@/redux/api/github/utils";
-import { withCancellation } from "@/redux/utils";
+import { parseRateLimit, parsePageInfo } from '@/redux/api/github/utils';
+import { withCancellation } from '@/redux/utils';
 import getClient from './getClient';
 
 /**

src/redux/api/github/searchAccount.js

@@ -1,7 +1,7 @@
-import { withCancellation } from "@/redux/utils";
+import { withCancellation } from '@/redux/utils';
 
 import getClient from './getClient';
-import { parseRateLimit } from "./utils";
+import { parseRateLimit } from './utils';
 
 /**
  * Searches accounts by text

src/redux/api/githubGQL/getBranches/index.js

@@ -1,5 +1,5 @@
-import { addCursorAfter, parsePageInfo } from "@/redux/api/githubGQL/utils";
-import { withCancellation } from "@/redux/utils";
+import { addCursorAfter, parsePageInfo } from '@/redux/api/githubGQL/utils';
+import { withCancellation } from '@/redux/utils';
 import getClient from '../getClient';
 import query from './query.graphql';
 

src/redux/api/githubGQL/getCommits/index.js

@@ -1,6 +1,6 @@
-import { withCancellation } from "@/redux/utils";
+import { withCancellation } from '@/redux/utils';
 import getClient from '../getClient';
-import { addCursorAfter, parsePageInfo } from "../utils";
+import { addCursorAfter, parsePageInfo } from '../utils';
 import query from './query.graphql';
 
 /**

src/redux/api/githubGQL/getEmojis.js

@@ -1,6 +1,6 @@
-import { withCancellation } from "@/redux/utils";
+import { withCancellation } from '@/redux/utils';
 import getClient from './getClient';
-import { parseRateLimit } from "./utils";
+import { parseRateLimit } from './utils';
 
 /**
  * Gets list of emojis

src/redux/api/githubGQL/getProfile/index.js

@@ -1,4 +1,4 @@
-import { withCancellation } from "@/redux/utils";
+import { withCancellation } from '@/redux/utils';
 import getClient from '../getClient';
 import query from './query.graphql';
 

src/redux/api/githubGQL/getRepositories/index.js

@@ -1,6 +1,6 @@
-import { withCancellation } from "@/redux/utils";
+import { withCancellation } from '@/redux/utils';
 import getClient from '../getClient';
-import { addCursorAfter, parsePageInfo } from "../utils";
+import { addCursorAfter, parsePageInfo } from '../utils';
 import query from './query.graphql';
 
 /**

src/redux/api/githubGQL/searchAccount/index.js

@@ -1,5 +1,5 @@
-import { parseRateLimit } from "@/redux/api/githubGQL/utils";
-import { withCancellation } from "@/redux/utils";
+import { parseRateLimit } from '@/redux/api/githubGQL/utils';
+import { withCancellation } from '@/redux/utils';
 import getClient from '../getClient';
 import query from './query.graphql';
 

src/redux/modules/emojis.js

@@ -1,5 +1,5 @@
-import { getEmojis } from "@/redux/api/github/getEmojis";
-import { createSlice, startFetching, stopFetching } from "@/redux/utils";
+import { getEmojis } from '@/redux/api/github/getEmojis';
+import { createSlice, startFetching, stopFetching } from '@/redux/utils';
 import { call, put } from 'redux-saga/effects';
 
 const initialState = {

src/redux/modules/profiles.js

@@ -1,5 +1,5 @@
 import { getProfile, searchAccount } from '@/redux/api/github';
-import { createSlice, startFetching, stopFetching } from "@/redux/utils";
+import { createSlice, startFetching, stopFetching } from '@/redux/utils';
 import { call, cancelled, put } from 'redux-saga/effects';
 
 const initialState = {
@@ -10,7 +10,7 @@ const initialState = {
   error: null,
 };
 
-const setProfile = (state, selected) => {
+const setSelected = (state, selected) => {
   state.selected = selected;
 };
 
@@ -21,11 +21,11 @@ export default createSlice({
     fetchProfile: startFetching,
     fetchProfileSuccess: (state, { payload }) => {
       stopFetching(state);
-      setProfile(state, payload);
+      setSelected(state, payload);
     },
 
-    setProfile: (state, { payload }) => {
-      setProfile(state, payload);
+    setSelected: (state, { payload }) => {
+      setSelected(state, payload);
     },
 
     search: startFetching,
@@ -54,10 +54,11 @@ export default createSlice({
           const { data } = yield call(getProfile, payload);
           yield put(actions.fetchProfileSuccess(data));
         } catch (error) {
-          yield put(actions.fail(error));
           if (yield cancelled()) {
-            yield put(actions.stopFetching());
+            yield put(actions.stopFetching);
+            return;
           }
+          yield put(actions.fail(error));
         }
       },
     },
@@ -68,10 +69,11 @@ export default createSlice({
           const { data } = yield call(searchAccount, payload);
           yield put(actions.searchSuccess(data));
         } catch (error) {
-          yield put(actions.fail(error));
           if (yield cancelled()) {
-            yield put(actions.stopFetching());
+            yield put(actions.stopFetching);
+            return;
           }
+          yield put(actions.fail(error));
         }
       },
     },
@@ -82,16 +84,13 @@ export default createSlice({
           const { data } = yield call(searchAccount, 'followers:>1000');
           yield put(actions.fetchTopSuccess(data));
         } catch (error) {
-          yield put(actions.fail(error));
           if (yield cancelled()) {
-            yield put(actions.stopFetching());
+            yield put(actions.stopFetching);
+            return;
           }
+          yield put(actions.fail(error));
         }
       },
     },
   }),
-
-  selectors: (selector) => ({
-
-  }),
 });

src/redux/modules/progress.js

@@ -1,4 +1,4 @@
-import { createSlice } from "@/redux/utils";
+import { createSlice } from '@/redux/utils';
 
 const initialState = {
   max: 100,

src/redux/modules/repositories.js

@@ -1,6 +1,6 @@
-import { getRepositories } from "@/redux/api/github";
-import { createSlice, startFetching, stopFetching } from "@/redux/utils";
-import { put, call, cancelled, delay } from "redux-saga/effects";
+import { getRepositories } from '@/redux/api/github';
+import { createSlice, startFetching, stopFetching } from '@/redux/utils';
+import { put, call, cancelled, delay } from 'redux-saga/effects';
 import slice from './progress';
 
 const initialState = {
@@ -14,7 +14,7 @@ export default createSlice({
   name: 'repositories',
   initialState,
   reducers: {
-    setRepository: (state, { payload }) => {
+    setSelected: (state, { payload }) => {
       state.selected = payload;
     },
 
@@ -37,10 +37,10 @@ export default createSlice({
 
   sagas: (actions) => ({
     [actions.fetchRepositories]: {
-      * saga({ payload: { login, amount } }) {
+      * saga({ payload: { owner, amount } }) {
         try {
-          if (!amount) {
-            yield put(actions.stopFetching({ message: null }));
+          if (!amount || !owner) {
+            yield put(actions.stopFetching());
             return;
           }
 
@@ -56,7 +56,7 @@ export default createSlice({
 
           while (next) {
             const { data, pageInfo } = yield call(getRepositories, {
-              owner: login,
+              owner,
               perPage: 100,
               page: page,
             });
@@ -73,10 +73,11 @@ export default createSlice({
 
           yield put(actions.stopFetching());
         } catch (error) {
-          yield put(actions.fail(error));
           if (yield cancelled()) {
             yield put(actions.stopFetching);
+            return;
           }
+          yield put(actions.fail(error));
         } finally {
           yield delay(500);
           yield put(slice.actions.toggle(false));