From 24d3e9440a71a8307021b0a794f20f5b4602ac91 Mon Sep 17 00:00:00 2001 From: Eslam Ashraf <71986226+EslamAsHhraf@users.noreply.github.com> Date: Mon, 24 Oct 2022 01:31:15 +0200 Subject: [PATCH 001/142] implement sent private message --- package-lock.json | 56 ++++++++- package.json | 2 + .../Messages/MessageFooter/MessageFooter.jsx | 11 ++ .../Messages/MessageFooter/styles.js | 21 ++++ .../Messages/MessageForm/MessageForm.jsx | 108 ++++++++++++++++++ src/components/Messages/MessageForm/styles.js | 80 +++++++++++++ .../MessagesHeader/MessagesHeader.jsx | 48 ++++++++ .../Messages/MessagesHeader/styles.js | 28 +++++ src/pages/Messages.jsx | 11 +- 9 files changed, 358 insertions(+), 7 deletions(-) create mode 100644 src/components/Messages/MessageFooter/MessageFooter.jsx create mode 100644 src/components/Messages/MessageFooter/styles.js create mode 100644 src/components/Messages/MessageForm/MessageForm.jsx create mode 100644 src/components/Messages/MessageForm/styles.js create mode 100644 src/components/Messages/MessagesHeader/MessagesHeader.jsx create mode 100644 src/components/Messages/MessagesHeader/styles.js diff --git a/package-lock.json b/package-lock.json index 6c6f7b29..e4fcbacf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,11 +16,13 @@ "@mui/icons-material": "^5.10.9", "@mui/material": "^5.10.9", "@mui/styled-engine-sc": "^5.10.6", + "@mui/system": "^5.10.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/user-event": "^13.5.0", "axios": "^1.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-google-recaptcha": "^2.1.0", "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", "router": "^1.3.7", @@ -3425,9 +3427,9 @@ } }, "node_modules/@mui/system": { - "version": "5.10.9", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.9.tgz", - "integrity": "sha512-B6fFC0sK06hNmqY7fAUfwShQv594+u/DT1YEFHPtK4laouTu7V4vSGQWi1WJT9Bjs9Db5D1bRDJ+Yy+tc3QOYA==", + "version": "5.10.10", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.10.tgz", + "integrity": "sha512-TXwtKN0adKpBrZmO+eilQWoPf2veh050HLYrN78Kps9OhlvO70v/2Kya0+mORFhu9yhpAwjHXO8JII/R4a5ZLA==", "dependencies": { "@babel/runtime": "^7.19.0", "@mui/private-theming": "^5.10.9", @@ -14596,6 +14598,18 @@ "node": ">=14" } }, + "node_modules/react-async-script": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz", + "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==", + "dependencies": { + "hoist-non-react-statics": "^3.3.0", + "prop-types": "^15.5.0" + }, + "peerDependencies": { + "react": ">=16.4.1" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -14730,6 +14744,18 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "node_modules/react-google-recaptcha": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz", + "integrity": "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==", + "dependencies": { + "prop-types": "^15.5.0", + "react-async-script": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16.4.1" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -19919,9 +19945,9 @@ } }, "@mui/system": { - "version": "5.10.9", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.9.tgz", - "integrity": "sha512-B6fFC0sK06hNmqY7fAUfwShQv594+u/DT1YEFHPtK4laouTu7V4vSGQWi1WJT9Bjs9Db5D1bRDJ+Yy+tc3QOYA==", + "version": "5.10.10", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.10.tgz", + "integrity": "sha512-TXwtKN0adKpBrZmO+eilQWoPf2veh050HLYrN78Kps9OhlvO70v/2Kya0+mORFhu9yhpAwjHXO8JII/R4a5ZLA==", "requires": { "@babel/runtime": "^7.19.0", "@mui/private-theming": "^5.10.9", @@ -27820,6 +27846,15 @@ "whatwg-fetch": "^3.6.2" } }, + "react-async-script": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/react-async-script/-/react-async-script-1.2.0.tgz", + "integrity": "sha512-bCpkbm9JiAuMGhkqoAiC0lLkb40DJ0HOEJIku+9JDjxX3Rcs+ztEOG13wbrOskt3n2DTrjshhaQ/iay+SnGg5Q==", + "requires": { + "hoist-non-react-statics": "^3.3.0", + "prop-types": "^15.5.0" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -27920,6 +27955,15 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "react-google-recaptcha": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/react-google-recaptcha/-/react-google-recaptcha-2.1.0.tgz", + "integrity": "sha512-K9jr7e0CWFigi8KxC3WPvNqZZ47df2RrMAta6KmRoE4RUi7Ys6NmNjytpXpg4HI/svmQJLKR+PncEPaNJ98DqQ==", + "requires": { + "prop-types": "^15.5.0", + "react-async-script": "^1.1.1" + } + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/package.json b/package.json index 4b839877..95c69ce7 100644 --- a/package.json +++ b/package.json @@ -11,11 +11,13 @@ "@mui/icons-material": "^5.10.9", "@mui/material": "^5.10.9", "@mui/styled-engine-sc": "^5.10.6", + "@mui/system": "^5.10.10", "@testing-library/jest-dom": "^5.16.5", "@testing-library/user-event": "^13.5.0", "axios": "^1.1.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-google-recaptcha": "^2.1.0", "react-router-dom": "^6.4.2", "react-scripts": "5.0.1", "router": "^1.3.7", diff --git a/src/components/Messages/MessageFooter/MessageFooter.jsx b/src/components/Messages/MessageFooter/MessageFooter.jsx new file mode 100644 index 00000000..fec8d9a7 --- /dev/null +++ b/src/components/Messages/MessageFooter/MessageFooter.jsx @@ -0,0 +1,11 @@ +import { Links } from './styles'; + +function MessageFooter() { + return ( + + blog + + ); +} + +export default MessageFooter; diff --git a/src/components/Messages/MessageFooter/styles.js b/src/components/Messages/MessageFooter/styles.js new file mode 100644 index 00000000..f96f2cfa --- /dev/null +++ b/src/components/Messages/MessageFooter/styles.js @@ -0,0 +1,21 @@ +import styled from '@emotion/styled'; +import { Link } from '@mui/material'; + +const Links = styled(Link)(({ theme }) => ({ + color: theme.palette.primary.main, + textDecoration: 'none', + fontSize: 'small', + '&:hover': { + textDecoration: 'underline', + }, + '&:active': { + color: theme.palette.primary.light, + }, +})); +const HeadLinks = styled(Link)(({ theme }) => ({ + color: theme.palette.primary.main, + +})); +export { + Links, HeadLinks, +}; diff --git a/src/components/Messages/MessageForm/MessageForm.jsx b/src/components/Messages/MessageForm/MessageForm.jsx new file mode 100644 index 00000000..37685f25 --- /dev/null +++ b/src/components/Messages/MessageForm/MessageForm.jsx @@ -0,0 +1,108 @@ +import { useEffect, useRef, useState } from 'react'; +import axios from 'axios'; +import ReCAPTCHA from 'react-google-recaptcha'; +// import styles +import { + From, FromHeader, InputContiner, SelectFrom, OptionFrom, InputLabel, Input, SubLabel, + TextArea, SubmitButton, SubmitAnimation, Warning, +} from './styles'; + +function MessageForm() { + const api = 'http://myjson.dit.upm.es/api/bins/8ybo'; + const [checkForm, setCheckForm] = useState([false, false, false, false]); + const [showAnimation, setShowAnimation] = useState(false); + const [robotCheck, setRobotCheck] = useState(false); + const fromRef = useRef(); + const [value, setValue] = useState({}); + useEffect(() => { + axios.get(api) // fetch api + .then((actualData) => { + setValue({ props: actualData.data }); + }) + .catch((error) => { + console.log(error); + }); + }, [api]); + const changeHandler = (e) => { // set input data + setValue((prev) => ({ ...prev, [e.target.name]: e.target.value })); + }; + const handleSubmit = (event) => { + event.preventDefault(); + setShowAnimation(true); + const interval = setInterval(() => { + setShowAnimation(false); + clearInterval(interval); + }, 500); + // check empty value + if (value.to === '') { setCheckForm([true, false, false, false]); return; } + if (value.subject === '') { setCheckForm([false, true, false, false]); return; } + if (value.message === '') { setCheckForm([false, false, true, false]); return; } + if (!robotCheck) { setCheckForm([false, false, false, true]); return; } + setCheckForm([false, false, false, false]); + axios // post + .post('https://jsonplaceholder.typicode.com/posts', { ...value, from: fromRef.current.value }) + .then((response) => { + console.log(response); + }) + .catch((error) => { + console.log(error); + }); + }; + return ( + + + Send A Private Message + + + from + + { + value.props?.from.map((ele) => ({ele})) + } + + + + + to + {' ' } + + (username, or /r/name for that subreddit`s moderators) + + + + { checkForm[0] && please enter a usernames } + + + subject + + { checkForm[1] && please enter a subject } + + + message +