diff --git a/package-lock.json b/package-lock.json index b118907..f8086f9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,7 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-spinners": "^0.13.6", + "socket.io-client": "^4.7.2", "typescript": "^4.7.4", "web-vitals": "^2.1.4" }, @@ -3774,6 +3775,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "node_modules/@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "node_modules/@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -7601,6 +7607,46 @@ "node": ">= 0.8" } }, + "node_modules/engine.io-client": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.2.tgz", + "integrity": "sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0", + "xmlhttprequest-ssl": "~2.0.0" + } + }, + "node_modules/engine.io-client/node_modules/ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/engine.io-parser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz", + "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==", + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/enhanced-resolve": { "version": "5.10.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz", @@ -16285,6 +16331,32 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/socket.io-client": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz", + "integrity": "sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.5.2", + "socket.io-parser": "~4.2.4" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "dependencies": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + }, + "engines": { + "node": ">=10.0.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18897,6 +18969,14 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "node_modules/xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -21616,6 +21696,11 @@ "@sinonjs/commons": "^1.7.0" } }, + "@socket.io/component-emitter": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz", + "integrity": "sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg==" + }, "@surma/rollup-plugin-off-main-thread": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz", @@ -24408,6 +24493,31 @@ "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==" }, + "engine.io-client": { + "version": "6.5.2", + "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.5.2.tgz", + "integrity": "sha512-CQZqbrpEYnrpGqC07a9dJDz4gePZUgTPMU3NKJPSeQOyw27Tst4Pl3FemKoFGAlHzgZmKjoRmiJvbWfhCXUlIg==", + "requires": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1", + "engine.io-parser": "~5.2.1", + "ws": "~8.11.0", + "xmlhttprequest-ssl": "~2.0.0" + }, + "dependencies": { + "ws": { + "version": "8.11.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz", + "integrity": "sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==", + "requires": {} + } + } + }, + "engine.io-parser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.1.tgz", + "integrity": "sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ==" + }, "enhanced-resolve": { "version": "5.10.0", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz", @@ -30560,6 +30670,26 @@ } } }, + "socket.io-client": { + "version": "4.7.2", + "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.7.2.tgz", + "integrity": "sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w==", + "requires": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.2", + "engine.io-client": "~6.5.2", + "socket.io-parser": "~4.2.4" + } + }, + "socket.io-parser": { + "version": "4.2.4", + "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz", + "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==", + "requires": { + "@socket.io/component-emitter": "~3.1.0", + "debug": "~4.3.1" + } + }, "sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -32467,6 +32597,11 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "xmlhttprequest-ssl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz", + "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==" + }, "xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/package.json b/package.json index 85d05d5..dbd294d 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "react-router-dom": "^6.3.0", "react-scripts": "5.0.1", "react-spinners": "^0.13.6", + "socket.io-client": "^4.7.2", "typescript": "^4.7.4", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index 39a9127..8fef861 100644 --- a/src/App.css +++ b/src/App.css @@ -11,9 +11,11 @@ :root { --pull-width: 0px; --nav-width: 0px; - --blueish: #e8f0fe; - --blue: #07f; - --bluer: #1553aa; + + --primary: #cb2036; + --primary-light: #fee8e8; + --primary-dark: #8d1625; + --white: #fff; --whiteish: #f6f7f9; --blackish: #252525; @@ -36,7 +38,7 @@ html { } body { - background-color: var(--blue); + background-color: var(--primary); color: var(--blackish); min-height: 100vh; overflow: overlay; @@ -80,8 +82,8 @@ ion-icon { } .navigation { - background: var(--blue); - border-left: 10px solid var(--blue); + background: var(--primary); + border-left: 10px solid var(--primary); height: 100%; overflow: hidden; position: fixed; @@ -121,10 +123,11 @@ ion-icon { } .navigation ul li.hovered a { - color: var(--blue); + color: var(--primary); } -.navigation ul li a .icon { +.navigation ul li a .icon, +.navigation ul li button .icon { align-items: center; display: flex; height: 65.5px; @@ -135,10 +138,22 @@ ion-icon { text-align: center; } -.navigation ul li a .icon ion-icon { +.navigation ul li a .icon ion-icon, +.navigation ul li button .icon ion-icon { font-size: 1.75rem; } +.navigation ul li button { + color: var(--white); + display: flex; + position: relative; + text-decoration: none; + width: 100%; + background: none; + border: none; + cursor: pointer; +} + .navigation ul li.hovered a:before { box-shadow: 35px 35px 0 10px var(--white); top: -50px; @@ -267,8 +282,8 @@ ion-icon { } .Course:target { - box-shadow: rgba(21, 83, 170, 0.5) 0px 6px 24px 0px, - rgba(0, 119, 255, 0.75) 0px 0px 0px 2px; + box-shadow: rgba(141, 22, 38, 0.5) 0px 6px 24px 0px, + rgba(203, 32, 55, 0.75) 0px 0px 0px 2px; transition: all 0.5s ease 0s; } @@ -288,7 +303,7 @@ ion-icon { .Course button.jump-id-button { background-color: transparent; border: none; - color: var(--blue); + color: var(--primary); cursor: pointer; font-size: large; margin: 10px; @@ -300,17 +315,24 @@ ion-icon { } .Course button.jump-id-button:hover { - color: var(--bluer); + color: var(--primary-dark); transition: all 0.5s ease 0s; } .parent { - display: grid; + display: flex; gap: clamp(15px, 5vw, 20px); - grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); + /* grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); */ padding: 0 clamp(15px, 5vw, 20px) clamp(15px, 5vw, 20px); } +.flex-parent { + display: flex; + flex-direction: column; + gap: clamp(15px, 5vw, 20px); + width: 100%; +} + @media only screen and (max-width: 400px) { .parent { grid-template-columns: 1fr; @@ -331,7 +353,7 @@ ion-icon { .clear-results { align-items: center; - background: var(--blue); + background: var(--primary); border: none; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; @@ -345,7 +367,7 @@ ion-icon { } .clear-results:hover { - background-color: var(--bluer) !important; + background-color: var(--primary-dark) !important; color: var(--white) !important; transition: all 0.5s ease 0s; } @@ -368,11 +390,11 @@ ion-icon { .tag { align-items: center; - background-color: var(--blueish); + background-color: var(--primary-light); border: none; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; - color: var(--bluer); + color: var(--primary-dark); cursor: pointer; display: flex; flex: 1 1; @@ -397,7 +419,7 @@ ion-icon { .tag-true, .tag:hover, .tag-all { - background-color: var(--blue) !important; + background-color: var(--primary) !important; color: var(--white) !important; } @@ -487,7 +509,7 @@ button ion-icon { .modal-send { align-items: center; - background-color: var(--blue); + background-color: var(--primary); border: none; border-radius: 999px; color: var(--white); @@ -501,7 +523,7 @@ button ion-icon { } .modal-send:hover { - background-color: var(--bluer); + background-color: var(--primary-dark); color: var(--white); transition: all 0.5s ease 0s; } @@ -515,10 +537,10 @@ button ion-icon { .modal-cancel { align-items: center; - background-color: var(--blueish); + background-color: var(--primary-light); border: none; border-radius: 999px; - color: var(--bluer); + color: var(--primary-dark); cursor: pointer; display: flex; flex: 1 1; @@ -529,7 +551,7 @@ button ion-icon { } .modal-cancel:hover { - background-color: var(--blue); + background-color: var(--primary); color: var(--white); transition: all 0.5s ease 0s; } @@ -543,11 +565,11 @@ button ion-icon { .contact-modal-button { align-items: center; - background-color: var(--blueish); + background-color: var(--primary-light); border: none; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; - color: var(--bluer); + color: var(--primary-dark); cursor: pointer; display: none; height: 45.5px; @@ -564,7 +586,7 @@ button ion-icon { } .contact-modal-button:hover { - background-color: var(--blue); + background-color: var(--primary); color: var(--white); transition: all 0.5s ease 0s; } @@ -575,11 +597,11 @@ button ion-icon { .jump-to-top { align-items: center; - background-color: var(--blueish); + background-color: var(--primary-light); border: none; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; - color: var(--bluer); + color: var(--primary-dark); cursor: pointer; display: flex; height: 45.5px; @@ -592,7 +614,7 @@ button ion-icon { } .jump-to-top:hover { - background-color: var(--blue); + background-color: var(--primary); color: var(--white); transition: all 0.5s ease 0s; } @@ -617,11 +639,11 @@ button ion-icon { .mobile-navigation-button { align-items: center; - background-color: var(--blueish); + background-color: var(--primary-light); border: none; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; - color: var(--bluer); + color: var(--primary-dark); cursor: pointer; display: flex; height: 100%; @@ -633,28 +655,28 @@ button ion-icon { } .mobile-navigation-button:hover { - background-color: var(--blue); + background-color: var(--primary); color: var(--white); transition: all 0.5s ease 0s; } a.mobile-navigation-button { - background-color: var(--blue); + background-color: var(--primary); color: var(--white); } a.mobile-navigation-button:hover { - background-color: var(--bluer); + background-color: var(--primary-dark); color: var(--white); } .mobile-contact-modal-button { - background-color: var(--blue); + background-color: var(--primary); color: var(--white); } .mobile-contact-modal-button:hover { - background-color: var(--bluer); + background-color: var(--primary-dark); color: var(--white); } @@ -668,7 +690,7 @@ a.mobile-navigation-button:hover { align-items: center; background: none; border: none; - color: var(--blue); + color: var(--primary); cursor: pointer; display: flex; justify-content: left; @@ -680,7 +702,7 @@ a.mobile-navigation-button:hover { } .collapsible:hover { - color: var(--bluer); + color: var(--primary-dark); transition: all 0.5s ease 0s; } @@ -692,7 +714,7 @@ a.mobile-navigation-button:hover { .login { align-items: center; - background: var(--blue); + background: var(--primary); border: none; border-radius: 999px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px; @@ -707,17 +729,17 @@ a.mobile-navigation-button:hover { } .login:hover { - background-color: var(--bluer) !important; + background-color: var(--primary-dark) !important; color: var(--white) !important; transition: all 0.5s ease 0s; } .button { align-items: center; - background-color: var(--blueish); + background-color: var(--primary-light); border: none; border-radius: 999px; - color: var(--bluer); + color: var(--primary-dark); cursor: pointer; display: flex; flex: 1 1; @@ -730,14 +752,14 @@ a.mobile-navigation-button:hover { } .button:hover { - background-color: var(--blue); + background-color: var(--primary); color: var(--white); transition: all 0.5s ease 0s; } .button-primary { align-items: center; - background-color: var(--blue); + background-color: var(--primary); border: none; border-radius: 999px; color: var(--white); @@ -753,7 +775,7 @@ a.mobile-navigation-button:hover { } .button-primary:hover { - background-color: var(--bluer); + background-color: var(--primary-dark); color: var(--white); transition: all 0.5s ease 0s; } diff --git a/src/App.tsx b/src/App.tsx index b78a8d3..fe089f3 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,15 +7,17 @@ import { TagBar, TopBar, } from './components'; +// import { ParsePDF } from './components/ParsePDF'; import firebase from 'firebase/compat/app'; import { FC, useCallback, useEffect } from 'react'; interface AppProps { user: firebase.User | null; classItems: JSX.Element; + authLevel: number; } -const App: FC = ({ user, classItems }): JSX.Element => { +const App: FC = ({ user, classItems, authLevel }): JSX.Element => { // Hacky workaround because something with React probably interferes with the default browser behavior // Also, reactivates the highlight on the course element useEffect(() => { @@ -44,8 +46,9 @@ const App: FC = ({ user, classItems }): JSX.Element => { return (
+ {/* */}
- +
diff --git a/src/components/Course.tsx b/src/components/Course.tsx index 1101ef4..f6531f2 100644 --- a/src/components/Course.tsx +++ b/src/components/Course.tsx @@ -12,12 +12,14 @@ interface CourseProps { course: CourseType; authLevel: number; jumpId: string; + courseIDtoCourse: (id: string) => CourseType; } export const Course: FC = ({ course, authLevel, jumpId, + courseIDtoCourse, }): JSX.Element => { const [isEditing, setIsEditing] = useState(false); @@ -128,8 +130,22 @@ export const Course: FC = ({ navigator.clipboard.writeText(window.location.href); }, [jumpId]); + const isVenture = course.tags?.filter((tag) => tag === 'Venture').length; + + const Style = { + gridRow: `span ${ + course.courses?.match(/[A-Z][A-Z][A-Z][0-9][0-9][0-9]/gm)?.length ?? 1 + }`, + backgroundColor: isVenture ? 'var(--primary-light)' : '', + }; + return ( -
+

{course.coursename}


= ({ Courses: {course.courses}

+ {course.courses + .match(/[A-Z][A-Z][A-Z][0-9][0-9][0-9]/gm) + ?.filter((id) => courseIDtoCourse(id)) + .map((id) => { + return ( + <> +
+ + + ); + })}
)} diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx index 9ffd15a..8d8d930 100644 --- a/src/components/Navigation.tsx +++ b/src/components/Navigation.tsx @@ -1,8 +1,20 @@ import '../App.css'; import { links } from '../data'; -import { FC } from 'react'; +import { FC, useCallback } from 'react'; + +interface NavigationProps { + authLevel: number; +} + +export const Navigation: FC = ({ authLevel }): JSX.Element => { + const handleParseModalOpen = useCallback(() => { + const parseModal = document.getElementById( + 'parse-modal' + ) as HTMLDialogElement; + parseModal?.parentElement?.classList.remove('hide'); + parseModal?.showModal(); + }, []); -export const Navigation: FC = (): JSX.Element => { return (
    @@ -56,6 +68,21 @@ export const Navigation: FC = (): JSX.Element => { GitHub + {authLevel === 5 && ( +
  • + +
    • + )}
); diff --git a/src/components/ParsePDF.tsx b/src/components/ParsePDF.tsx new file mode 100644 index 0000000..b944a9b --- /dev/null +++ b/src/components/ParsePDF.tsx @@ -0,0 +1,146 @@ +import '../App.css'; +import { FC, useCallback, useEffect, useState } from 'react'; +import io from 'socket.io-client'; + +const socket = io('ws://129.146.123.55:3000'); + +export const ParsePDF: FC = (): JSX.Element => { + const [parseInput, setParseInput] = useState(''); + // const [parseProgress, setParseProgress] = useState(''); + + const submitButton = document.getElementById( + 'parse-submit' + ) as HTMLButtonElement; + const cancelButton = document.getElementById( + 'parse-cancel' + ) as HTMLButtonElement; + const modalFieldDisable = document.getElementsByClassName( + 'modal-field-disable' + ) as HTMLCollectionOf; + + const disableFormInput = useCallback(() => { + submitButton.disabled = true; + cancelButton.disabled = true; + Array.from(modalFieldDisable).forEach((element) => { + element.disabled = true; + }); + }, [cancelButton, modalFieldDisable, submitButton]); + + const enableFormInput = useCallback(() => { + submitButton.disabled = false; + cancelButton.disabled = false; + Array.from(modalFieldDisable).forEach((element) => { + element.disabled = false; + }); + }, [cancelButton, modalFieldDisable, submitButton]); + + const handleModalClose = useCallback((event: React.SyntheticEvent) => { + event.currentTarget.parentElement?.classList.add('hide'); + }, []); + + const handleFormCancel = useCallback(() => { + // In case Chrome Android does not support the close event. + // Also no idea why this could not be placed at the top earlier. + // It appears the JS was executing before the element loaded, + // ergo, the parseModal element was null. This did not happen + // with the other components defined above. Unsure why... + const parseModal = document.getElementById( + 'parse-modal' + ) as HTMLDialogElement; + parseModal?.parentElement?.classList.add('hide'); + parseModal.close(); + }, []); + + const handleFormSubmit = useCallback( + (event: React.FormEvent) => { + if (parseInput === '') return; + + disableFormInput(); + submitButton.textContent = 'Sending...'; + event.preventDefault(); + + // Connect to socket.io server backend + socket.connect(); + socket.on('connect', () => { + console.log('Connected!'); + }); + socket.emit('text-submit', parseInput); + console.log('sent event'); + socket.on('progress', ({ number, total }) => { + console.log(number, total); + }); + socket.on('complete', (json: JSON) => { + console.log(json); + }); + + // if (data.success !== 'true') throw new Error(data.message); + // submitButton.textContent = 'Sent!'; + + // handleFormCancel(); + + // submitButton.textContent = 'Send'; + + // setParseInput(''); + // enableFormInput(); + + // setTimeout(() => { + // alert('The contact form was sent successfully!'); + // }, 20); + // }) + // .catch((error) => { + // submitButton.textContent = 'Send'; + // enableFormInput(); + + // setTimeout(() => { + // alert('An error occurred while sending the form!'); + // }, 20); + + // throw error; + // }); + }, + [ + parseInput, + disableFormInput, + // enableFormInput, + submitButton, + // handleFormCancel, + ] + ); + + return ( +
+ +

Parse PDF

+
+