From ec66b7e7160e1361a4776e885a2f9a8c11479b14 Mon Sep 17 00:00:00 2001 From: OscarNieto113 Date: Thu, 20 Apr 2023 09:05:17 -0600 Subject: [PATCH 01/30] Initial setup to test components --- GomezMorinFrontEnd/package-lock.json | 219 +++++++++++-------- GomezMorinFrontEnd/package.json | 10 +- GomezMorinFrontEnd/src/App.jsx | 66 ++---- GomezMorinFrontEnd/src/components/Layout.jsx | 12 + GomezMorinFrontEnd/src/pages/page.jsx | 12 + 5 files changed, 176 insertions(+), 143 deletions(-) create mode 100644 GomezMorinFrontEnd/src/components/Layout.jsx diff --git a/GomezMorinFrontEnd/package-lock.json b/GomezMorinFrontEnd/package-lock.json index 620349f..ee548c6 100644 --- a/GomezMorinFrontEnd/package-lock.json +++ b/GomezMorinFrontEnd/package-lock.json @@ -8,14 +8,18 @@ "name": "gomezmorinfrontend", "version": "0.0.0", "dependencies": { + "@headlessui/react": "^1.7.14", + "@heroicons/react": "^2.0.17", "@reduxjs/toolkit": "^1.9.3", "axios": "^1.3.4", - "google-map-react": "^2.2.0", - "google-maps-react": "^2.0.6", + "headlessui": "^0.0.0", + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.43.8", - "react-redux": "^8.0.5" + "react-icons": "^4.8.0", + "react-redux": "^8.0.5", + "react-router-dom": "^6.10.0" }, "devDependencies": { "@types/react": "^18.0.28", @@ -746,12 +750,27 @@ "node": ">=12" } }, - "node_modules/@googlemaps/js-api-loader": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.15.1.tgz", - "integrity": "sha512-AsnEgNsB7S/VdrHGEQUaUM2e5tmjFGKBAfzR/AqO8O7TPq/jQGvoRw5liPBw4EMF38RDsHmKDV89q/X+qiUREQ==", + "node_modules/@headlessui/react": { + "version": "1.7.14", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.14.tgz", + "integrity": "sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==", "dependencies": { - "fast-deep-equal": "^3.1.3" + "client-only": "^0.0.1" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, + "node_modules/@heroicons/react": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.17.tgz", + "integrity": "sha512-90GMZktkA53YbNzHp6asVEDevUQCMtxWH+2UK2S8OpnLEu7qckTJPhNxNQG52xIR1WFTwFqtH6bt7a60ZNcLLA==", + "peerDependencies": { + "react": ">= 16" } }, "node_modules/@jridgewell/gen-mapping": { @@ -801,11 +820,6 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, - "node_modules/@mapbox/point-geometry": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", - "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -864,6 +878,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz", + "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -1164,6 +1186,11 @@ "node": ">= 6" } }, + "node_modules/client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -1337,16 +1364,6 @@ "node": ">=0.8.0" } }, - "node_modules/eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" - }, - "node_modules/fast-deep-equal": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" - }, "node_modules/fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -1491,33 +1508,6 @@ "node": ">=4" } }, - "node_modules/google-map-react": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.0.tgz", - "integrity": "sha512-UPiTwR3qNKJJizURXTuCbnBr8kLtLsiikj/KH1UTLGhadnU6fT+CE3CLw1lzZwk5zZIduQQODyIcEwNInECmUg==", - "dependencies": { - "@googlemaps/js-api-loader": "^1.7.0", - "@mapbox/point-geometry": "^0.1.0", - "eventemitter3": "^4.0.4", - "prop-types": "^15.7.2" - }, - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "react": "^16.0.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/google-maps-react": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz", - "integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==", - "peerDependencies": { - "react": "~0.14.8 || ^15.0.0 || ^16.0.0", - "react-dom": "~0.14.8 || ^15.0.0 || ^16.0.0" - } - }, "node_modules/has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -1539,6 +1529,11 @@ "node": ">=4" } }, + "node_modules/headlessui": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/headlessui/-/headlessui-0.0.0.tgz", + "integrity": "sha512-CHvacVPbl8AqIg2sBNKySUmumu7o15jSrCaTrIh9GW2Eq4y/krCN/vZFOsKCwlrhWQbO4267a8xvvP8bs+qREQ==" + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -2050,6 +2045,14 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -2102,6 +2105,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz", + "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==", + "dependencies": { + "@remix-run/router": "1.5.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz", + "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==", + "dependencies": { + "@remix-run/router": "1.5.0", + "react-router": "6.10.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -2874,14 +2907,20 @@ "dev": true, "optional": true }, - "@googlemaps/js-api-loader": { - "version": "1.15.1", - "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.15.1.tgz", - "integrity": "sha512-AsnEgNsB7S/VdrHGEQUaUM2e5tmjFGKBAfzR/AqO8O7TPq/jQGvoRw5liPBw4EMF38RDsHmKDV89q/X+qiUREQ==", + "@headlessui/react": { + "version": "1.7.14", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.14.tgz", + "integrity": "sha512-znzdq9PG8rkwcu9oQ2FwIy0ZFtP9Z7ycS+BAqJ3R5EIqC/0bJGvhT7193rFf+45i9nnPsYvCQVW4V/bB9Xc+gA==", "requires": { - "fast-deep-equal": "^3.1.3" + "client-only": "^0.0.1" } }, + "@heroicons/react": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.17.tgz", + "integrity": "sha512-90GMZktkA53YbNzHp6asVEDevUQCMtxWH+2UK2S8OpnLEu7qckTJPhNxNQG52xIR1WFTwFqtH6bt7a60ZNcLLA==", + "requires": {} + }, "@jridgewell/gen-mapping": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", @@ -2920,11 +2959,6 @@ "@jridgewell/sourcemap-codec": "1.4.14" } }, - "@mapbox/point-geometry": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", - "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==" - }, "@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2962,6 +2996,11 @@ "reselect": "^4.1.7" } }, + "@remix-run/router": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.5.0.tgz", + "integrity": "sha512-bkUDCp8o1MvFO+qxkODcbhSqRa6P2GXgrGZVpt0dCXNW2HCSCqYI0ZoAqEOSAjRWmmlKcYgFvN4B4S+zo/f8kg==" + }, "@types/hoist-non-react-statics": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", @@ -3172,6 +3211,11 @@ } } }, + "client-only": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", + "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==" + }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -3303,16 +3347,6 @@ "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", "dev": true }, - "eventemitter3": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" - }, - "fast-deep-equal": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" - }, "fast-glob": { "version": "3.2.12", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", @@ -3410,23 +3444,6 @@ "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", "dev": true }, - "google-map-react": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/google-map-react/-/google-map-react-2.2.0.tgz", - "integrity": "sha512-UPiTwR3qNKJJizURXTuCbnBr8kLtLsiikj/KH1UTLGhadnU6fT+CE3CLw1lzZwk5zZIduQQODyIcEwNInECmUg==", - "requires": { - "@googlemaps/js-api-loader": "^1.7.0", - "@mapbox/point-geometry": "^0.1.0", - "eventemitter3": "^4.0.4", - "prop-types": "^15.7.2" - } - }, - "google-maps-react": { - "version": "2.0.6", - "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.6.tgz", - "integrity": "sha512-M8Eo9WndfQEfxcmm6yRq03qdJgw1x6rQmJ9DN+a+xPQ3K7yNDGkVDbinrf4/8vcox7nELbeopbm4bpefKewWfQ==", - "requires": {} - }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -3442,6 +3459,11 @@ "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", "dev": true }, + "headlessui": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/headlessui/-/headlessui-0.0.0.tgz", + "integrity": "sha512-CHvacVPbl8AqIg2sBNKySUmumu7o15jSrCaTrIh9GW2Eq4y/krCN/vZFOsKCwlrhWQbO4267a8xvvP8bs+qREQ==" + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -3773,6 +3795,12 @@ "integrity": "sha512-BQm+Ge5KjTk1EchDBRhdP8Pkb7MArO2jFF+UWYr3rtvh6197khi22uloLqlWeuY02ItlCzPunPsFt1/q9wQKnw==", "requires": {} }, + "react-icons": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz", + "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==", + "requires": {} + }, "react-is": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", @@ -3797,6 +3825,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.10.0.tgz", + "integrity": "sha512-Nrg0BWpQqrC3ZFFkyewrflCud9dio9ME3ojHCF/WLsprJVzkq3q3UeEhMCAW1dobjeGbWgjNn/PVF6m46ANxXQ==", + "requires": { + "@remix-run/router": "1.5.0" + } + }, + "react-router-dom": { + "version": "6.10.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.10.0.tgz", + "integrity": "sha512-E5dfxRPuXKJqzwSe/qGcqdwa18QiWC6f3H3cWXM24qj4N0/beCIf/CWTipop2xm7mR0RCS99NnaqPNjHtrAzCg==", + "requires": { + "@remix-run/router": "1.5.0", + "react-router": "6.10.0" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/GomezMorinFrontEnd/package.json b/GomezMorinFrontEnd/package.json index da82c2b..9bd410e 100644 --- a/GomezMorinFrontEnd/package.json +++ b/GomezMorinFrontEnd/package.json @@ -9,14 +9,18 @@ "preview": "vite preview" }, "dependencies": { + "@headlessui/react": "^1.7.14", + "@heroicons/react": "^2.0.17", "@reduxjs/toolkit": "^1.9.3", "axios": "^1.3.4", - "google-map-react": "^2.2.0", - "google-maps-react": "^2.0.6", + "headlessui": "^0.0.0", + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.43.8", - "react-redux": "^8.0.5" + "react-icons": "^4.8.0", + "react-redux": "^8.0.5", + "react-router-dom": "^6.10.0" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/GomezMorinFrontEnd/src/App.jsx b/GomezMorinFrontEnd/src/App.jsx index c8a9189..86f269b 100644 --- a/GomezMorinFrontEnd/src/App.jsx +++ b/GomezMorinFrontEnd/src/App.jsx @@ -1,59 +1,19 @@ -import { useDispatch, useSelector } from "react-redux" -import { setUsers } from "./states/generalSlice" -import Card from "./components/Card" -import { useForm } from "react-hook-form" -import { createUser, readUsers } from "./queries/query" -import { useEffect } from "react" -import MapContainer from "./components/MapContainer" +import { BrowserRouter, Route, Routes } from "react-router-dom"; +import Page from "./pages/page" +import Layout from "./components/Layout"; function App() { - const users = useSelector((state) => state.general.users) - const dispatch = useDispatch() - - const { register, handleSubmit } = useForm() - - const onSubmit = async (data) => { - const response = await createUser(data) - - dispatch(setUsers(response)) - } - - useEffect(() => { - readUsers() - .then((response) => { - - if (response) { - dispatch(setUsers(response)) - } - }) - }, []) - return ( -
-
- - - - - -
- -
-
    - { users.map((user, id) => ( - - )) } -
-
-
- -
+
+ + + }> + } /> + + +
- ) + ); } -export default App +export default App \ No newline at end of file diff --git a/GomezMorinFrontEnd/src/components/Layout.jsx b/GomezMorinFrontEnd/src/components/Layout.jsx new file mode 100644 index 0000000..48fbb5a --- /dev/null +++ b/GomezMorinFrontEnd/src/components/Layout.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Outlet } from "react-router-dom"; + +const Layout = () => { + return ( +
+ +
+ ); +}; + +export default Layout; \ No newline at end of file diff --git a/GomezMorinFrontEnd/src/pages/page.jsx b/GomezMorinFrontEnd/src/pages/page.jsx index e69de29..f67d8fe 100644 --- a/GomezMorinFrontEnd/src/pages/page.jsx +++ b/GomezMorinFrontEnd/src/pages/page.jsx @@ -0,0 +1,12 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const Page = () => { + return ( +
+

Hola prueba

+
+ ); +}; + +export default Page; \ No newline at end of file From c1784195195f5a1f3d201b13f156f04eb8fd2af7 Mon Sep 17 00:00:00 2001 From: OscarNieto113 Date: Thu, 20 Apr 2023 13:35:43 -0600 Subject: [PATCH 02/30] TextArea(form) Component added --- .../src/components/TextArea.jsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 GomezMorinFrontEnd/src/components/TextArea.jsx diff --git a/GomezMorinFrontEnd/src/components/TextArea.jsx b/GomezMorinFrontEnd/src/components/TextArea.jsx new file mode 100644 index 0000000..936a7bd --- /dev/null +++ b/GomezMorinFrontEnd/src/components/TextArea.jsx @@ -0,0 +1,34 @@ +import React from "react"; +import { useFormContext } from "react-hook-form"; + +/** + * A component for rendering a textarea input field. + * @param {string} label - The label text for the textarea. + * @param {string} name - The name of the textarea input field. + * @param {string} placeholder - The placeholder text for the textarea. + * @param {string} defaultValue - The default value for the textarea. + * + * @returns {JSX.Element} - The rendered component. + */ + +const TextArea = ({ label, name, placeholder, defaultValue }) => { + const { register } = useFormContext(); + + return ( +
+ +