#71 Added progress bar and sagas for controlling.

src/components/Layout.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import Header from '@/components/Header';
 import Main from '@/components/Main';
+import Progress from "@/components/Progress";
 
 const Layout = () => (
   <React.Fragment>
+    <Progress />
     <Header />
     <Main />
   </React.Fragment>

src/components/Progress/index.jsx

@@ -0,0 +1,34 @@
+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";
+
+const Container = styled.div`
+  position: absolute;
+  bottom: 2px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+`;
+
+const LinearProgress = styled(LinearProgressOrigin)`
+  height: 2px;
+`;
+
+const normalize = ({ value, min, max }) => (value - min) * 100 / (max - min);
+
+const Progress = () => {
+  const state = useSelector(slice.selectors.getState);
+
+  const value = normalize(state);
+  const valueBuffer = normalize({ ...state, value: state.valueBuffer });
+
+  return !state.show ? null : (
+    <Container>
+      <LinearProgress variant="buffer" value={value} valueBuffer={valueBuffer} />
+    </Container>
+  );
+};
+
+export default Progress;

src/redux/modules/index.js

@@ -1,5 +1,6 @@
 import { all } from 'redux-saga/effects';
 import profiles from "./profiles";
+import progress from "./progress";
 import ui from './ui';
 
 // Put modules that have their reducers nested in other (root) reducers here
@@ -9,6 +10,7 @@ const nestedSlices = [];
 const rootSlices = [
   profiles,
   ui,
+  progress,
 ];
 
 const sagas = [...rootSlices, ...nestedSlices]

src/redux/modules/progress.js

@@ -0,0 +1,40 @@
+import { createSlice } from "@/redux/utils";
+
+const initialState = {
+  max: 100,
+  min: 0,
+  value: 0,
+  valueBuffer: 0,
+  show: false,
+};
+
+export default createSlice({
+  name: 'progress',
+  initialState,
+  reducers: {
+    change: (state, { payload }) => {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+
+    incValue: (state, { payload }) => {
+      state.value = Math.min(state.value + payload, state.max);
+    },
+
+    incValueBuffer: (state, { payload }) => {
+      state.valueBuffer = Math.min(state.valueBuffer + payload, state.max);
+    },
+
+    toggle: (state, { payload }) => {
+      state.show = payload ?? !state.show;
+    },
+
+    clear() {
+      return {
+        ...initialState,
+      };
+    },
+  },
+});