From 785d1e7e8c01e59df0c4653d0b9dee57fe74460f Mon Sep 17 00:00:00 2001 From: Jesus Fajardo Date: Tue, 25 Jun 2024 02:00:01 +0200 Subject: [PATCH] Refactor --- frontend/package-lock.json | 105 ++++++++++++++- frontend/package.json | 3 +- .../forms/meet/MeetRegisterForm.jsx | 126 +++++++++++------- 3 files changed, 181 insertions(+), 53 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 48b2112..7e1bf87 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -19,7 +19,8 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.23.1", "react-stripe-js": "^1.1.5", - "stripe": "^15.12.0" + "stripe": "^15.12.0", + "styled-components": "^6.1.11" }, "devDependencies": { "@types/react": "^18.2.66", @@ -385,6 +386,24 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, + "node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.20.2", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz", @@ -1294,6 +1313,11 @@ "@types/react": "*" } }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -1717,6 +1741,14 @@ "node": ">=6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-lite": { "version": "1.0.30001620", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz", @@ -1986,6 +2018,24 @@ "node": ">= 8" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -3956,7 +4006,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -4275,8 +4324,7 @@ "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", - "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==", - "dev": true + "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==" }, "node_modules/possible-typed-array-names": { "version": "1.0.0", @@ -4291,7 +4339,6 @@ "version": "8.4.38", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", - "dev": true, "funding": [ { "type": "opencollective", @@ -4315,6 +4362,11 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -4936,6 +4988,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4992,7 +5049,6 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz", "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -5142,6 +5198,43 @@ "node": ">=12.*" } }, + "node_modules/styled-components": { + "version": "6.1.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz", + "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==", + "dependencies": { + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + } + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, + "node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 6908a24..4175da3 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,7 +18,8 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.23.1", "react-stripe-js": "^1.1.5", - "stripe": "^15.12.0" + "stripe": "^15.12.0", + "styled-components": "^6.1.11" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/frontend/src/components/forms/meet/MeetRegisterForm.jsx b/frontend/src/components/forms/meet/MeetRegisterForm.jsx index 100ddf8..a55270c 100644 --- a/frontend/src/components/forms/meet/MeetRegisterForm.jsx +++ b/frontend/src/components/forms/meet/MeetRegisterForm.jsx @@ -1,15 +1,63 @@ -import {InputText} from "primereact/inputtext" -import {Button} from "primereact/button" -import {useState} from "react" -import {Calendar} from "primereact/calendar" +import { InputText } from "primereact/inputtext"; +import { Button } from "primereact/button"; +import { useState } from "react"; +import { Calendar } from "primereact/calendar"; +import styled from 'styled-components'; + +const RegisterContainer = styled.div` + background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700)); + color: white; + padding: 20px; + text-align: center; + width: 90%; + max-width: 600px; + margin: 0 auto; + border-radius: 10px; + + @media (max-width: 600px) { + padding: 10px; + } +`; + +const Label = styled.label` + text-align: left; + color: var(--primary-50); + font-weight: 600; + + @media (max-width: 600px) { + font-size: 14px; + } +`; + +const StyledInputText = styled(InputText)` + background-color: rgba(255, 255, 255, 0.2); + border: none; + padding: 12px; + color: var(--primary-50); + width: 100%; + + @media (max-width: 600px) { + padding: 8px; + } +`; + +const StyledButton = styled(Button)` + padding: 12px; + width: 100%; + color: var(--primary-50); + border: 1px solid rgba(255, 255, 255, 0.3); + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } +`; export default function MeetRegisterForm() { - const today = new Date() - const [date, setDate] = useState(today) - const [url, setUrl] = useState('') - const [price, setPrice] = useState(0) + const today = new Date(); + const [date, setDate] = useState(today); + const [url, setUrl] = useState(''); + const [price, setPrice] = useState(0); // const domain = "http://localhost:5000" - const domain = "http://86.38.204.61" + const domain = "http://86.38.204.61"; function saveMeet() { fetch(domain + '/api/meets', { @@ -17,60 +65,46 @@ export default function MeetRegisterForm() { headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({meetUrl: url, meetDate: date, price: price}) + body: JSON.stringify({ meetUrl: url, meetDate: date, price: price }) }) .then(response => { if (!response.ok) { - throw new Error('Network response was not ok') + throw new Error('Network response was not ok'); } - return response.json() + return response.json(); }) .then(() => { - setUrl('') - setDate(today) + setUrl(''); + setDate(today); }) .catch(error => { - console.error('There was a problem with the fetch operation:', error) - }) + console.error('There was a problem with the fetch operation:', error); + }); } return ( -
-
- - setUrl(event.target.value)} value={url} + +
+ + setUrl(event.target.value)} value={url} />
-
- - setPrice(parseFloat(event.target.value))} +
+ + setPrice(parseFloat(event.target.value))} />
-
- +
+ setDate(e.value)} dateFormat="dd/mm/yy" - minDate={today} showTime hourFormat="24"/> + minDate={today} showTime hourFormat="24" style={{ width: '100%' }} + />
-
-
- - ) + + ); }