commit a742078f805a546ddb115937db6bd51dbddf18b7
parent 8939f6c87c4156cb86c6058294cb1b6123ce37b8
Author: mcol <mcol@posteo.net>
Date:   Sat, 27 Jun 2020 13:45:01 +0100

move button logic into single Button component

Diffstat:
A
src/components/button/index.css
 | 
3
+++
A
src/components/button/index.js
 | 
20
++++++++++++++++++++
M
src/features/reset/panel.js
 | 
11
++++-------
M
src/features/windows/panel.js
 | 
14
++++----------

4 files changed, 31 insertions(+), 17 deletions(-)
diff --git a/src/components/button/index.css b/src/components/button/index.css
@@ -0,0 +1,3 @@
+button {
+    width: 60px;
+}
diff --git a/src/components/button/index.js b/src/components/button/index.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useDispatch } from 'react-redux';
+
+import { fixColour } from 'features/helpers';
+import './index.css';
+
+
+export default function Button(props) {
+  const dispatch = useDispatch();
+
+	return (
+		<>
+			<button
+				onClick={() => dispatch(props.callback())}
+			>
+			{props.text}
+			</button>
+		</>
+	);
+}
diff --git a/src/features/reset/panel.js b/src/features/reset/panel.js
@@ -1,19 +1,16 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
 
 import reset from './slice.js';
+import Button from 'components/button';
 import OptBox from 'components/optbox';
 
 
 export function ResetCtl() {
-  const dispatch = useDispatch();
 
   return (
-		<OptBox className="ResetCtl" label="Reset state">
-			<div>
-				<button onClick={() => dispatch(reset())}>
-					Reset
-				</button>
+		<OptBox className="ResetCtl" label="State" width="100px">
+			<div >
+				<Button callback={reset} text={"Reset"} />
 			</div>
 		</OptBox>
 	)
diff --git a/src/features/windows/panel.js b/src/features/windows/panel.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { useDispatch } from 'react-redux';
 
 import { addWindow, delWindow } from './slice';
+import Button from 'components/button';
 import OptBox from 'components/optbox';
 
 
@@ -9,17 +10,10 @@ export function WindowCtl() {
   const dispatch = useDispatch();
 
 	return (
-		<OptBox className="WindowCtl" label="Todos">
+		<OptBox className="WindowCtl" label="Number" width="100px">
 			<div>
-				<ul>
-					<li>Transparency + blur</li>
-				</ul>
-			</div>
-
-			<div>
-				Number
-				<button onClick={() => dispatch(addWindow())}> + </button>
-				<button onClick={() => dispatch(delWindow())}> - </button>
+				<Button text={"+"} callback={addWindow} />
+				<Button text={"-"} callback={delWindow} />
 			</div>
 		</OptBox>
 	);