Merge pull request #223 from Hunter275/issue-180-qr-code-add-channels

QR Code: Add/Replace query string

src/components/Dialog/QRDialog.tsx

@@ -30,6 +30,7 @@ export const QRDialog = ({
 }: QRDialogProps): JSX.Element => {
   const [selectedChannels, setSelectedChannels] = useState<number[]>([0]);
   const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
+  const [qrCodeAdd, setQrCodeAdd] = useState<boolean>();
 
   const allChannels = Array.from(channels.values());
 
@@ -49,8 +50,8 @@ export const QRDialog = ({
       .replace(/\+/g, "-")
       .replace(/\//g, "_");
 
-    setQrCodeUrl(`https://meshtastic.org/e/#${base64}`);
-  }, [channels, selectedChannels, loraConfig]);
+    setQrCodeUrl(`https://meshtastic.org/e/#${base64}${qrCodeAdd ? "?add=true" : ""}`);
+  }, [channels, selectedChannels, qrCodeAdd, loraConfig]);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -94,6 +95,22 @@ export const QRDialog = ({
             </div>
             <QRCode value={qrCodeUrl} size={200} qrStyle="dots" />
           </div>
+          <div className="flex justify-center">
+            <button
+              type="button" 
+              className={ "border-black border-t border-l border-b rounded-l h-10 px-7 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 " + (qrCodeAdd ? "focus:ring-green-800 bg-green-800 text-white" : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600") }
+              onClick={() => setQrCodeAdd(true)}
+              >
+                Add Channels
+            </button>
+            <button
+              type="button" 
+              className={ "border-black border-t border-r border-b rounded-r h-10 px-4 py-2 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 " + (!qrCodeAdd ? "focus:ring-green-800 bg-green-800 text-white" : "focus:ring-slate-400 bg-slate-400 hover:bg-green-600") }
+              onClick={() => setQrCodeAdd(false)}
+              >
+                Replace Channels
+            </button>
+          </div>
         </div>
         <DialogFooter>
           <Label>Sharable URL</Label>