Moving action buttons to a separate component

src/app/App.tsx

@@ -4,29 +4,16 @@ import React from 'react';
 import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
 import InputLabel from '@material-ui/core/InputLabel';
-import IconButton from '@material-ui/core/IconButton';
-import OpenInNewIcon from '@material-ui/icons/OpenInNew';
-import AssignmentIcon from '@material-ui/icons/Assignment';
-import ShareIcon from '@material-ui/icons/Share';
 import BasePath from '../features/BasePath/BasePath';
 import PluginPath from '../features/PluginPath/PluginPath';
 import ConfigOverride from '../features/ConfigOverride/ConfigOverride';
+import ActionBar from '../components/ActionBar';
 
 import { useMemo } from 'react';
-import { useSelector, useStore } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { RootState } from './rootReducer';
 
-const copyToClipboard = (text: string) => navigator.clipboard.writeText(text)
-  .then(
-    () => console.log('Async: Copying to clipboard was successful!'),
-    (err) => console.error('Async: Could not copy text: ', err)
-  );
-
-const shareApp = (state: RootState) => copyToClipboard(`${window.location.href}?state=${encodeURIComponent(JSON.stringify(state))}`);
-
 const App: React.FC = () => {
-  const store = useStore();
-
   const { basePath, pluginPath, configOverride } = useSelector((state: RootState) => ({
     basePath: state.basePath.value,
     pluginPath: state.pluginPath.value,
@@ -36,34 +23,26 @@ const App: React.FC = () => {
   const fullPath = useMemo(() => `${basePath}configoverride=${encodeURIComponent(configOverride)}`, [basePath, configOverride]);
 
   return (
-    <Container className="App">
-      <Grid container spacing={3} direction="column">
-        <Grid item xs={12}>
-          <BasePath />
-        </Grid>
-        <Grid item xs={12}>
-          <PluginPath />
-        </Grid>
-        <Grid item xs={12}>
-          <ConfigOverride pluginPath={pluginPath} />
-        </Grid>
-        <Grid item xs={12}>
-          <InputLabel id="link-label">Link</InputLabel>
-          <div style={{ overflowWrap: "break-word" }}>{fullPath}</div>
-        </Grid>
-        <Grid item xs={12} style={{ textAlign: "center", width: "100%", position: "fixed", bottom: "0", background: "white" }}>
-          <IconButton title="Share application" color="secondary" onClick={_ => shareApp(store.getState())}>
-            <ShareIcon fontSize="small" />
-          </IconButton>
-          <IconButton title="Copy link to clipboard" color="secondary" onClick={_ => copyToClipboard(fullPath)}>
-            <AssignmentIcon fontSize="small" />
-          </IconButton>
-          <IconButton title="Open link in new window" color="primary" onClick={_ => window.open(fullPath)}>
-            <OpenInNewIcon fontSize="large" />
-          </IconButton>
+    <>
+      <Container className="App">
+        <Grid container spacing={3} direction="column">
+          <Grid item xs={12}>
+            <BasePath />
+          </Grid>
+          <Grid item xs={12}>
+            <PluginPath />
+          </Grid>
+          <Grid item xs={12}>
+            <ConfigOverride pluginPath={pluginPath} />
+          </Grid>
+          <Grid item xs={12}>
+            <InputLabel id="link-label">Link</InputLabel>
+            <div style={{ overflowWrap: "break-word" }}>{fullPath}</div>
+          </Grid>
         </Grid>
-      </Grid>
-    </Container>
+      </Container>
+      <ActionBar fullPath={fullPath} />
+    </>
   );
 }
 

src/components/ActionBar.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Box from "@material-ui/core/Box";
+import IconButton from "@material-ui/core/IconButton";
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import AssignmentIcon from '@material-ui/icons/Assignment';
+import ShareIcon from '@material-ui/icons/Share';
+
+import { useStore } from "react-redux";
+import { RootState } from "../app/rootReducer";
+
+const copyToClipboard = (text: string) => navigator.clipboard.writeText(text)
+  .then(
+    () => console.log('Async: Copying to clipboard was successful!'),
+    (err) => console.error('Async: Could not copy text: ', err)
+  );
+
+const shareApp = (state: RootState) => copyToClipboard(`${window.location.href}?state=${encodeURIComponent(JSON.stringify(state))}`);
+
+export interface Props {
+  fullPath: string;
+}
+
+const ActionBar: React.FC<Props> = ({ fullPath }) => {
+  const store = useStore();
+
+  return (
+    < Box style={{ textAlign: "center", width: "100%", position: "fixed", bottom: "0", background: "white" }}>
+      <IconButton title="Share application" color="secondary" onClick={_ => shareApp(store.getState())}>
+        <ShareIcon fontSize="small" />
+      </IconButton>
+      <IconButton title="Copy link to clipboard" color="secondary" onClick={_ => copyToClipboard(fullPath)}>
+        <AssignmentIcon fontSize="small" />
+      </IconButton>
+      <IconButton title="Open link in new window" color="primary" onClick={_ => window.open(fullPath)}>
+        <OpenInNewIcon fontSize="large" />
+      </IconButton>
+    </Box >
+  );
+};
+
+export default ActionBar;