From 54d909bc0861dc48ce66265a7ca3dfec1e46e0ae Mon Sep 17 00:00:00 2001 From: YousefElshabrawy Date: Thu, 11 Nov 2021 00:40:35 +0200 Subject: [PATCH 1/4] new post setup --- src/index.scss | 9 ++++++++- src/pages/New/New.js | 11 ++++++++--- 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/index.scss b/src/index.scss index a554bf4..ef38cb8 100644 --- a/src/index.scss +++ b/src/index.scss @@ -25,7 +25,14 @@ $color-black: #000; $default-font-size: 1.6rem; $default-font-color: $color-black; $default-font-weight: 500; - +//Post Colors +$bg-color-text: rgb(255, 255, 255); +$bg-color-photo: rgb(255, 73, 47); +$bg-color-quote: rgb(255, 138, 0); +$bg-color-link: rgb(0, 207, 53); +$bg-color-chat: rgb(0, 184, 255); +$bg-color-audio: rgb(124, 92, 255); +$bg-color-video: rgb(255, 98, 206); /*****************************************Useful Mixins******************************************/ @mixin clearfix { &::after { diff --git a/src/pages/New/New.js b/src/pages/New/New.js index 6c657bd..08f61fa 100644 --- a/src/pages/New/New.js +++ b/src/pages/New/New.js @@ -1,7 +1,12 @@ -import React from 'react'; - +import React, { Fragment } from 'react'; +import classes from './New.module.scss'; const New = () => { - return
New
; + return ( + +
+
Content
+
+ ); }; export default New; From 308d9c12d75f230b003bfe24fad8fdfa0c9a9f80 Mon Sep 17 00:00:00 2001 From: YousefElshabrawy Date: Thu, 11 Nov 2021 03:41:46 +0200 Subject: [PATCH 2/4] Updating the new post page --- src/pages/New/New.js | 61 ++++++++++++++++++-- src/pages/New/New.module.scss | 105 ++++++++++++++++++++++++++++++++++ 2 files changed, 162 insertions(+), 4 deletions(-) diff --git a/src/pages/New/New.js b/src/pages/New/New.js index 08f61fa..8e7335a 100644 --- a/src/pages/New/New.js +++ b/src/pages/New/New.js @@ -1,11 +1,64 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import classes from './New.module.scss'; +import { newPostIcons } from '../../components/UI/Icons'; +const { + IoText, + AiFillCamera, + ImQuotesLeft, + FaLink, + BsFillChatDotsFill, + ImHeadphones, + TiVideo, +} = newPostIcons; const New = () => { return ( - +
-
Content
- +
+
+
+ +
+ Text +
+
+
+ +
+ Photo +
+
+
+ +
+ Quote +
+
+
+ +
+ Link +
+
+
+ +
+ Chat +
+
+
+ +
+ Audio +
+
+
+ +
+ Video +
+
+
); }; diff --git a/src/pages/New/New.module.scss b/src/pages/New/New.module.scss index e69de29..cc645e0 100644 --- a/src/pages/New/New.module.scss +++ b/src/pages/New/New.module.scss @@ -0,0 +1,105 @@ +@import '../../index'; +.new { + color: $color-white; + width: 100vw; + height: 100vh; +} +.overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: -111; + background-color: rgb(0, 25, 53); +} +.content { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + div { + cursor: pointer; + &:hover > * { + transform: scale(1.1); + } + div { + width: 7.5rem; + height: 7.5rem; + border-radius: 50%; + margin-bottom: 0.5rem; + display: flex; + align-items: center; + justify-content: center; + color: rgb(0, 25, 53); + font-size: 2.5rem; + &:hover > * { + animation-name: rotate; + animation-duration: 0.8s; + animation-iteration-count: infinite; + animation-fill-mode: forwards; + } + } + span { + font-size: 1.4rem; + font-weight: 300; + display: block; + text-align: center; + } + } +} +.text { + margin-right: 2rem; + div { + background-color: $bg-color-text; + } +} +.photo { + margin-right: 2rem; + div { + background-color: $bg-color-photo; + } +} +.quote { + margin-right: 2rem; + div { + background-color: $bg-color-quote; + } +} +.link { + margin-right: 2rem; + div { + background-color: $bg-color-link; + } +} +.chat { + margin-right: 2rem; + div { + background-color: $bg-color-chat; + } +} +.audio { + margin-right: 2rem; + div { + background-color: $bg-color-audio; + } +} +.video { + div { + background-color: $bg-color-video; + } +} +@keyframes rotate { + 0% { + transform: rotate(0); + } + 33% { + transform: rotate(25deg); + } + 66% { + transform: rotate(25deg); + } + 100% { + transform: rotate(0deg); + } +} From c3f1dc2b88ccfdffc9685f12c742bb88e45af71c Mon Sep 17 00:00:00 2001 From: YousefElshabrawy Date: Fri, 19 Nov 2021 00:18:39 +0200 Subject: [PATCH 3/4] Working on the /new --- data/db.json | 34 +++++ data/posts.json | 16 ++ package-lock.json | 20 +++ src/App.js | 11 +- src/api/api.js | 4 +- src/assets/Images/.gitignore | 0 src/assets/Images/avatar.png | Bin 0 -> 3709 bytes src/components/Layouts/Explore/Explore.js | 2 +- src/components/NewPost/CloseButton.js | 16 ++ .../NewPost/CloseButton.module.scss | 10 ++ src/components/NewPost/FormCard.js | 39 +++++ src/components/NewPost/FormCard.module.scss | 56 +++++++ src/components/NewPost/PostButton.js | 30 ++++ src/components/NewPost/PostButton.module.scss | 54 +++++++ src/helpers/.gitignore | 0 src/helpers/isValidHttpUrl.js | 12 ++ src/index.scss | 8 +- src/pages/New/Audio/Audio.js | 82 +++++++++++ src/pages/New/Audio/Audio.module.scss | 37 +++++ src/pages/New/Chat/Chat.js | 66 +++++++++ src/pages/New/Chat/Chat.module.scss | 33 +++++ src/pages/New/Link/Link.js | 49 +++++++ src/pages/New/Link/Link.module.scss | 22 +++ src/pages/New/Link/Link.test.js | 17 +++ src/pages/New/New.js | 138 ++++++++++++------ src/pages/New/New.module.scss | 35 +++-- src/pages/New/Photo/Photo.js | 97 ++++++++++++ src/pages/New/Photo/Photo.module.scss | 69 +++++++++ src/pages/New/Quote/Quote.js | 71 +++++++++ src/pages/New/Quote/Quote.module.scss | 30 ++++ src/pages/New/Quote/Quote.test.js | 25 ++++ src/pages/New/Text/Text.js | 108 ++++++++++++++ src/pages/New/Text/Text.module.scss | 29 ++++ src/pages/New/Text/Text.test.js | 25 ++++ src/pages/New/Video/Video.js | 93 ++++++++++++ src/pages/New/Video/Video.module.scss | 70 +++++++++ 36 files changed, 1335 insertions(+), 73 deletions(-) create mode 100644 data/db.json create mode 100644 data/posts.json delete mode 100644 src/assets/Images/.gitignore create mode 100644 src/assets/Images/avatar.png create mode 100644 src/components/NewPost/CloseButton.js create mode 100644 src/components/NewPost/CloseButton.module.scss create mode 100644 src/components/NewPost/FormCard.js create mode 100644 src/components/NewPost/FormCard.module.scss create mode 100644 src/components/NewPost/PostButton.js create mode 100644 src/components/NewPost/PostButton.module.scss delete mode 100644 src/helpers/.gitignore create mode 100644 src/helpers/isValidHttpUrl.js create mode 100644 src/pages/New/Audio/Audio.js create mode 100644 src/pages/New/Audio/Audio.module.scss create mode 100644 src/pages/New/Chat/Chat.js create mode 100644 src/pages/New/Chat/Chat.module.scss create mode 100644 src/pages/New/Link/Link.js create mode 100644 src/pages/New/Link/Link.module.scss create mode 100644 src/pages/New/Link/Link.test.js create mode 100644 src/pages/New/Photo/Photo.js create mode 100644 src/pages/New/Photo/Photo.module.scss create mode 100644 src/pages/New/Quote/Quote.js create mode 100644 src/pages/New/Quote/Quote.module.scss create mode 100644 src/pages/New/Quote/Quote.test.js create mode 100644 src/pages/New/Text/Text.js create mode 100644 src/pages/New/Text/Text.module.scss create mode 100644 src/pages/New/Text/Text.test.js create mode 100644 src/pages/New/Video/Video.js create mode 100644 src/pages/New/Video/Video.module.scss diff --git a/data/db.json b/data/db.json new file mode 100644 index 0000000..70e45ce --- /dev/null +++ b/data/db.json @@ -0,0 +1,34 @@ +{ + "text": [ + { + "id": 6, + "title": "lkndfl", + "text": "", + "tags": "" + }, + { + "id": 8, + "title": "Taherrrr", + "text": "", + "tags": "" + }, + { + "id": 11, + "title": "Yousef Atef", + "text": "", + "tags": "" + }, + { + "id": 1, + "title": "d", + "text": "", + "tags": "" + } + ], + "quote": [], + "link": [], + "chat": [], + "photo": [], + "audio": [], + "video": [] +} \ No newline at end of file diff --git a/data/posts.json b/data/posts.json new file mode 100644 index 0000000..e0448da --- /dev/null +++ b/data/posts.json @@ -0,0 +1,16 @@ +{ + "posts": [ + { + "id": 1234567891234567, + "blog": { + "Standard API Short Blog Info object": "goes here" + }, + "content": [ + { + "type": "text", + "text": "Hello world!" + } + ] + } + ] +} diff --git a/package-lock.json b/package-lock.json index fd7d582..63b8837 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1212,6 +1212,16 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@editorjs/editorjs": { + "version": "2.22.2", + "resolved": "https://registry.npmjs.org/@editorjs/editorjs/-/editorjs-2.22.2.tgz", + "integrity": "sha512-rPCv7Z5LZebreQaaL4DZuWzoVGEqwB+P7BF1dsefGQNBmLyeLF412topeW2b6e+g4l1oQ7t75kCOACNTEyYYIA==", + "requires": { + "codex-notifier": "^1.1.2", + "codex-tooltip": "^1.0.2", + "nanoid": "^3.1.22" + } + }, "@eslint/eslintrc": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz", @@ -4393,6 +4403,16 @@ "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz", "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=" }, + "codex-notifier": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/codex-notifier/-/codex-notifier-1.1.2.tgz", + "integrity": "sha512-DCp6xe/LGueJ1N5sXEwcBc3r3PyVkEEDNWCVigfvywAkeXcZMk9K41a31tkEFBW0Ptlwji6/JlAb49E3Yrxbtg==" + }, + "codex-tooltip": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/codex-tooltip/-/codex-tooltip-1.0.2.tgz", + "integrity": "sha512-oC+Bu5X/zyhbPydgMSLWKoM/+vkJMqaLWu3Dt/jZgXS3MWK23INwC5DMBrVXZSufAFk0i0SUni38k9rLMyZn/w==" + }, "collect-v8-coverage": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz", diff --git a/src/App.js b/src/App.js index 10a3f2a..be41d06 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,7 @@ import React, { Fragment } from 'react'; import { Route, Switch, Redirect } from 'react-router-dom'; -import { - NotFound, - Dashboard, - Explore, - Inbox, - New, - LoginPage, -} from './pages/pages'; +import { NotFound, Dashboard, Explore, Inbox, New } from './pages/pages'; import { NavBar, ExploreLayout } from './components/Layouts/Layouts'; const App = () => { return ( @@ -31,7 +24,7 @@ const App = () => { - + diff --git a/src/api/api.js b/src/api/api.js index bda9425..a10383f 100644 --- a/src/api/api.js +++ b/src/api/api.js @@ -1,5 +1,5 @@ import axios from 'axios'; -const { REACT_APP_API_URL: url, REACT_APP_API_KEY: key } = process.env; +//const { REACT_APP_API_URL: url, REACT_APP_API_KEY: key } = process.env; export default axios.create({ - baseURL: `${url}`, + baseURL: 'http://localhost:3000', }); diff --git a/src/assets/Images/.gitignore b/src/assets/Images/.gitignore deleted file mode 100644 index e69de29..0000000 diff --git a/src/assets/Images/avatar.png b/src/assets/Images/avatar.png new file mode 100644 index 0000000000000000000000000000000000000000..aa80b892fa3c43779c380181ac774809c7a285e7 GIT binary patch literal 3709 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 literal 0 HcmV?d00001 diff --git a/src/components/Layouts/Explore/Explore.js b/src/components/Layouts/Explore/Explore.js index e8ea331..287b34b 100644 --- a/src/components/Layouts/Explore/Explore.js +++ b/src/components/Layouts/Explore/Explore.js @@ -1,4 +1,4 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import classes from './Explore.module.scss'; const Explore = (props) => { return
{props.children}
; diff --git a/src/components/NewPost/CloseButton.js b/src/components/NewPost/CloseButton.js new file mode 100644 index 0000000..2464184 --- /dev/null +++ b/src/components/NewPost/CloseButton.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { useHistory } from 'react-router-dom'; +import classes from './CloseButton.module.scss'; +const CloseButton = (props) => { + const history = useHistory(); + const closeClickHandler = () => { + history.push('/new'); + }; + return ( + + ); +}; + +export default CloseButton; diff --git a/src/components/NewPost/CloseButton.module.scss b/src/components/NewPost/CloseButton.module.scss new file mode 100644 index 0000000..f0faf47 --- /dev/null +++ b/src/components/NewPost/CloseButton.module.scss @@ -0,0 +1,10 @@ +@import '../../index'; +.close { + color: $color-white; + font-size: 1.3rem; + font-weight: 600; + padding: 0.6rem; + border-radius: 0.2rem; + cursor: pointer; + background-color: rgb(157, 166, 175); +} diff --git a/src/components/NewPost/FormCard.js b/src/components/NewPost/FormCard.js new file mode 100644 index 0000000..f58508b --- /dev/null +++ b/src/components/NewPost/FormCard.js @@ -0,0 +1,39 @@ +import React, { useState } from 'react'; +import classes from './FormCard.module.scss'; +import avatar from '../../assets/Images/avatar.png'; +import { MdSettings } from 'react-icons/md'; +import { IoIosArrowDown } from 'react-icons/io'; + +const FormCard = (props) => { + const [selectedOption, setSelectedOption] = useState('lyousefelshabrawy'); + const [showOptions, setShowOptions] = useState(false); + const toggleOptionsHandler = () => { + setShowOptions((showOptions) => !showOptions); + }; + const selectOptionHandler = (e) => { + setSelectedOption(e.target.getAttribute('value')); + }; + return ( +
+
+ avatar +
+
+
+
+ {selectedOption} + {showOptions && ( +
    +
  • lyousefelshabrawy
  • +
  • llyousefelshabrawy
  • +
+ )} +
+ +
+ {props.children} +
+
+ ); +}; +export default FormCard; diff --git a/src/components/NewPost/FormCard.module.scss b/src/components/NewPost/FormCard.module.scss new file mode 100644 index 0000000..3709d80 --- /dev/null +++ b/src/components/NewPost/FormCard.module.scss @@ -0,0 +1,56 @@ +@import '../../index'; +.text { + color: rgb(89, 89, 89); + display: flex; +} +.avatar { + margin-right: 3rem; + border-radius: 0.3rem; + width: 6rem; + height: 6rem; + border-radius: 0.3rem; + overflow: hidden; +} +.form { + background-color: $color-white; + border-radius: 0.3rem; + padding: 1.5rem; + min-height: 14rem; + min-width: 50rem; + header { + display: flex; + justify-content: space-between; + font-weight: 500; + margin-bottom: 1.5rem; + div { + color: $color-black; + font-size: 1.6rem; + cursor: pointer; + display: flex; + align-items: center; + position: relative; + svg { + margin-left: 0.5rem; + margin-bottom: -0.5rem; + } + ul { + color: $color-black; + width: 20rem; + font-size: 1.4rem; + background-color: $color-white; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); + position: absolute; + left: 0%; + top: 110%; + li { + padding: 0.8rem; + &:hover { + background-color: #eee; + } + } + } + } + } +} diff --git a/src/components/NewPost/PostButton.js b/src/components/NewPost/PostButton.js new file mode 100644 index 0000000..fca11e4 --- /dev/null +++ b/src/components/NewPost/PostButton.js @@ -0,0 +1,30 @@ +import React, { useState } from 'react'; +import { IoIosArrowDown } from 'react-icons/io'; +import classes from './PostButton.module.scss'; +const PostButton = (props) => { + const [selectedOption, setSelectedOption] = useState('Post'); + const [showOptions, setShowOptions] = useState(false); + const toggleOptionsHandler = () => { + setShowOptions((showOptions) => !showOptions); + }; + const selectOptionHandler = (e) => { + setSelectedOption(e.target.getAttribute('value')); + }; + return ( +
+ +
+ + {showOptions && ( +
    +
  • Post now
  • +
  • Save as draft
  • +
  • Post privately
  • +
+ )} +
+
+ ); +}; + +export default PostButton; diff --git a/src/components/NewPost/PostButton.module.scss b/src/components/NewPost/PostButton.module.scss new file mode 100644 index 0000000..0fcbe8f --- /dev/null +++ b/src/components/NewPost/PostButton.module.scss @@ -0,0 +1,54 @@ +@import '../../index'; +.post { + color: $color-white; + font-size: 1.3rem; + font-weight: 600; + border-radius: 0.2rem; + background-color: rgb(0, 184, 255); + display: flex; + position: relative; + + button { + padding: 0.6rem; + border-radius: 0.2rem; + cursor: pointer; + background-color: inherit; + font-size: inherit; + color: inherit; + font-weight: inherit; + border-right: 1.5px solid rgba($color-white, 0.6); + &:disabled { + cursor: default; + color: rgba($color-white, 0.6); + } + } + div { + padding: 0 0.6rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + &:active { + background-color: rgb(33, 129, 167); + } + ul { + color: $color-black; + width: 12rem; + font-weight: 400; + font-size: 1.4rem; + background-color: $color-white; + border: 1px solid rgba(0, 0, 0, 0.2); + border-radius: 0.3rem; + box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); + position: absolute; + left: 0%; + top: 110%; + li { + padding: 0.6rem; + &:hover { + background-color: #eee; + } + } + } + } +} diff --git a/src/helpers/.gitignore b/src/helpers/.gitignore deleted file mode 100644 index e69de29..0000000 diff --git a/src/helpers/isValidHttpUrl.js b/src/helpers/isValidHttpUrl.js new file mode 100644 index 0000000..8b54233 --- /dev/null +++ b/src/helpers/isValidHttpUrl.js @@ -0,0 +1,12 @@ +const isValidHttpUrl = (string) => { + let url; + + try { + url = new URL(string); + } catch (_) { + return false; + } + + return url.protocol === 'http:' || url.protocol === 'https:'; +}; +export default isValidHttpUrl; diff --git a/src/index.scss b/src/index.scss index ef38cb8..a195a09 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,10 +1,10 @@ -// TODOs -// Get the real fonts and colors or of the real tumblr +// TODO: Get the real fonts and colors or of the real tumblr + @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap'); /*****************************************Variables********************************************/ //RGB Colors -$color-primary: rgb(28, 231, 131); +$color-primary: rgb(0, 25, 53); $color-primary-light: lighten($color-primary, 0.15); $color-primary-dark: darken($color-primary, 0.15); $color-secondary: #ffb900; @@ -130,12 +130,14 @@ a { outline: none; } } + button { border: none; &:focus { outline: none; } } + ul { list-style-type: none; } diff --git a/src/pages/New/Audio/Audio.js b/src/pages/New/Audio/Audio.js new file mode 100644 index 0000000..cff7bb8 --- /dev/null +++ b/src/pages/New/Audio/Audio.js @@ -0,0 +1,82 @@ +import React, { useState, useEffect } from 'react'; +import classes from './Audio.module.scss'; +import { ImHeadphones } from 'react-icons/im'; +import api from '../../../api/api'; +import FormCard from '../../../components/NewPost/FormCard'; +import PostButton from '../../../components/NewPost/PostButton'; +import CloseButton from '../../../components/NewPost/CloseButton'; +import isValidHttpUrl from '../../../helpers/isValidHttpUrl'; + +const Audio = (props) => { + const [uploadedAudio, setUploadedAudio] = useState(null); + const [link, setLink] = useState(''); + const [formIsValid, setFormIsValid] = useState(false); + //To know the source of the Audio + const [audioFromPC, setAudioFromPC] = useState(false); + + useEffect(() => { + if (uploadedAudio || isValidHttpUrl(link)) setFormIsValid(true); + else setFormIsValid(false); + }, [uploadedAudio, link]); + const audioChangeHandler = (e) => { + setUploadedAudio(e.target.files[0]); + }; + const linkChangeHandler = (e) => { + setLink(e.target.value); + }; + const formSubmitHandler = async (e) => { + console.log(uploadedAudio); + //Submission will depend on the source of the Audio But how do you know the source ??? + e.preventDefault(); + if (!formIsValid) return; + try { + //Here audioFromPC is not gurentee that it's from the pc, + if (audioFromPC) { + //file + const fd = new FormData(); + fd.append('id', 7); + fd.append('audio', uploadedAudio); + // console.log(Array.from(fd)); + // await api.post('/photo', fd); + console.log(JSON.stringify(Array.from(fd))); + await api.post('/photo', { photo: JSON.stringify(Array.from(fd)) }); + } else { + //link + } + } catch (err) { + if (err.response) { + console.log(err.response); + } else { + console.log(err); + } + } + setUploadedAudio(null); + setLink(''); + }; + return ( + +
+
+ +
+ + +
+
+
+ + +
+
+
+ ); +}; +export default Audio; diff --git a/src/pages/New/Audio/Audio.module.scss b/src/pages/New/Audio/Audio.module.scss new file mode 100644 index 0000000..35321a9 --- /dev/null +++ b/src/pages/New/Audio/Audio.module.scss @@ -0,0 +1,37 @@ +@import '../../../index.scss'; + +.form { + display: flex; + flex-direction: column; + + .control { + display: flex; + justify-content: space-between; + align-items: center; + input { + outline: none; + border: none; + margin: 1.5rem 0; + font-size: 1.6rem; + width: 95%; + } + .icon { + position: relative; + width: 5%; + input { + position: absolute; + top: -50%; + left: 0; + width: 100%; + opacity: 0; + } + } + } + .actions { + border-top: 1px solid rgb(233, 232, 232); + padding-top: 1rem; + display: flex; + justify-content: space-between; + align-items: center; + } +} diff --git a/src/pages/New/Chat/Chat.js b/src/pages/New/Chat/Chat.js new file mode 100644 index 0000000..611e5e8 --- /dev/null +++ b/src/pages/New/Chat/Chat.js @@ -0,0 +1,66 @@ +import React, { useState, useEffect } from 'react'; +import classes from './Chat.module.scss'; +import FormCard from '../../../components/NewPost/FormCard'; +import PostButton from '../../../components/NewPost/PostButton'; +import CloseButton from '../../../components/NewPost/CloseButton'; +import api from '../../../api/api'; +const Chat = (props) => { + const [title, setTitle] = useState(''); + const [chat, setChat] = useState('How are you. mohamed: I,m fine.'); + const [tags, setTags] = useState(''); + const [formIsValid, setFormIsValid] = useState(false); + useEffect(() => { + if (chat.trim() === '') setFormIsValid(false); + else setFormIsValid(true); + }, [chat]); + const titleChangeHandler = (e) => { + setTitle(e.target.value); + }; + const chatChangeHandler = (e) => { + setChat(e.target.value); + }; + const tagsChangeHandler = (e) => { + setTags(e.target.value); + }; + const formSubmitHandler = async (e) => { + e.preventDefault(); + if (!formIsValid) return; + try { + await api.post('/chat', { id: chat.length, title, chat, tags }); + console.log('chat is added'); + } catch (err) { + if (err.response) { + console.log('NOT in the 200 range'); + } else { + console.log('error'); + } + } + setTitle(''); + setChat(''); + setTags(''); + }; + return ( + +
+ +