From 3ec653afda9408c63b668150b341120724ef9c2e Mon Sep 17 00:00:00 2001 From: vrushali1398 Date: Fri, 5 Jul 2024 12:11:45 +0530 Subject: [PATCH] assignment --- package-lock.json | 121 +++++++++++++++++++++++++++++---- package.json | 4 +- src/common/FormItem.jsx | 17 +++++ src/main.jsx | 4 +- src/pages/FormOne.jsx | 30 +++++++++ src/pages/FormThree.jsx | 72 ++++++++++++++++++++ src/pages/FormTwo.jsx | 60 +++++++++++++++++ src/pages/Home.css | 35 ++++++++++ src/pages/Home.jsx | 146 ++++++++++++++++++++++++++++++++++------ src/pages/PostCard.jsx | 29 ++++++++ src/pages/Posts.jsx | 69 ++++++++++--------- src/pages/Root.jsx | 4 +- 12 files changed, 522 insertions(+), 69 deletions(-) create mode 100644 src/common/FormItem.jsx create mode 100644 src/pages/FormOne.jsx create mode 100644 src/pages/FormThree.jsx create mode 100644 src/pages/FormTwo.jsx create mode 100644 src/pages/Home.css create mode 100644 src/pages/PostCard.jsx diff --git a/package-lock.json b/package-lock.json index b9b1e5b..ecfc035 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "react-interview-template", "version": "0.0.0", "dependencies": { + "formik": "^2.4.6", "localforage": "^1.10.0", "lodash": "^4.17.21", "match-sorter": "^6.3.1", @@ -15,7 +16,8 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.20.1", "sort-by": "^1.2.0", - "uuid": "^9.0.1" + "uuid": "^9.0.1", + "yup": "^1.4.0" }, "devDependencies": { "@faker-js/faker": "^8.3.1", @@ -1292,6 +1294,15 @@ "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==", "dev": true }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.5", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", + "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/js-levenshtein": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@types/js-levenshtein/-/js-levenshtein-1.1.3.tgz", @@ -1301,14 +1312,12 @@ "node_modules/@types/prop-types": { "version": "15.7.11", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==", - "dev": true + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" }, "node_modules/@types/react": { "version": "18.2.42", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz", "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==", - "dev": true, "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -1327,8 +1336,7 @@ "node_modules/@types/scheduler": { "version": "0.16.8", "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==", - "dev": true + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" }, "node_modules/@types/statuses": { "version": "2.0.4", @@ -2088,8 +2096,7 @@ "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", - "dev": true + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/debug": { "version": "4.3.4", @@ -2114,6 +2121,14 @@ "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", "dev": true }, + "node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/default-browser": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-4.0.0.tgz", @@ -2934,6 +2949,30 @@ "is-callable": "^1.1.3" } }, + "node_modules/formik": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz", + "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==", + "funding": [ + { + "type": "individual", + "url": "https://opencollective.com/formik" + } + ], + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.1", + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/fraction.js": { "version": "4.3.7", "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", @@ -3234,6 +3273,14 @@ "integrity": "sha512-EWGTfnTqAO2L/j5HZgoM/3z82L7necsJ0pO9Tp0X1wil3PDLrkypTBRgVO2ExehEEvUycejZD3FuRaXpZZc3kw==", "dev": true }, + "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", + "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/human-signals": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-4.3.1.tgz", @@ -4064,6 +4111,11 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -5151,6 +5203,11 @@ "react-is": "^16.13.1" } }, + "node_modules/property-expr": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", + "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -5203,11 +5260,15 @@ "react": "^18.2.0" } }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==" + }, "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==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-refresh": { "version": "0.14.0", @@ -6070,6 +6131,16 @@ "integrity": "sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==", "dev": true }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" + }, "node_modules/titleize": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/titleize/-/titleize-3.0.0.tgz", @@ -6115,6 +6186,11 @@ "node": ">=8.0" } }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==" + }, "node_modules/ts-interface-checker": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", @@ -6124,8 +6200,7 @@ "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "dev": true + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/type-check": { "version": "0.4.0", @@ -6567,6 +6642,28 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.4.0.tgz", + "integrity": "sha512-wPbgkJRCqIf+OHyiTBQoJiP5PFuAXaWiJK6AmYkzQAh5/c2K9hzSApBZG5wV9KoKSePF7sAxmNSvh/13YHkFDg==", + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } + }, + "node_modules/yup/node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } } } } diff --git a/package.json b/package.json index a1c9bb2..54b7f59 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "preview": "vite preview" }, "dependencies": { + "formik": "^2.4.6", "localforage": "^1.10.0", "lodash": "^4.17.21", "match-sorter": "^6.3.1", @@ -19,7 +20,8 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.20.1", "sort-by": "^1.2.0", - "uuid": "^9.0.1" + "uuid": "^9.0.1", + "yup": "^1.4.0" }, "devDependencies": { "@faker-js/faker": "^8.3.1", diff --git a/src/common/FormItem.jsx b/src/common/FormItem.jsx new file mode 100644 index 0000000..d0917aa --- /dev/null +++ b/src/common/FormItem.jsx @@ -0,0 +1,17 @@ + + + + + +const FormItem = ({ label, children, errorMessage, inValid }) => { + + return ( +
+
{label}
+ {children} + {inValid &&
{errorMessage}
} +
+ ) +} + +export default FormItem \ No newline at end of file diff --git a/src/main.jsx b/src/main.jsx index e54735e..acf4020 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -17,8 +17,8 @@ async function enableMocking() { enableMocking().then(() => { ReactDOM.createRoot(document.getElementById("root")).render( - + - , + ); }); diff --git a/src/pages/FormOne.jsx b/src/pages/FormOne.jsx new file mode 100644 index 0000000..c0ca25d --- /dev/null +++ b/src/pages/FormOne.jsx @@ -0,0 +1,30 @@ +import { Icon } from "@iconify/react"; +import { Field, Form, Formik } from "formik"; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import FormItem from "../common/FormItem"; + + +const FormOne = ({ formikProps }) => { + console.log(formikProps) + const { values, touched, errors } = formikProps + + + + return ( +
+ + + {({ field }) => } + + + + + {({ field }) => } + + +
+ ) +} + +export default FormOne \ No newline at end of file diff --git a/src/pages/FormThree.jsx b/src/pages/FormThree.jsx new file mode 100644 index 0000000..56efdfb --- /dev/null +++ b/src/pages/FormThree.jsx @@ -0,0 +1,72 @@ +import { Icon } from "@iconify/react"; +import { Field, Form, Formik } from "formik"; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import FormItem from "../common/FormItem"; + +const Number = /^[0-9]+$/ + + + + +const FormThree = ({ formikProps }) => { + const { values, touched, errors, handleBlur } = formikProps + return ( + +
+ + + {({ field, form }) => } + + + + + {({ field, form }) => { + + if (e.target.value === "" || Number.test(e.target.value)) { + + form.setFieldValue(field.name, e.target.value) + } + }} + onBlur={handleBlur} />} + + + + + {({ field, form }) => (
+ { form.setFieldValue(field.name, e.target.checked);}} + /> + +
)} + + + + + +
+ + ) + + +} + + + +export default FormThree \ No newline at end of file diff --git a/src/pages/FormTwo.jsx b/src/pages/FormTwo.jsx new file mode 100644 index 0000000..4f064e4 --- /dev/null +++ b/src/pages/FormTwo.jsx @@ -0,0 +1,60 @@ +import { Icon } from "@iconify/react"; +import { Field, Form, Formik } from "formik"; +import { useState } from "react"; +import { Link } from "react-router-dom"; +import FormItem from "../common/FormItem"; + +const CHARREGEX = /^[a-zA-Z]+$/ + + + + +const FormTwo = ({ formikProps }) => { + const { values, touched, errors, setFieldValue, handleBlur, } = formikProps + console.log(values) + return ( +
+ + + {({ field, form }) => + ( { + + if (e.target.value === "" || CHARREGEX.test(e.target.value)) { + + form.setFieldValue(field.name, e.target.value) + } + }} + onBlur={handleBlur} + value={values.firstName} + />)} + + + + + {({ field, form }) => { + + if (e.target.value === "" || CHARREGEX.test(e.target.value)) { + + form.setFieldValue(field.name, e.target.value) + } + }} + onBlur={handleBlur} />} + + + + + {({ field }) => } + + + + +
+ ) + + + +} + +export default FormTwo \ No newline at end of file diff --git a/src/pages/Home.css b/src/pages/Home.css new file mode 100644 index 0000000..8650078 --- /dev/null +++ b/src/pages/Home.css @@ -0,0 +1,35 @@ +button{ + background-color: #F8C16F !important; + color: #4BB7D4 !important; + padding: 2px 10px !important; + border-radius: 4px; + font-size: small !important; +} +button:disabled{ + background-color: #f1e8d9 !important; + + +} + +input{ + height: 30px; + border: 1px solid white; + border-radius: 4px; + padding: 2px 5px !important; + width: 100%; +} +input:focus { + border-color: brown; + outline-color: brown; +} + +select{ + height: 30px; + border: 1px solid white; + border-radius: 4px; + padding: 2px 5px !important; + width: 100%; +} + + + diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 16836af..cef1086 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,27 +1,131 @@ -import { Icon } from "@iconify/react"; -import { Link } from "react-router-dom"; + +import { Form, Formik } from "formik"; +import React, { useState } from "react"; +import { Link, useNavigate } from "react-router-dom"; +import FormItem from "../common/FormItem"; +import "../pages/Home.css" +import FormOne from "./FormOne"; +import FormThree from "./FormThree"; +import FormTwo from "./FormTwo"; +import * as Yup from 'yup' + + +const validationSchemaOne = Yup.object({ + "emailId": Yup.string().required('Please Enter The Email Id').matches(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/, "Please Enter Valid Email Addresss"), + "password": Yup.string().required('Please Enter The Password').matches(/^(?=.*[A-Z].*[A-Z])(?=.*[a-z].*[a-z])(?=.*\d.*\d)(?=.*[!@#$%^&*()_+{}|:<>?~=-]).{8,}$/, "Please Enter Valid Password"), +}); +const validationSchemaTwo = Yup.object({ + "address": Yup.string().required('Please Enter Address').matches(/^[a-zA-Z0-9., ]{8,}$/, 'Please Enter Valid Address'), + "firstName": Yup.string().required('Please Enter First Name'), + "lastName": Yup.string().optional(), + +}); +const validationSchemaThree = Yup.object({ + "countryCode": Yup.string().required('Please Select Country Code'), + "phoneNumber": Yup.string().required('Please Enter Phone Number').matches(/^[6789]\d{9}$/, "Please Enter Valid Phone Number"), + "terms": Yup.boolean().required("It Is Required") +}); + +const initialValues = { + "emailId": "", + "password": "", + "firstName": "", + "lastName": "", + "address": "", + "countryCode": "", + "phoneNumber": "", + 'terms':'' +} + const Home = () => { + const [activeForm, setActiveForm] = useState(1) + const [submitInProgress,setSubmitInProgress]=useState(false) + const navigate=useNavigate() + + const renderForm = { + 1: , + 3: , + 2: , + } + + const validationSchema = { + 1: validationSchemaOne, + 2: validationSchemaTwo, + 3: validationSchemaThree + } + + + const onSubmit = async (values,) => { + try { + setSubmitInProgress(true) + const payload=Object.assign({},values) + delete payload.terms + const response = await fetch('https://codebuddy.review/submit', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(payload) + }); + const responseData = await response.json(); + navigate('/posts') + + + } catch (error) { + console.log(error) + } + } + + + return ( -
-

- - Home -

- -

Welcome to the home page!

- -

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Natus eos quis iure unde incidunt? - Hic, quisquam. Voluptate placeat officiis corporis dolores ea unde maxime, sed nulla cumque - amet quam aliquam quas incidunt debitis sit aut a soluta quisquam repellat dignissimos qui. - Perspiciatis similique quaerat reiciendis nam aliquam? -

- - - Posts - - +
+
+
+
0 ? 'bg-red-300' : 'bg-white'} h-1 rounded-md`}>
+
1 ? 'bg-red-300' : 'bg-white'} h-1 rounded-md`}>
+
2 ? 'bg-red-300' : 'bg-white'} h-1 rounded-md`}>
+
+
+ + {/* {renderForm[activeForm]} */} + { + + if (activeForm == 3) { + + onSubmit(values).then(() => { setSubmitInProgress(true)}).catch(() => {setSubmitInProgress(true)}) + + } else { + setActiveForm(prev => prev + 1) + } + }} + > + {(formikProps) => ( +
+
+ {React.cloneElement(renderForm[activeForm], { formikProps })} +
+ {activeForm != 1 && } + {activeForm != 3&&} + {activeForm == 3 && } +
+
+
+ )} + + + +
); }; diff --git a/src/pages/PostCard.jsx b/src/pages/PostCard.jsx new file mode 100644 index 0000000..5244ea8 --- /dev/null +++ b/src/pages/PostCard.jsx @@ -0,0 +1,29 @@ + + + + + + + +const PostCard = ({ item }) => { + + return ( +
+
+ Food Image +
+
{item?.firstName} {item?.lastName}
+

+ {item?.writeup} +

+
+
+ Avatar +
+
+
+ ) +} + + +export default PostCard \ No newline at end of file diff --git a/src/pages/Posts.jsx b/src/pages/Posts.jsx index f74e4b3..ef83bd5 100644 --- a/src/pages/Posts.jsx +++ b/src/pages/Posts.jsx @@ -1,40 +1,47 @@ import { Icon } from "@iconify/react"; +import { useState } from "react"; +import { useEffect } from "react"; import { Link } from "react-router-dom"; +import PostCard from "./PostCard"; const Posts = () => { + const [list, setList] = useState([]) + + + + const getList = async () => { + try { + const response = await fetch('https://codebuddy.review/posts', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + }, + + }); + const { data } = await response.json(); + setList(data) + } catch (error) { + setList([]) + console.log(error) + } + } + + useEffect(() => { + getList().then(() => { }).catch(() => { }) + }, []) + + + + return ( -
+
+

Posts

- - - Back to Home - - -
-
-

Post 1

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptatem, quibusdam, - quos, voluptatum voluptas quod quas voluptates quia doloribus nobis voluptatibus. Quam, - voluptate voluptatum. Quod, voluptate? Quisquam, voluptate voluptatum. -

-
-
-

Post 2

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptatem, quibusdam, - quos, voluptatum voluptas quod quas voluptates quia doloribus nobis voluptatibus. Quam, - voluptate voluptatum. Quod, voluptate? Quisquam, voluptate voluptatum. -

-
-
-

Post 3

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptatem, quibusdam, - quos, voluptatum voluptas quod quas voluptates quia doloribus nobis voluptatibus. Quam, - voluptate voluptatum. Quod, voluptate? Quisquam, voluptate voluptatum. -

-
+
+ {list?.map(one => ( + + + ))}
); diff --git a/src/pages/Root.jsx b/src/pages/Root.jsx index ca81531..57e1654 100644 --- a/src/pages/Root.jsx +++ b/src/pages/Root.jsx @@ -2,8 +2,8 @@ import { Outlet } from "react-router-dom"; const Root = () => { return ( -
-
+
+