From 250ee5593da398f57a2e15fbdaf2b3c8de668eb0 Mon Sep 17 00:00:00 2001
From: Artem Zubkov <artzub@gmail.com>
Date: Mon, 28 Dec 2020 16:44:40 +0700
Subject: [PATCH] #71 Added progress bar and sagas for controlling.

---
 src/components/Layout.jsx         |  2 ++
 src/components/Progress/index.jsx | 34 ++++++++++++++++++++++++++
 src/redux/modules/index.js        |  2 ++
 src/redux/modules/progress.js     | 40 +++++++++++++++++++++++++++++++
 4 files changed, 78 insertions(+)
 create mode 100644 src/components/Progress/index.jsx
 create mode 100644 src/redux/modules/progress.js

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 04c962e..0144873 100644
--- a/src/components/Layout.jsx
+++ b/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>
diff --git a/src/components/Progress/index.jsx b/src/components/Progress/index.jsx
new file mode 100644
index 0000000..e6c8e6b
--- /dev/null
+++ b/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;
diff --git a/src/redux/modules/index.js b/src/redux/modules/index.js
index 50c5d22..713655b 100644
--- a/src/redux/modules/index.js
+++ b/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]
diff --git a/src/redux/modules/progress.js b/src/redux/modules/progress.js
new file mode 100644
index 0000000..bde9c80
--- /dev/null
+++ b/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,
+      };
+    },
+  },
+});