Simplify Share functionality and add small css changes

.env

@@ -0,0 +1 @@
+GENERATE_SOURCEMAP=false

src/WholeApp.js

@@ -264,7 +264,7 @@ class WholeApp extends Component {
   //   //this.setState({ [selectedElement]: selectedValue });
   // }
 
-  saveSessionToDB = () => {
+  saveSessionToDB = async () => {
     // console.log("saveSessionToDB");
     const {
       octave,
@@ -283,7 +283,7 @@ class WholeApp extends Component {
       videoActive,
       activeVideoTab,
     } = this.state;
-    db.collection("sessions")
+    return await db.collection("sessions")
       .add({
         octave: octave,
         scale: scale,
@@ -301,10 +301,7 @@ class WholeApp extends Component {
         videoActive: videoActive,
         activeVideoTab: activeVideoTab,
       })
-      .then((docRef) => {
-        // console.log("Session written with ID: ", docRef.id);
-        this.setState({ sessionID: docRef.id });
-      })
+      .then((docRef) => docRef.id)
       .catch((error) => {
         console.error("Error adding document: ", error);
         this.setState({ sessionError: error });

src/components/menu/Share.js

@@ -1,42 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import ShareLink from "./ShareLink";
 import Overlay from "./../OverlayPlugins/Overlay";
 import { Tabs, Tab } from "react-bootstrap";
 
 const Share = (props) => {
-  // const [activeTab, setActiveTab] = useState("playlist");
-  // const activeTab = "share";
-  const [sessionId, setSessionId] = useState(props.sessionID);
-
-  useEffect(() => {
-    if (sessionId !== props.sessionID) {
-      setSessionId(props.sessionID);
-    }
-  }, [props.sessionID, sessionId]);
-
-  // handleSelectTab = (key) => {
-  //   // A bit dummy but need to control tabs after submit (cf handleSumbit())
-  //   if (key === "share") this.setState({ activeTab: "share" });
-  // };
-
-  // console.log("Share");
-  // console.log(sessionId);
-  // const { url, playing } = this.state;
   return (
     <React.Fragment>
       <Overlay key={props.sessionID} close={props.onClickCloseHandler}>
         <div className="tabs-wrapper">
-          {/* <Tabs defaultActiveKey="share" activeTab={activeTab} id="controlled-tab-example"> */}
-          <Tabs defaultActiveKey={props.sessionID ? "share" : "links"} id="controlled-tab-example">
+          <Tabs id="controlled-tab-example">
             <Tab eventKey="share" title="Share">
               <div>
-                <ShareLink sessionID={props.sessionID} saveSessionToDB={undefined} />
-              </div>
-            </Tab>
-
-            <Tab eventKey="links" title="create links">
-              <div>
-                <ShareLink sessionID={undefined} saveSessionToDB={props.saveSessionToDB} />
+                <ShareLink saveSessionToDB={props.saveSessionToDB} />
               </div>
             </Tab>
           </Tabs>

src/components/menu/ShareLink.js

@@ -1,51 +1,46 @@
 import React, { useState } from "react";
 
 const ShareLink = (props) => {
-  const [hasCopied, setHasCopied] = useState(false);
+  const [url, setUrl] = useState("");
+  const [fullUrl, setFullUrl] = useState("");
 
-  if (props.sessionID) {
-    const url = "/shared/" + props.sessionID;
-    const fullUrl = window.location.host + url;
+  const copyToClipBoard = (text) => {
+    navigator.clipboard.writeText(text);
+  };
 
-    const copyToClipBoard = () => {
-      navigator.clipboard.writeText(fullUrl);
-    };
-
-    return (
-      <div className="share-link">
-        <h2>Share</h2>
-        <p>Share your stored setup:</p>
-        <a href={url} title="" target="_blank" rel="noopener noreferrer">
-          {fullUrl}
-        </a>
-        <button
-          onClick={() => {
-            copyToClipBoard();
-            setHasCopied(!hasCopied);
-          }}>
-          copy
-        </button>
-        <span className={`message ${hasCopied ? "show" : ""}`}>The link has been copied</span>
-      </div>
-    );
-  } else if (props.saveSessionToDB) {
-    return (
-      <div className="share-link">
-        <h2>Share</h2>
-        <p>Share your current setup:</p>
-        <button onClick={props.saveSessionToDB}>create share link</button>
-        <span className={`message ${hasCopied ? "show" : ""}`}>The link has been copied</span>
-        <span>will store online and create a new link for sharing</span>
-      </div>
-    );
-  } else {
-    return (
-      <div className="share-link">
-        <h2>Share</h2>
-        <p>Create a Share link on the create links tab</p>
-      </div>
-    );
-  }
+  return (
+    <div className="share-link">
+      <h2>Share</h2>
+      <p>Share your current setup:</p>
+      <a
+        href={url}
+        className={`message ${url !== "" ? "show" : ""}`}
+        title=""
+        target="_blank"
+        rel="noopener noreferrer">
+        {fullUrl}
+      </a>
+      <br></br>
+      <button
+        onClick={async () => {
+          if (url === "") {
+            let dbId = await props.saveSessionToDB();
+            let url = "/shared/" + dbId;
+            setUrl(url);
+            setFullUrl(window.location.host + url);
+          }
+          copyToClipBoard(fullUrl);
+        }}>
+        {url ? "Copy to clipboard" : "Create Share Link"}
+      </button>
+      <br></br>
+      <span>
+        {url
+          ? "The link is copied to your clipboard and can be sent to others to open the same setup"
+          : "Store your current setup and share it with a link."}
+      </span>
+    </div>
+  );
 };
 
 export default ShareLink;

src/components/menu/TopMenu.js

@@ -26,7 +26,7 @@ import NotationImg from "../../assets/img/Notation";
 
 import clefs from "../../data/clefs";
 import tooltipText from "../../data/tooltipText";
-import SoundFontLibraryNames from "data/SoundFontLibraryNames";
+//import SoundFontLibraryNames from "data/SoundFontLibraryNames";
 // import CustomScaleSelector from "./CustomScaleSelector";
 
 class TopMenu extends Component {

src/styles/02_components/Overlay.scss

@@ -14,7 +14,7 @@
   // display: flex;
   overflow: hidden;
   // flex: 1 1;
-  background-color: rgb(0, 0, 0);
+  background-color: rgb(31, 28, 28);
   position: absolute;
   transform: scale(96%, 96%);
   padding: 5px;

src/styles/03_layout/svg/notation.scss

@@ -1,6 +1,6 @@
 .notationSVG {
   // background-color: yellow;
-  max-height: 3vh;
+  max-height: 4.5vh;
   min-height: 2vh;
   min-width: 90%;
   width: 5vw;