Create more compressed QR codes

package.json

@@ -4,17 +4,19 @@
   "private": true,
   "dependencies": {
     "@js-temporal/polyfill": "^0.4.0",
+    "@scure/base": "^1.1.7",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "dompurify": "^2.3.4",
     "easy-peasy": "^5.0.4",
+    "pako": "^2.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-infinite-scroll-component": "^6.1.0",
     "react-markdown": "^7.1.2",
-    "react-qr-code": "^2.0.7",
+    "react-qrcode-pretty": "^1.3.2",
     "react-router-dom": "^6.2.1",
     "react-scripts": "^5.0.1",
     "react-select": "^5.2.2",

src/components/AppRoutes.js

@@ -15,6 +15,7 @@ import UnfilterableProgram from "./UnfilterableProgram";
 import MySchedule from "./MySchedule";
 import ItemById from "./ItemById";
 import ItemByIdList from "./ItemByIdList";
+import GzItemByIdList from "./GzItemByIdList";
 import People from "./People";
 import Person from "./Person";
 import Info from "./Info";
@@ -37,6 +38,7 @@ const AppRoutes = () => {
             <Route path="/index.html" element={<FilterableProgram />} />
             <Route path="id/:id" element={<ItemById />} />
             <Route path="ids/:idList" element={<ItemByIdList />} />
+            <Route path="GZIDS/:idList" element={<GzItemByIdList />} />
             <Route path="people">
               <Route index element={<People />} />
               <Route path=":id" element={<Person />} />

src/components/GzItemByIdList.js

@@ -0,0 +1,48 @@
+import { useStoreState, useStoreActions } from "easy-peasy";
+import { useParams } from "react-router-dom";
+import { base32 } from "@scure/base";
+import { inflate } from "pako";
+import configData from "../config.json";
+import ProgramList from "./ProgramList";
+
+const ItemByIdList = () => {
+  const { addSelection } = useStoreActions((actions) => ({
+    addSelection: actions.addSelection,
+  })); 
+
+  const params = useParams();
+  const gzids = base32.decode(params.idList.replaceAll("-","="));
+  const rawList = inflate(gzids, {to: 'string'});
+  console.log(rawList);
+  const itemIds = rawList.split("~");
+  const program = useStoreState((state) => state.program);
+  if (program.length === 0) return <></>;
+
+  // Filter to select only the specified ID.
+  const filteredProgram = program.filter((item) =>
+    itemIds.includes(item.id.toString())
+  );
+  return (
+    <div>
+      <div className="page-heading">
+        <h2>{configData.PROGRAM.SHARED.TITLE}</h2>
+      </div>
+      <div className="page-body">{configData.PROGRAM.SHARED.DESCRIPTION}</div>
+      <ProgramList program={filteredProgram} />
+      <div className="buttons">
+        <button
+          className="button-add-all"
+          onClick={() => {
+            itemIds.forEach((id) => {
+              addSelection(id);
+            });
+          }}
+        >
+          {configData.PROGRAM.SHARED.BUTTON_LABEL}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ItemByIdList;

src/components/ShareLink.js

@@ -1,6 +1,8 @@
 import { useStoreState } from "easy-peasy";
 import { Link } from "react-router-dom";
-import QRCode from "react-qr-code";
+import { deflate } from "pako";
+import { base32 } from '@scure/base';
+import { QrCode } from "react-qrcode-pretty";
 import configData from "../config.json";
 
 const ShareLink = () => {
@@ -9,9 +11,26 @@ const ShareLink = () => {
   if (mySchedule.length === 0) return <></>;
   const links = [];
   let key = 0;
+
+  function makeLink(linkItems, compress) {
+    if (!compress) {
+        return  "ids/" + linkItems;
+    } else {
+        // const deflator= new Deflate();
+        // deflator.push(linkItems,true)
+        const param=base32.encode(deflate(linkItems)).replaceAll("=","-");
+        return configData.BASE_PATH.toUpperCase() + "GZIDS/" + param;
+    }
+  }
+
   function addLink(linkItems, multi) {
-    const link = configData.BASE_PATH + "ids/" + linkItems;
-    const absLink = `${window.location.origin}${link}`;
+    const compress = configData.PROGRAM.MY_SCHEDULE.SHARE.COMPRESS;
+    const link = makeLink(linkItems,compress);
+    const hostOrigin = compress ? String(window.location.origin).toUpperCase() :
+                                  window.location.origin;
+
+    const absLink = `${hostOrigin}${link}`;
+    const qrmode = compress ? "Alphanumeric" :"Byte";
     links.push(
       <div key={key++} className="share-body">
         <div className="share-link">
@@ -25,7 +44,11 @@ const ShareLink = () => {
           </Link>
         </div>
         <div className="share-qr-code">
-          <QRCode value={absLink} />
+          <QrCode
+                value={absLink}
+                resize="265px"
+                mode={qrmode}
+           />
         </div>
       </div>
     );

src/config_example.json

@@ -64,6 +64,7 @@
         "DESCRIPTION": "Copy and paste this link to share your selections with other devices. Or point your camera at the QR code below.",
         "LINK_LABEL": "Shareable link",
         "MAX_LENGTH": 2500,
+        "COMPRESS": false,
         "MULTIPLE_DESCRIPTION": "Because you have selected a large number of items, you will need to use multiple links/QR codes to transfer to your other devices.",
         "MULTIPLE_LINK_LABEL": "Shareable link #@number"
       }