diff options
| -rw-r--r-- | package-lock.json | 261 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | src/components/Games.tsx | 75 | ||||
| -rw-r--r-- | src/components/UploadGame.tsx | 44 | ||||
| -rw-r--r-- | src/main.tsx | 20 |
5 files changed, 315 insertions, 88 deletions
diff --git a/package-lock.json b/package-lock.json index 19fe668..e002442 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-markdown": "^9.0.1", - "react-router-dom": "^6.23.1" + "react-router-dom": "^6.23.1", + "rsuite": "^5.64.0" }, "devDependencies": { "@tailwindcss/typography": "^0.5.13", @@ -42,6 +43,17 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@babel/runtime": { + "version": "7.24.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz", + "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", @@ -635,6 +647,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@juggle/resize-observer": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz", + "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -896,6 +913,27 @@ "win32" ] }, + "node_modules/@rsuite/icon-font": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@rsuite/icon-font/-/icon-font-4.0.0.tgz", + "integrity": "sha512-rZTgpTH3H3HLczCA2rnkWfoMKm0ZXoRzsrkVujfP/FfslnKUMvO6w56pa8pCvhWGpNEPUsLS2ULnFGpTEcup/Q==" + }, + "node_modules/@rsuite/icons": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@rsuite/icons/-/icons-1.0.3.tgz", + "integrity": "sha512-qkjYFn1v5YV9eH57Q4AJ8CwsQYfILun2wdoxhQg5+xYxkIu6UyF8vTMmpOzLvcybTE7D8STm4dH7vhpyhPOC7g==", + "dependencies": { + "@babel/runtime": "^7.12.1", + "@rsuite/icon-font": "^4.0.0", + "classnames": "^2.2.5", + "insert-css": "^2.0.0", + "lodash": "^4.17.20" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@swc/core": { "version": "1.5.7", "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.5.7.tgz", @@ -1137,6 +1175,11 @@ "node": ">=4" } }, + "node_modules/@types/chai": { + "version": "4.3.16", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.3.16.tgz", + "integrity": "sha512-PatH4iOdyh3MyWtmHVFXLWCCIhUbopaltqddG9BzB+gMIzee2MJrvd+jouii9Z3wzQJruGWAm7WOMjgfG8hQlQ==" + }, "node_modules/@types/debug": { "version": "4.1.12", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", @@ -1166,6 +1209,11 @@ "@types/unist": "*" } }, + "node_modules/@types/lodash": { + "version": "4.17.4", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.4.tgz", + "integrity": "sha512-wYCP26ZLxaT3R39kiN2+HcJ4kTd3U1waI/cY7ivWYqFP6pW3ZNpvi6Wd6PHZx7T/t8z0vlkXMg3QYLa7DZ/IJQ==" + }, "node_modules/@types/mdast": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", @@ -1202,6 +1250,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-window": { + "version": "1.8.8", + "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz", + "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/unist": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.2.tgz", @@ -1774,6 +1830,11 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -1847,6 +1908,21 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -1937,6 +2013,14 @@ "node": ">=6.0.0" } }, + "node_modules/dom-lib": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/dom-lib/-/dom-lib-3.3.1.tgz", + "integrity": "sha512-N2mpo8qQmB9wIMZJVjER+BSh4GJiZZ7S6EjnMtyETcXo90hpITUDXpUhqOcfXZ2ZefytuYYKTZMp3CGR2X+tDA==", + "dependencies": { + "@babel/runtime": "^7.20.0" + } + }, "node_modules/eastasianwidth": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", @@ -2386,6 +2470,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-value": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/get-value/-/get-value-3.0.1.tgz", + "integrity": "sha512-mKZj9JLQrwMBtj5wxi6MH8Z5eSKaERpAwjg43dPtlGI1ZVEgH/qC7T8/6R2OBSUA+zzHBZgICsVJaEIV2tKTDA==", + "dependencies": { + "isobject": "^3.0.1" + }, + "engines": { + "node": ">=6.0" + } + }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", @@ -2604,6 +2699,11 @@ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.3.tgz", "integrity": "sha512-qlD8YNDqyTKTyuITrDOffsl6Tdhv+UC4hcdAVuQsK4IMQ99nSgd1MIA/Q+jQYoh9r3hVUXhYh7urSRmXPkW04g==" }, + "node_modules/insert-css": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/insert-css/-/insert-css-2.0.0.tgz", + "integrity": "sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==" + }, "node_modules/is-alphabetical": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz", @@ -2727,12 +2827,39 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/is-plain-object": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", + "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", + "dependencies": { + "isobject": "^3.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-primitive": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-3.0.1.tgz", + "integrity": "sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", "dev": true }, + "node_modules/isobject": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", + "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/jackspeak": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.1.2.tgz", @@ -2847,6 +2974,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "node_modules/lodash.castarray": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", @@ -3039,6 +3171,11 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/memoize-one": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz", + "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==" + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -3574,7 +3711,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3932,6 +4068,16 @@ "node": ">= 0.8.0" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/property-information": { "version": "6.5.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz", @@ -3993,6 +4139,11 @@ "react": "^18.3.1" } }, + "node_modules/react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "node_modules/react-markdown": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz", @@ -4048,6 +4199,30 @@ "react-dom": ">=16.8" } }, + "node_modules/react-use-set": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/react-use-set/-/react-use-set-1.0.0.tgz", + "integrity": "sha512-6BBbOcWc/tOKuwd9gDtdunvOr/g40S0SkCBYvrSJvpI0upzNlHmLoeDvylnoP8PrjQXItClAFxseVGGhEkk7kw==", + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/react-window": { + "version": "1.8.10", + "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz", + "integrity": "sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==", + "dependencies": { + "@babel/runtime": "^7.0.0", + "memoize-one": ">=3.1.1 <6" + }, + "engines": { + "node": ">8.0.0" + }, + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -4081,6 +4256,11 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/remark-parse": { "version": "11.0.0", "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz", @@ -4198,6 +4378,57 @@ "fsevents": "~2.3.2" } }, + "node_modules/rsuite": { + "version": "5.64.0", + "resolved": "https://registry.npmjs.org/rsuite/-/rsuite-5.64.0.tgz", + "integrity": "sha512-yknbgzUOkb66dX3fFxTnQSlonW1D53fQgY6V4g1Iu8kBNH7tduPaZghLcQ65DAGBa2pGvtrkCZUrLaied1NMBw==", + "dependencies": { + "@babel/runtime": "^7.20.1", + "@juggle/resize-observer": "^3.4.0", + "@rsuite/icons": "^1.0.2", + "@types/chai": "^4.3.3", + "@types/lodash": "^4.14.184", + "@types/prop-types": "^15.7.5", + "@types/react-window": "^1.8.5", + "classnames": "^2.3.1", + "date-fns": "^2.29.3", + "dom-lib": "^3.3.1", + "lodash": "^4.17.11", + "prop-types": "^15.8.1", + "react-use-set": "^1.0.0", + "react-window": "^1.8.8", + "rsuite-table": "^5.18.2", + "schema-typed": "^2.2.2" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/rsuite-table": { + "version": "5.18.2", + "resolved": "https://registry.npmjs.org/rsuite-table/-/rsuite-table-5.18.2.tgz", + "integrity": "sha512-IelmlHraExYgrkT13WWVENhCywWjBxPkpF2zpsqvMcwzaNAg9lHaVVyajcOKczqGB24NGRE6WgBF5n1RC6XAww==", + "dependencies": { + "@babel/runtime": "^7.12.5", + "@juggle/resize-observer": "^3.3.1", + "@rsuite/icons": "^1.0.0", + "classnames": "^2.3.1", + "dom-lib": "^3.1.3", + "lodash": "^4.17.21", + "react-is": "^17.0.2" + }, + "peerDependencies": { + "prop-types": "^15.7.2", + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/rsuite-table/node_modules/react-is": { + "version": "17.0.2", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -4229,6 +4460,15 @@ "loose-envify": "^1.1.0" } }, + "node_modules/schema-typed": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/schema-typed/-/schema-typed-2.2.2.tgz", + "integrity": "sha512-hRmqKr5V6UyhmZ0FixRVetgxvudRPjDynVZZRNq6t4EZHii7U33vmqd9uap3s4aqBcDg1JtubMNvCEmsZTpm3Q==", + "dependencies": { + "get-value": "^3.0.1", + "set-value": "^4.1.0" + } + }, "node_modules/semver": { "version": "7.6.2", "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz", @@ -4241,6 +4481,23 @@ "node": ">=10" } }, + "node_modules/set-value": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/set-value/-/set-value-4.1.0.tgz", + "integrity": "sha512-zTEg4HL0RwVrqcWs3ztF+x1vkxfm0lP+MQQFPiMJTKVceBwEV0A569Ou8l9IYQG8jOZdMVI1hGsc0tmeD2o/Lw==", + "funding": [ + "https://github.com/sponsors/jonschlinkert", + "https://paypal.me/jonathanschlinkert", + "https://jonschlinkert.dev/sponsor" + ], + "dependencies": { + "is-plain-object": "^2.0.4", + "is-primitive": "^3.0.1" + }, + "engines": { + "node": ">=11.0" + } + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 0af7551..7240b1a 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-markdown": "^9.0.1", - "react-router-dom": "^6.23.1" + "react-router-dom": "^6.23.1", + "rsuite": "^5.64.0" }, "devDependencies": { "@tailwindcss/typography": "^0.5.13", diff --git a/src/components/Games.tsx b/src/components/Games.tsx index cfa6925..4ca8def 100644 --- a/src/components/Games.tsx +++ b/src/components/Games.tsx @@ -8,7 +8,6 @@ import { GameType } from "../types"; export default function Games () { const [games, setGames] = useState<GameType[]>([]); - // old method useEffect(() => { const url = `${import.meta.env.VITE_API_TITLE}/api/v1/games`; fetch(url).then((response) => { @@ -23,88 +22,14 @@ export default function Games () { <GameCard link={`/game/${game.titleSlug}`} game={game} key={game.id}/> )); - const handleSubmit = (e: FormEvent<HTMLFormElement>) => { - e.preventDefault(); //stops submit from happening - - const target = e.target as typeof e.target & { - title: { value: string }; - img_rendering: { value: string }; - //game_files: { files: FileList }; - zip: { value: string, files: FileList }; - card_img: { value: string, files: FileList }; - char_img: { value: string, files: FileList }; - title_img: { value: string, files: FileList }; - }; - - //const form = e.target; - const formData = new FormData(); - formData.append('game[title]', target.title.value); - formData.append('game[img_rendering]', target.img_rendering.value); - //for(let i =0; i < target.game_files.files.length; i++) - //{ - //formData.append('game[game_files][]', target.game_files.files[i], target.game_files.files[i].name); - //} - formData.append('game[zip]', target.zip.files[0], target.zip.value); - formData.append('game[card_img]', target.card_img.files[0], target.card_img.value); - formData.append('game[char_img]', target.char_img.files[0], target.char_img.value); - formData.append('game[title_img]', target.title_img.files[0], target.title_img.value); - - //for (var pair of formData.entries()) { - // //console.log(pair[0] + ', ' + pair[1]) - //}; - - fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, { - method: 'post', - body: formData, - }); - }; return( <> <div> <div className="flex flex-col gap-16 max-w-6xl shrink"> <div className="title font-bold text-6xl font-title">Games</div> - <div className=""> <div className="jumbotron jumbotron-fluid bg-transparent"> <div className="container secondary-color"> - <form onSubmit={handleSubmit} action="/upload" method="post" className="flex flex-col gap-4"> - <div> - <label>Title</label> - <input type="text" name="title" /> - </div> - <div> - <label>Image Rendering</label> - <select name="img_rendering"> - <option value="pixelated">Pixelated</option> - <option value="crisp-edges">Crisp Edges</option> - </select> - </div> - { /*<div> - <label>Files</label> - <input type="file" multiple name="game_files" /> - </div> */ } - <div> - <label>Zip</label> - <input type="file" name="zip" /> </div> - <div> - <label>Card Image</label> - <input type="file" name="card_img" /> - </div> - <div> - <label>Character Image</label> - <input type="file" name="char_img" /> - </div> - <div> - <label>Title Image</label> - <input type="file" name="title_img" /> - </div> - <div style={{ boxShadow: 'rgba(255,255,255,.1) 0 1px 0,rgba(0,0,0,.8) 0 1px 7px 0 inset' }} className="p-[5px] w-min h-min bg-stone-800 rounded-[5px]"> - <Button width={ 28 } height={ 12 } link={ <button type="submit" className="w-28 h-12 bg-stone-transparent text-stone-50 rounded">Submit</button> }/> - </div> - - </form> - </div> - </div> </div> <div className="flex flex-row flex-wrap gap-20 justify-around"> { allGames } diff --git a/src/components/UploadGame.tsx b/src/components/UploadGame.tsx index 4801654..690834d 100644 --- a/src/components/UploadGame.tsx +++ b/src/components/UploadGame.tsx @@ -1,10 +1,35 @@ -import { useState, FormEvent } from "react"; +import { useState, useEffect, FormEvent } from "react"; import Button from "./Button"; import ReactMarkdown from 'react-markdown'; +import { TagPicker } from 'rsuite'; +type platformTag = { + label: string + value: string +}; + +type platformTagRaw = { + name: string +}; export default function UploadGame () { const [markdownInput, setMarkdownInput] = useState<string>(""); + const [platformTags, setPlatformTags] = useState<platformTag[]>([]); + const [platformTagsData, setPlatformTagsData] = useState<string[]>([]); + + useEffect(() => { + const url = `${import.meta.env.VITE_API_TITLE}/api/v1/tags?tag_type=platform`; + fetch(url).then((response) => { + if (response.ok) { + return response.json(); + } + throw new Error("Network response was not ok."); + }).then((response) => setPlatformTags( + response.map( + (item: platformTagRaw) => ({ label: item.name, value: item.name }) + ) + )); //.catch(() => navigate("/")); + }, []); const handleSubmit = (e: FormEvent<HTMLFormElement>) => { e.preventDefault(); //stops submit from happening @@ -34,6 +59,13 @@ export default function UploadGame () { formData.append('game[title_img]', target.title_img.files[0], target.title_img.value); formData.append('game[github_link]', target.github_link.value); formData.append('game[status]', `${target.status.value}`); + console.log("before the for loop"); + for(let i = 0; i < platformTagsData.length; i++) + { + console.log(platformTagsData[i]); + formData.append('game[platform_tag][]', platformTagsData[i]); + } + console.log("after the for loop"); fetch(`${import.meta.env.VITE_API_TITLE}/api/v1/games`, { credentials: 'include', @@ -61,7 +93,7 @@ export default function UploadGame () { className="min-h-32 grow p-4" name="description" value={markdownInput} - onChange={(e) => setMarkdownInput(e.target.value)} + onChange={(data) => setMarkdownInput(data.target.value)} /> </div> <div className="flex flex-col"> @@ -77,6 +109,14 @@ export default function UploadGame () { <input type="text" name="github_link" /> </div> <div className="flex flex-col"> + <label>Tags</label> + <TagPicker + data={platformTags} + style={{ width: 300 }} + onChange={(items) => setPlatformTagsData(items)} + /> + </div> + <div className="flex flex-col"> <label>Image Rendering</label> <select name="img_rendering"> <option value="crisp-edges">Crisp Edges</option> diff --git a/src/main.tsx b/src/main.tsx index 2c43ef2..bd96520 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,12 +1,16 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' -import App from './App.tsx' -import './index.css' +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import { CustomProvider } from 'rsuite'; +import App from './App.tsx'; +import 'rsuite/dist/rsuite-no-reset.min.css'; +import './index.css'; // null assertion for tsx //ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById('root')!).render( - <React.StrictMode> - <App /> - </React.StrictMode>, -) + <React.StrictMode> + <CustomProvider> + <App /> + </CustomProvider> + </React.StrictMode>, +); |