added invite clipboard, fixed caching issue

firebase.json

@@ -14,7 +14,7 @@
         "headers": [
           {
             "key": "Cache-Control",
-            "value": "public, max-age=31536000"
+            "value": "no-cache, no-store, must-revalidate"
           }
         ]
       }

package-lock.json

@@ -4381,6 +4381,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js": {
       "version": "3.6.5",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
@@ -14032,6 +14040,11 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "@types/react-dom": "^16.9.4",
     "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
+    "copy-to-clipboard": "^3.3.1",
     "firebase": "^7.17.1",
     "firebase-functions": "^3.11.0",
     "ionicons": "^5.0.0",

public/index.html

@@ -22,7 +22,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Turtle" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-    <link rel="apple-touch-icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />
+    <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="%PUBLIC_URL%/assets/icon/apple-icon.png" />
     <link rel="mask-icon" href="%PUBLIC_URL%/assets/icon/favicon.png" />
   </head>
 

src/components/OnlineList.css

@@ -3,26 +3,47 @@
 }
 
 .online-header {
+  border-bottom: 1px solid var(--ion-color-primary);
   color: var(--ion-color-primary);
   font-size: 20px;
+  align-items: center;
 }
 
 .online-list {
   padding-top: 0;
-  padding-bottom: 4px;
+  padding-bottom: 0;
 }
 
 .online-item {
   --padding-start: 12px;
-  --min-height: 0;
+  --min-height: 30px;
   color: var(--ion-color-secondary);
 }
 
 .online-label {
-  margin-top: 8px;
+  margin-top: 0;
   margin-bottom: 0;
 }
 
-ion-backdrop {
-  cursor: default;
+.clipboard-col {
+  position: absolute;
+  bottom: 0;
+  padding: 0;
+}
+
+.clipboard-toolbar {
+  max-width: 428px;
+  margin-left: 12px;
+  padding-right: 16px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  --padding-start: 0;
+}
+
+.clipboard-input {
+  border-radius: 5px;
+  border: 1px solid var(--ion-color-secondary);
+  max-width: 360px;
+  text-align: left;
 }

src/components/OnlineList.tsx

@@ -1,6 +1,21 @@
-import { IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
-import React from 'react';
+import {
+  IonContent,
+  IonFabButton,
+  IonInput,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonToolbar,
+  IonIcon,
+  IonRow,
+  IonCol,
+  IonToast,
+} from '@ionic/react';
+import React, { useState, useRef } from 'react';
 import './OnlineList.css';
+import { clipboardOutline } from 'ionicons/icons';
+import copy from 'copy-to-clipboard';
 
 type OnlineListProps = {
   pane: string;
@@ -8,6 +23,14 @@ type OnlineListProps = {
 };
 
 const OnlineList: React.FC<OnlineListProps> = ({ pane, userList }) => {
+  const inputRef = useRef<HTMLIonInputElement>(null);
+  const [showToast, setShowToast] = useState(false);
+
+  const copyLink = () => {
+    copy(window.location.href);
+    setShowToast(true);
+  };
+
   return (
     <IonContent style={{ display: pane === 'online' ? null : 'none' }} class="online-content">
       <IonListHeader class="online-header">Online</IonListHeader>
@@ -20,6 +43,24 @@ const OnlineList: React.FC<OnlineListProps> = ({ pane, userList }) => {
           );
         })}
       </IonList>
+      <IonRow>
+        <IonCol class="clipboard-col">
+          <IonListHeader class="online-header">Invite friends!</IonListHeader>
+          <IonToolbar class="clipboard-toolbar">
+            <IonInput readonly value={window.location.href} ref={inputRef} class="clipboard-input"></IonInput>
+            <IonFabButton slot="end" size="small" onClick={copyLink} class="send-button">
+              <IonIcon icon={clipboardOutline}></IonIcon>
+            </IonFabButton>
+          </IonToolbar>
+        </IonCol>
+      </IonRow>
+      <IonToast
+        isOpen={showToast}
+        onDidDismiss={() => setShowToast(false)}
+        message="Room link copied"
+        color="primary"
+        duration={2000}
+      ></IonToast>
     </IonContent>
   );
 };