Preparing state sharing

src/app/App.tsx

@@ -7,12 +7,13 @@ 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 { useMemo } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useStore } from 'react-redux';
 import { RootState } from './rootReducer';
 
 const copyToClipboard = (text: string) => navigator.clipboard.writeText(text)
@@ -21,7 +22,11 @@ const copyToClipboard = (text: string) => navigator.clipboard.writeText(text)
     (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,
@@ -47,6 +52,9 @@ const App: React.FC = () => {
           <div style={{ overflowWrap: "break-word" }}>{fullPath}</div>
         </Grid>
         <Grid item xs={12} style={{ textAlign: "center" }}>
+          <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>

src/index.tsx

@@ -7,6 +7,11 @@ import store from './app/store';
 
 import { Provider } from 'react-redux';
 
+var searchParams = new URLSearchParams(window.location.search);
+if (searchParams.has("state")) {
+  console.log("State received:", searchParams.get("state"));
+}
+
 ReactDOM.render(
   <Provider store={store}>
     <App />