Merge branch 'hackathon' into Som

README.md

@@ -2,17 +2,29 @@
 
 ## Built Using
 
-- React 18
-- TypeScript
-- Vite 5
-- ESLint
-- Prettier
-- Semantic-Release
-- Custom Messaging & Storage Wrappers
+-   React 18
+-   TypeScript
+-   Vite 5
+-   ESLint
+-   Prettier
+-   Semantic-Release
+-   Custom Messaging & Storage Wrappers
 
 ## Getting Started
 
 1. Clone this repo
 2. Run `pnpm install` to install and patch all the required dependencies
-3. Run `pnpm run dev` to start the development server
-4. Run `pnpm build` to build the extension for production
+
+-   If you want to run the development build:
+
+    -   Run `pnpm run dev`
+
+-   If you want to build the extension for production:
+
+    -   Run `pnpm build`
+
+You may have to rename the `__uno.css.js` to `uno.css.js` in dist
+
+Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked'
+
+Navigate to the 'dist' folder and click 'select' to import the extension

package.json

@@ -24,7 +24,7 @@
         "clsx": "^2.1.0",
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.2.1",
-        "html2canvas": "^1.4.1",
+        "html-to-image": "^1.11.11",
         "react": "^18.2.0",
         "react-devtools-core": "^5.0.0",
         "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -34,9 +34,9 @@ dependencies:
   highcharts-react-official:
     specifier: ^3.2.1
     version: 3.2.1(highcharts@11.3.0)(react@18.2.0)
-  html2canvas:
-    specifier: ^1.4.1
-    version: 1.4.1
+  html-to-image:
+    specifier: ^1.11.11
+    version: 1.11.11
   react:
     specifier: ^18.2.0
     version: 18.2.0
@@ -5856,11 +5856,6 @@ packages:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
-  /base64-arraybuffer@1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
-    dev: false
-
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
     dev: true
@@ -6553,12 +6548,6 @@ packages:
       postcss: 8.4.35
     dev: true
 
-  /css-line-break@2.1.0:
-    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
-    dependencies:
-      utrie: 1.0.2
-    dev: false
-
   /css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
     dependencies:
@@ -8663,12 +8652,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /html2canvas@1.4.1:
-    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
-    engines: {node: '>=8.0.0'}
-    dependencies:
-      css-line-break: 2.1.0
-      text-segmentation: 1.0.3
+  /html-to-image@1.11.11:
+    resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
     dev: false
 
   /htmlparser2@8.0.2:
@@ -12430,12 +12415,6 @@ packages:
       minimatch: 3.1.2
     dev: true
 
-  /text-segmentation@1.0.3:
-    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
-    dependencies:
-      utrie: 1.0.2
-    dev: false
-
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
@@ -12978,12 +12957,6 @@ packages:
     engines: {node: '>= 0.4.0'}
     dev: true
 
-  /utrie@1.0.2:
-    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
-    dependencies:
-      base64-arraybuffer: 1.0.2
-    dev: false
-
   /uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
     hasBin: true

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -45,15 +45,36 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
     const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
 
     const saveAsPNG = () => {
-        if (calendarRef.current) {
-            html2canvas(calendarRef.current).then(canvas => {
-                // Create an a element to trigger download
-                const a = document.createElement('a');
-                a.href = canvas.toDataURL('image/png');
-                a.download = 'calendar.png';
-                a.click();
+        htmlToImage
+            .toPng(calendarRef.current, {
+                backgroundColor: 'white',
+                style: {
+                    background: 'white',
+                    marginTop: '20px',
+                    marginBottom: '20px',
+                    marginRight: '20px',
+                    marginLeft: '20px',
+                },
+            })
+            .then(dataUrl => {
+                let img = new Image();
+                img.src = dataUrl;
+                fetch(dataUrl)
+                    .then(response => response.blob())
+                    .then(blob => {
+                        const href = window.URL.createObjectURL(blob);
+                        const link = document.createElement('a');
+                        link.href = href;
+                        link.download = 'my-schedule.png';
+                        document.body.appendChild(link);
+                        link.click();
+                        document.body.removeChild(link);
+                    })
+                    .catch(error => console.error('Error downloading file:', error));
+            })
+            .catch(error => {
+                console.error('oops, something went wrong!', error);
             });
-        }
     };
 
     useEffect(() => {
@@ -87,8 +108,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
             }
             newGrid.push(row);
         }
-        setGrid(newGrid);
-    }, []);
+    };
 
     return (
         <div className={styles.calendar}>