From 77c3f577444ceeb0544bfe0874db2b8327a88af8 Mon Sep 17 00:00:00 2001 From: edwin6666 Date: Mon, 17 Jul 2023 11:26:00 -0400 Subject: [PATCH 1/7] changing the view order of posts --- src/App.js | 3 ++- src/components/Navbar/Navbar.jsx | 2 +- src/context/postContext.js | 1 + src/pages/Contact.js | 1 - src/pages/HomePageUser.js | 37 +++++++++++++++----------------- src/pages/PostForm.js | 2 +- 6 files changed, 22 insertions(+), 24 deletions(-) diff --git a/src/App.js b/src/App.js index 421cfd1..c06f576 100644 --- a/src/App.js +++ b/src/App.js @@ -9,10 +9,11 @@ import { HomePageUser } from "./pages/HomePageUser"; import Navbar from "./components/Navbar/Navbar"; import { useLocation } from "react-router-dom"; import ContactForm from "./pages/Contact"; + function App() { const location = useLocation(); const isLoginPage = location.pathname === "/login"; - + return (
{ {!isLoginPage && (
setOpen(false)}> -
diff --git a/src/context/postContext.js b/src/context/postContext.js index c8d7d45..2a422e8 100644 --- a/src/context/postContext.js +++ b/src/context/postContext.js @@ -44,6 +44,7 @@ export const PostProvider = ({ children }) => { try { const res = await getPostRequest(id); return res.data; + } catch (error) { console.error(error); } diff --git a/src/pages/Contact.js b/src/pages/Contact.js index 8514d62..14daccd 100644 --- a/src/pages/Contact.js +++ b/src/pages/Contact.js @@ -1,5 +1,4 @@ import { useState } from "react"; - const ContactForm = () => { const [formValues, setFormValues] = useState({ name: "", diff --git a/src/pages/HomePageUser.js b/src/pages/HomePageUser.js index 9e90c75..e3ffa63 100644 --- a/src/pages/HomePageUser.js +++ b/src/pages/HomePageUser.js @@ -1,29 +1,26 @@ import { usePosts } from "../context/postContext"; -import {VscEmptyWindow} from 'react-icons/vsc' - +import { VscEmptyWindow } from 'react-icons/vsc' import { PostCardUser } from "../components/PostCardUser"; export function HomePageUser() { + const { posts } = usePosts(); - const { posts } = usePosts() - - if (posts.length === 0 ) - return (
- -

there are not posts

-
- ) + if (posts.length === 0) + return ( +
+ +

There are no posts

+
+ ); - return ( - - + const reversedPosts = [...posts].reverse(); -
- {posts.map(post => ( - - ))} -
- - ); + return ( +
+ {reversedPosts.map(post => ( + + ))} +
+ ); } \ No newline at end of file diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js index 283f8c5..5ed662e 100644 --- a/src/pages/PostForm.js +++ b/src/pages/PostForm.js @@ -28,7 +28,7 @@ export function PostForm() { return (
-
+

New Post

From 96b2483cca03baa4e38f0b3dcff10c4b55f1ceeb Mon Sep 17 00:00:00 2001 From: edwin6666 Date: Sun, 23 Jul 2023 17:19:42 -0400 Subject: [PATCH 2/7] Feat carousel to news --- package-lock.json | 288 +++++++++++++++++++++++++++ package.json | 1 + src/App.js | 5 +- src/api/posts.js | 2 +- src/components/Carousel/Carousel.jsx | 80 ++++++++ src/components/Login/Login.jsx | 8 +- src/components/PostCard.jsx | 5 +- src/components/PostCardUser.jsx | 15 +- src/components/signup/Signup.jsx | 2 +- src/pages/Contact.js | 2 +- src/pages/HomePage.js | 29 +-- src/pages/PostForm.js | 3 +- 12 files changed, 407 insertions(+), 33 deletions(-) create mode 100644 src/components/Carousel/Carousel.jsx diff --git a/package-lock.json b/package-lock.json index 96947db..ffcb427 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", + "@material-tailwind/react": "^2.0.6", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -2324,6 +2325,21 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -2376,6 +2392,45 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.3.1.tgz", + "integrity": "sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==" + }, + "node_modules/@floating-ui/dom": { + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.4.5.tgz", + "integrity": "sha512-96KnRWkRnuBSSFbj0sFGwwOUd8EkiecINVl0O9wiZlZ64EkpyAOG3Xc2vKKNJmru0Z7RqWNymA+6b8OZqjgyyw==", + "dependencies": { + "@floating-ui/core": "^1.3.1" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.2.tgz", + "integrity": "sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==", + "dependencies": { + "@floating-ui/react-dom": "^1.3.0", + "aria-hidden": "^1.1.3", + "tabbable": "^6.0.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz", + "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==", + "dependencies": { + "@floating-ui/dom": "^1.2.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@fortawesome/fontawesome-common-types": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz", @@ -2433,6 +2488,14 @@ "react": ">=16.3" } }, + "node_modules/@heroicons/react": { + "version": "2.0.18", + "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz", + "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==", + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz", @@ -3306,6 +3369,118 @@ "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@material-tailwind/react": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/@material-tailwind/react/-/react-2.0.6.tgz", + "integrity": "sha512-aT2BZd9AAlwuFiuA29FQbayK4RmPPHs5Q3RlB9cnTtpOHXz6v32i3YC90bh1fINpixFeKftJeO7YzeaukX5zsQ==", + "dependencies": { + "@floating-ui/react": "^0.19.0", + "@heroicons/react": "^2.0.13", + "classnames": "^2.3.2", + "deepmerge": "^4.2.2", + "framer-motion": "^6.5.1", + "material-ripple-effects": "^2.0.1", + "prop-types": "^15.8.1", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "tailwind-merge": "^1.8.1" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, + "node_modules/@material-tailwind/react/node_modules/deepmerge": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", + "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@motionone/animation": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz", + "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==", + "dependencies": { + "@motionone/easing": "^10.15.1", + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/animation/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, + "node_modules/@motionone/dom": { + "version": "10.12.0", + "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz", + "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==", + "dependencies": { + "@motionone/animation": "^10.12.0", + "@motionone/generators": "^10.12.0", + "@motionone/types": "^10.12.0", + "@motionone/utils": "^10.12.0", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/dom/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, + "node_modules/@motionone/easing": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz", + "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==", + "dependencies": { + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/easing/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, + "node_modules/@motionone/generators": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz", + "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==", + "dependencies": { + "@motionone/types": "^10.15.1", + "@motionone/utils": "^10.15.1", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/generators/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, + "node_modules/@motionone/types": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz", + "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA==" + }, + "node_modules/@motionone/utils": { + "version": "10.15.1", + "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz", + "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==", + "dependencies": { + "@motionone/types": "^10.15.1", + "hey-listen": "^1.0.8", + "tslib": "^2.3.1" + } + }, + "node_modules/@motionone/utils/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -4936,6 +5111,22 @@ "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, + "node_modules/aria-hidden": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz", + "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==", + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/aria-hidden/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, "node_modules/aria-query": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", @@ -5771,6 +5962,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -8301,6 +8497,44 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/framer-motion": { + "version": "6.5.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz", + "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==", + "dependencies": { + "@motionone/dom": "10.12.0", + "framesync": "6.0.1", + "hey-listen": "^1.0.8", + "popmotion": "11.0.3", + "style-value-types": "5.0.0", + "tslib": "^2.1.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": ">=16.8 || ^17.0.0 || ^18.0.0", + "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/framer-motion/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, + "node_modules/framesync": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz", + "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/framesync/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, "node_modules/fresh": { "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", @@ -8701,6 +8935,11 @@ "he": "bin/he" } }, + "node_modules/hey-listen": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz", + "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==" + }, "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", @@ -11878,6 +12117,11 @@ "tmpl": "1.0.5" } }, + "node_modules/material-ripple-effects": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/material-ripple-effects/-/material-ripple-effects-2.0.1.tgz", + "integrity": "sha512-hHlUkZAuXbP94lu02VgrPidbZ3hBtgXBtjlwR8APNqOIgDZMV8MCIcsclL8FmGJQHvnORyvoQgC965vPsiyXLQ==" + }, "node_modules/mdn-data": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz", @@ -12788,6 +13032,22 @@ "node": ">=4" } }, + "node_modules/popmotion": { + "version": "11.0.3", + "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz", + "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==", + "dependencies": { + "framesync": "6.0.1", + "hey-listen": "^1.0.8", + "style-value-types": "5.0.0", + "tslib": "^2.1.0" + } + }, + "node_modules/popmotion/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, "node_modules/postcss": { "version": "8.4.24", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", @@ -15587,6 +15847,20 @@ "webpack": "^5.0.0" } }, + "node_modules/style-value-types": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz", + "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==", + "dependencies": { + "hey-listen": "^1.0.8", + "tslib": "^2.1.0" + } + }, + "node_modules/style-value-types/node_modules/tslib": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz", + "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==" + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.1.tgz", @@ -15858,6 +16132,20 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, + "node_modules/tailwind-merge": { + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz", + "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/dcastil" + } + }, "node_modules/tailwindcss": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz", diff --git a/package.json b/package.json index 1b69b34..aa785e9 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@fortawesome/free-brands-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", + "@material-tailwind/react": "^2.0.6", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/src/App.js b/src/App.js index c06f576..f4c7d61 100644 --- a/src/App.js +++ b/src/App.js @@ -9,7 +9,7 @@ import { HomePageUser } from "./pages/HomePageUser"; import Navbar from "./components/Navbar/Navbar"; import { useLocation } from "react-router-dom"; import ContactForm from "./pages/Contact"; - +import {Carousel} from "./components/Carousel/Carousel"; function App() { const location = useLocation(); const isLoginPage = location.pathname === "/login"; @@ -26,13 +26,14 @@ function App() { > + {/* Public routes */} } /> } /> } /> } /> - + {/* Private routes */} }> } /> diff --git a/src/api/posts.js b/src/api/posts.js index 428e75b..de3ce90 100644 --- a/src/api/posts.js +++ b/src/api/posts.js @@ -13,7 +13,7 @@ export const createPostRequest = async (post, token) => { return await axios.post("http://localhost:4000/api/posts", form, { headers: { "Content-Type": "multipart/form-data", - // eslint-disable-next-line no-template-curly-in-string + Authorization: `Bearer ${token}`, }, }); diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx new file mode 100644 index 0000000..174c944 --- /dev/null +++ b/src/components/Carousel/Carousel.jsx @@ -0,0 +1,80 @@ +import React, { useState } from 'react'; +import { BsChevronCompactLeft, BsChevronCompactRight } from 'react-icons/bs'; +import { RxDotFilled } from 'react-icons/rx'; +import { useLocation } from 'react-router-dom'; +export function Carousel() { + const slides = [ + { + url: 'https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2620&q=80', + }, + { + url: 'https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80', + }, + { + url: 'https://images.unsplash.com/photo-1661961112951-f2bfd1f253ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2672&q=80', + }, + + { + url: 'https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80', + }, + { + url: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2671&q=80', + }, + ]; + + + + + const [currentIndex, setCurrentIndex] = useState(0); + + const prevSlide = () => { + const isFirstSlide = currentIndex === 0; + const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1; + setCurrentIndex(newIndex); + }; + + const nextSlide = () => { + const isLastSlide = currentIndex === slides.length - 1; + const newIndex = isLastSlide ? 0 : currentIndex + 1; + setCurrentIndex(newIndex); + }; + + const goToSlide = (slideIndex) => { + setCurrentIndex(slideIndex); + }; + const location = useLocation(); + const isHomePage = location.pathname === '/'; + if (!isHomePage) { + return null; + } + return ( +
+
+ +
+ +
+ +
+ +
+
+ {slides.map((slide, slideIndex) => ( +
goToSlide(slideIndex)} + className='text-2xl cursor-pointer' + > + +
+ ))} +
+ +
+ + ); +} + diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx index 9ba4e2d..83c4cb5 100644 --- a/src/components/Login/Login.jsx +++ b/src/components/Login/Login.jsx @@ -30,9 +30,11 @@ const Signin = () => { const token = res?.token; setAuth({ roles, token }); - console.log(roles); - - navigate(from, { replace: true }); + if (roles === "admin") { + navigate("/admin", { replace: true }); + } else { + navigate(from, { replace: true }); + } } catch (error) { if ( error.response && diff --git a/src/components/PostCard.jsx b/src/components/PostCard.jsx index e6df9a5..e6a72b2 100644 --- a/src/components/PostCard.jsx +++ b/src/components/PostCard.jsx @@ -72,6 +72,7 @@ export function PostCard({ post }) { return (
+
navigate(`/posts/${post._id}`)} > -
+
Edit {" "}
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx index 994c0cb..af37370 100644 --- a/src/components/PostCardUser.jsx +++ b/src/components/PostCardUser.jsx @@ -1,24 +1,22 @@ import moment from "moment"; import { insertMedia } from "./PostCard"; -import logoImg from "../Images/postimg.jpg" +import logoImg from "../Images/postimg.jpg"; export function PostCardUser({ post }) { const normalDate = moment(post.createdAt).format("DD/MM/YYYY"); return ( -
+ +
+
- logo + logo

TechTalk

- {" "} + {normalDate}

@@ -47,5 +45,6 @@ export function PostCardUser({ post }) {

{post.description}

+ ); } diff --git a/src/components/signup/Signup.jsx b/src/components/signup/Signup.jsx index d85db13..b096154 100644 --- a/src/components/signup/Signup.jsx +++ b/src/components/signup/Signup.jsx @@ -16,7 +16,7 @@ const Signup = () => { const location = useLocation() const navigate = useNavigate() - const from = location.state?.from?.pathname || "/" + const from = location.state?.from?.pathname || "/login" const handleChange = ({ currentTarget: input }) => { setData({ ...data, [input.name]: input.value }); diff --git a/src/pages/Contact.js b/src/pages/Contact.js index 14daccd..cc57c28 100644 --- a/src/pages/Contact.js +++ b/src/pages/Contact.js @@ -47,7 +47,7 @@ const ContactForm = () => { return (
-

Contact us

+

Contact Us

Email us at help@techtalk12.com or message us here:

diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 8f9bf0b..90666cf 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,26 +1,27 @@ import { usePosts } from "../context/postContext"; -import {VscEmptyWindow} from 'react-icons/vsc' +import { VscEmptyWindow } from 'react-icons/vsc' import { PostCard } from "../components/PostCard"; - export function HomePage() { - - - const { posts } = usePosts() - if (posts.length === 0 ) - return (
+ const { posts } = usePosts(); + + if (posts.length === 0) { + return ( +
-

there are not posts

+

There are no posts

- ) + ); + } + + const reversedPosts = [...posts].reverse(); return ( -
- {posts.map(post => ( +
+ {reversedPosts.map(post => ( - ))} + ))}
- ); -} +} \ No newline at end of file diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js index 5ed662e..9bfd390 100644 --- a/src/pages/PostForm.js +++ b/src/pages/PostForm.js @@ -13,6 +13,7 @@ export function PostForm() { image: null, }); const params = useParams(); + useEffect(() => { (async () => { @@ -28,7 +29,7 @@ export function PostForm() { return (
-
+

New Post

From 4a6b4f1b556733cb0ac0cb55b1ef2b726da26d44 Mon Sep 17 00:00:00 2001 From: edwin6666 Date: Wed, 26 Jul 2023 20:08:06 -0400 Subject: [PATCH 3/7] Styles card post and modularization to login --- package-lock.json | 9 ++ package.json | 1 + src/App.js | 20 +-- src/components/Carousel/Carousel.jsx | 8 +- src/components/Login/Login.jsx | 51 ++---- src/components/Login/useAuthentication.js | 36 +++++ src/components/Login/useLoginForm.js | 18 +++ src/components/Navbar/Navbar.jsx | 28 ++-- src/components/PostCard.jsx | 6 +- src/components/PostCardUser.jsx | 2 +- src/components/RequiresAuth.jsx | 2 +- src/components/signup/Signup.jsx | 4 +- src/index.css | 2 + src/pages/HomePageUser.js | 3 + src/pages/PostForm.js | 182 +++++++++++----------- tailwind.config.js | 4 +- 16 files changed, 207 insertions(+), 169 deletions(-) create mode 100644 src/components/Login/useAuthentication.js create mode 100644 src/components/Login/useLoginForm.js diff --git a/package-lock.json b/package-lock.json index ffcb427..80222dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "react-icons": "^4.8.0", "react-router-dom": "^6.10.0", "react-scripts": "5.0.1", + "tailwindcss-animated": "^1.0.1", "web-vitals": "^2.1.4", "yup": "^1.0.2" }, @@ -16183,6 +16184,14 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss-animated": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/tailwindcss-animated/-/tailwindcss-animated-1.0.1.tgz", + "integrity": "sha512-u5wusj89ZwP8I+s8WZlaAd7aZTWBN/XEG6QgMKpkIKmAf3xP1A6WYf7oYIKmGaB10UAQaSqWopi/i1ozzZEs8Q==", + "peerDependencies": { + "tailwindcss": ">=3.1.0" + } + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index aa785e9..d90317e 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "react-icons": "^4.8.0", "react-router-dom": "^6.10.0", "react-scripts": "5.0.1", + "tailwindcss-animated": "^1.0.1", "web-vitals": "^2.1.4", "yup": "^1.0.2" }, diff --git a/src/App.js b/src/App.js index f4c7d61..7296b98 100644 --- a/src/App.js +++ b/src/App.js @@ -7,33 +7,21 @@ import Login from "./components/Login/Login"; import RequiresAuth from "./components/RequiresAuth"; import { HomePageUser } from "./pages/HomePageUser"; import Navbar from "./components/Navbar/Navbar"; -import { useLocation } from "react-router-dom"; import ContactForm from "./pages/Contact"; -import {Carousel} from "./components/Carousel/Carousel"; +import { Carousel } from "./components/Carousel/Carousel"; function App() { - const location = useLocation(); - const isLoginPage = location.pathname === "/login"; - return ( - -
+
- + {/* Public routes */} } /> } /> } /> } /> - + {/* Private routes */} }> } /> diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx index 174c944..3b274af 100644 --- a/src/components/Carousel/Carousel.jsx +++ b/src/components/Carousel/Carousel.jsx @@ -5,20 +5,20 @@ import { useLocation } from 'react-router-dom'; export function Carousel() { const slides = [ { - url: 'https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2620&q=80', + url: 'https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mano-humana-y-robo%CC%81tica-tocan-un-cerebro-digital-1.jpg?w=1280&ssl=1', }, { - url: 'https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80', + url: 'https://i1.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Steve-Jobs-presenta-el-primer-iPhone-en-2007-1.jpg?w=1280&ssl=1', }, { - url: 'https://images.unsplash.com/photo-1661961112951-f2bfd1f253ce?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2672&q=80', + url: 'https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mujer-immersa-en-videojuego-con-realidad-virtual.jpg?w=1280&ssl=1', }, { url: 'https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80', }, { - url: 'https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2671&q=80', + url: 'https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Coche-auto%CC%81nomo-con-HUD-Head-Up-Display.-Vehi%CC%81culo-auto%CC%81nomo-en-las-calles-de-la-ciudad.png?w=1280&ssl=1', }, ]; diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx index 83c4cb5..4021899 100644 --- a/src/components/Login/Login.jsx +++ b/src/components/Login/Login.jsx @@ -1,48 +1,17 @@ -import { useState } from "react"; -import useAuth from "../../hooks/useAuth"; -import axios from "axios"; -import { useLocation, useNavigate } from "react-router-dom"; -import backgroundImage from '../../Images/logoimg.jpg' -const Signin = () => { - const [data, setData] = useState({ - email: "", - password: "", - }); - const [error, setError] = useState(""); - const { setAuth } = useAuth(); - const location = useLocation(); - const navigate = useNavigate(); - const from = location.state?.from?.pathname || "/"; - - +import backgroundImage from "../../Images/logoimg.jpg"; +import useLoginForm from "./useLoginForm"; +import useAuthentication from "./useAuthentication"; - const handleChange = ({ currentTarget: input }) => { - setData({ ...data, [input.name]: input.value }); - }; +const Signin = () => { + const { data, error, handleChange, setError } = useLoginForm(); + const { authenticate } = useAuthentication(); const handleSubmit = async (e) => { e.preventDefault(); - try { - const url = "http://localhost:4000/api/auth/signin"; - const { data: res } = await axios.post(url, data); - const roles = res?.roles; - const token = res?.token; - setAuth({ roles, token }); - - if (roles === "admin") { - navigate("/admin", { replace: true }); - } else { - navigate(from, { replace: true }); - } - } catch (error) { - if ( - error.response && - error.response.status >= 400 && - error.response.status <= 500 - ) { - setError(error.response.data.message); - } + const errorMessage = await authenticate(data); + if (errorMessage) { + setError(errorMessage); } }; return ( @@ -51,7 +20,7 @@ const Signin = () => {
+ >

TechTalk News

diff --git a/src/components/Login/useAuthentication.js b/src/components/Login/useAuthentication.js new file mode 100644 index 0000000..3d5da95 --- /dev/null +++ b/src/components/Login/useAuthentication.js @@ -0,0 +1,36 @@ +import { useLocation, useNavigate } from "react-router-dom"; +import axios from "axios"; +import useAuth from "../../hooks/useAuth"; + +const useAuthentication = () => { + const { setAuth, } = useAuth(); + const location = useLocation(); + const navigate = useNavigate(); + const from = location.state?.from?.pathname || "/"; + + const authenticate = async (data) => { + try { + const url = "http://localhost:4000/api/auth/signin"; + const { data: res } = await axios.post(url, data); + const roles = res?.roles; + const token = res?.token; + setAuth({ roles, token }); + + + + navigate(from, { replace: true }); + } catch (error) { + if ( + error.response && + error.response.status >= 400 && + error.response.status <= 500 + ) { + return error.response.data.message; + } + } + }; + + return { authenticate }; +}; + +export default useAuthentication; \ No newline at end of file diff --git a/src/components/Login/useLoginForm.js b/src/components/Login/useLoginForm.js new file mode 100644 index 0000000..6c467e7 --- /dev/null +++ b/src/components/Login/useLoginForm.js @@ -0,0 +1,18 @@ +import { useState } from "react"; + +const useLoginForm = () => { + const [data, setData] = useState({ + email: "", + password: "", + }); + + const [error, setError] = useState(""); + + const handleChange = ({ currentTarget: input }) => { + setData({ ...data, [input.name]: input.value }); + }; + + return { data, error, handleChange, setError }; +}; + +export default useLoginForm; \ No newline at end of file diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 0b9ad36..68b1ec0 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -7,6 +7,7 @@ import useAuth from "../../hooks/useAuth"; const Navbar = () => { const location = useLocation(); const isLoginPage = location.pathname === '/login'; + const isAdminPage = location.pathname === '/admin' const { setAuth, auth } = useAuth(); const handleLogout = () => { @@ -21,11 +22,11 @@ const Navbar = () => { }; return ( -
+
- + TechTalk News
diff --git a/src/components/PostCardUser.jsx b/src/components/PostCardUser.jsx index af37370..1c521fb 100644 --- a/src/components/PostCardUser.jsx +++ b/src/components/PostCardUser.jsx @@ -6,7 +6,7 @@ export function PostCardUser({ post }) { const normalDate = moment(post.createdAt).format("DD/MM/YYYY"); return ( -
+
diff --git a/src/components/RequiresAuth.jsx b/src/components/RequiresAuth.jsx index 40822f7..7980b96 100644 --- a/src/components/RequiresAuth.jsx +++ b/src/components/RequiresAuth.jsx @@ -11,4 +11,4 @@ const RequiresAuth = ( {allowedRoles } ) => { ) } -export default RequiresAuth \ No newline at end of file +export default RequiresAuth; \ No newline at end of file diff --git a/src/components/signup/Signup.jsx b/src/components/signup/Signup.jsx index b096154..634c8f9 100644 --- a/src/components/signup/Signup.jsx +++ b/src/components/signup/Signup.jsx @@ -43,8 +43,8 @@ const Signup = () => { } return ( -
-
+
+
Join us Now
diff --git a/src/index.css b/src/index.css index b5c61c9..bcf21eb 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ @tailwind base; @tailwind components; @tailwind utilities; + + diff --git a/src/pages/HomePageUser.js b/src/pages/HomePageUser.js index e3ffa63..2d117e0 100644 --- a/src/pages/HomePageUser.js +++ b/src/pages/HomePageUser.js @@ -21,6 +21,9 @@ export function HomePageUser() { {reversedPosts.map(post => ( ))} +
+ + ); } \ No newline at end of file diff --git a/src/pages/PostForm.js b/src/pages/PostForm.js index 9bfd390..a29bf95 100644 --- a/src/pages/PostForm.js +++ b/src/pages/PostForm.js @@ -1,6 +1,6 @@ import { Formik, Form, Field, ErrorMessage } from "formik"; import { usePosts } from "../context/postContext"; -import { useNavigate, useParams, Link} from "react-router-dom"; +import { useNavigate, useParams, Link } from "react-router-dom"; import * as Yup from "yup"; import { useEffect, useState } from "react"; @@ -13,7 +13,6 @@ export function PostForm() { image: null, }); const params = useParams(); - useEffect(() => { (async () => { @@ -29,99 +28,106 @@ export function PostForm() { return (
-
+

New Post

- + Go Back
- { + { + if (params.id) { + await updatePost(params.id, values); + } else { + await createPost(values); + } + actions.setSubmitting(false); + navigate("/"); + }} + enableReinitialize + > + {({ handleSubmit, setFieldValue, isSubmitting }) => ( +
+ + + + + + + + setFieldValue("image", e.target.files[0])} + /> - if(params.id){ - await updatePost(params.id, values) - }else{ - await createPost(values); - } - actions.setSubmitting(false); - navigate("/"); - }} - - - - enableReinitialize - > - {({ handleSubmit, setFieldValue, isSubmitting }) => ( - - - - - - - - - - - setFieldValue('image',e.target.files[0])}/> - : 'Save'} - - - )} -
+ + ) : ( + "Save" + )} + + + )} +
); diff --git a/tailwind.config.js b/tailwind.config.js index c0958ec..88403d3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,8 @@ module.exports = { theme: { extend: {}, }, - plugins: [], + plugins: [ + require('tailwindcss-animated') + ], } From 4b8a62e3dc766670aa737b9db968f5d60694fcc9 Mon Sep 17 00:00:00 2001 From: edwin6666 Date: Fri, 28 Jul 2023 17:20:39 -0400 Subject: [PATCH 4/7] Feat: Route for roles --- package-lock.json | 26 ++--- package.json | 2 +- src/api/posts.js | 2 +- src/components/Carousel/Carousel.jsx | 42 ++++----- src/components/Login/Login.jsx | 2 +- src/components/Login/useAuthentication.js | 16 ++-- src/components/Login/useLoginForm.js | 2 +- src/components/Navbar/Navbar.jsx | 101 +++++++++++++------- src/components/PostCard.jsx | 4 +- src/components/RequiresAuth.jsx | 2 +- src/components/signup/Signup.jsx | 110 +++++++++++++++------- src/pages/PostForm.js | 8 +- 12 files changed, 191 insertions(+), 126 deletions(-) diff --git a/package-lock.json b/package-lock.json index 80222dd..dd5ac03 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,7 @@ "react-dom": "^18.2.0", "react-hot-toast": "^2.4.0", "react-icons": "^4.8.0", - "react-router-dom": "^6.10.0", + "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", "tailwindcss-animated": "^1.0.1", "web-vitals": "^2.1.4", @@ -3592,9 +3592,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.3.tgz", - "integrity": "sha512-EXJysQ7J3veRECd0kZFQwYYd5sJMcq2O/m60zu1W2l3oVQ9xtub8jTOtYRE0+M2iomyG/W3Ps7+vp2kna0C27Q==", + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz", + "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==", "engines": { "node": ">=14" } @@ -14625,11 +14625,11 @@ } }, "node_modules/react-router": { - "version": "6.12.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.12.1.tgz", - "integrity": "sha512-evd/GrKJOeOypD0JB9e1r7pQh2gWCsTbUfq059Wm1AFT/K2MNZuDo19lFtAgIhlBrp0MmpgpqtvZC7LPAs7vSw==", + "version": "6.14.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz", + "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==", "dependencies": { - "@remix-run/router": "1.6.3" + "@remix-run/router": "1.7.2" }, "engines": { "node": ">=14" @@ -14639,12 +14639,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.12.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.12.1.tgz", - "integrity": "sha512-POIZN9UDKWwEDga054LvYr2KnK8V+0HR4Ny4Bwv8V7/FZCPxJgsCjYxXGxqxzHs7VBxMKZfgvtKhafuJkJSPGA==", + "version": "6.14.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz", + "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==", "dependencies": { - "@remix-run/router": "1.6.3", - "react-router": "6.12.1" + "@remix-run/router": "1.7.2", + "react-router": "6.14.2" }, "engines": { "node": ">=14" diff --git a/package.json b/package.json index d90317e..334c917 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "react-dom": "^18.2.0", "react-hot-toast": "^2.4.0", "react-icons": "^4.8.0", - "react-router-dom": "^6.10.0", + "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", "tailwindcss-animated": "^1.0.1", "web-vitals": "^2.1.4", diff --git a/src/api/posts.js b/src/api/posts.js index de3ce90..0170534 100644 --- a/src/api/posts.js +++ b/src/api/posts.js @@ -13,7 +13,7 @@ export const createPostRequest = async (post, token) => { return await axios.post("http://localhost:4000/api/posts", form, { headers: { "Content-Type": "multipart/form-data", - + Authorization: `Bearer ${token}`, }, }); diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx index 3b274af..7c9bf25 100644 --- a/src/components/Carousel/Carousel.jsx +++ b/src/components/Carousel/Carousel.jsx @@ -1,30 +1,27 @@ -import React, { useState } from 'react'; -import { BsChevronCompactLeft, BsChevronCompactRight } from 'react-icons/bs'; -import { RxDotFilled } from 'react-icons/rx'; -import { useLocation } from 'react-router-dom'; +import React, { useState } from "react"; +import { BsChevronCompactLeft, BsChevronCompactRight } from "react-icons/bs"; +import { RxDotFilled } from "react-icons/rx"; +import { useLocation } from "react-router-dom"; export function Carousel() { const slides = [ { - url: 'https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mano-humana-y-robo%CC%81tica-tocan-un-cerebro-digital-1.jpg?w=1280&ssl=1', + url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mano-humana-y-robo%CC%81tica-tocan-un-cerebro-digital-1.jpg?w=1280&ssl=1", }, { - url: 'https://i1.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Steve-Jobs-presenta-el-primer-iPhone-en-2007-1.jpg?w=1280&ssl=1', + url: "https://i1.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Steve-Jobs-presenta-el-primer-iPhone-en-2007-1.jpg?w=1280&ssl=1", }, { - url: 'https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mujer-immersa-en-videojuego-con-realidad-virtual.jpg?w=1280&ssl=1', + url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Mujer-immersa-en-videojuego-con-realidad-virtual.jpg?w=1280&ssl=1", }, { - url: 'https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80', + url: "https://images.unsplash.com/photo-1512756290469-ec264b7fbf87?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2253&q=80", }, { - url: 'https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Coche-auto%CC%81nomo-con-HUD-Head-Up-Display.-Vehi%CC%81culo-auto%CC%81nomo-en-las-calles-de-la-ciudad.png?w=1280&ssl=1', + url: "https://i2.wp.com/www.revistamercado.do/wp-content/uploads/2021/08/Coche-auto%CC%81nomo-con-HUD-Head-Up-Display.-Vehi%CC%81culo-auto%CC%81nomo-en-las-calles-de-la-ciudad.png?w=1280&ssl=1", }, ]; - - - const [currentIndex, setCurrentIndex] = useState(0); const prevSlide = () => { @@ -43,38 +40,35 @@ export function Carousel() { setCurrentIndex(slideIndex); }; const location = useLocation(); - const isHomePage = location.pathname === '/'; + const isHomePage = location.pathname === "/"; if (!isHomePage) { return null; } return ( -
+
- -
+ +
- -
+ +
-
+
{slides.map((slide, slideIndex) => (
goToSlide(slideIndex)} - className='text-2xl cursor-pointer' + className="text-2xl cursor-pointer" >
))}
-
- ); } - diff --git a/src/components/Login/Login.jsx b/src/components/Login/Login.jsx index 4021899..9a1e382 100644 --- a/src/components/Login/Login.jsx +++ b/src/components/Login/Login.jsx @@ -1,4 +1,3 @@ - import backgroundImage from "../../Images/logoimg.jpg"; import useLoginForm from "./useLoginForm"; import useAuthentication from "./useAuthentication"; @@ -14,6 +13,7 @@ const Signin = () => { setError(errorMessage); } }; + return (
diff --git a/src/components/Login/useAuthentication.js b/src/components/Login/useAuthentication.js index 3d5da95..ebf1e26 100644 --- a/src/components/Login/useAuthentication.js +++ b/src/components/Login/useAuthentication.js @@ -1,12 +1,10 @@ -import { useLocation, useNavigate } from "react-router-dom"; import axios from "axios"; import useAuth from "../../hooks/useAuth"; +import { useNavigate } from "react-router-dom"; const useAuthentication = () => { - const { setAuth, } = useAuth(); - const location = useLocation(); + const { setAuth } = useAuth(); const navigate = useNavigate(); - const from = location.state?.from?.pathname || "/"; const authenticate = async (data) => { try { @@ -16,9 +14,11 @@ const useAuthentication = () => { const token = res?.token; setAuth({ roles, token }); - - - navigate(from, { replace: true }); + if (roles === "admin") { + navigate("/"); + } else { + navigate("/admin"); + } } catch (error) { if ( error.response && @@ -33,4 +33,4 @@ const useAuthentication = () => { return { authenticate }; }; -export default useAuthentication; \ No newline at end of file +export default useAuthentication; diff --git a/src/components/Login/useLoginForm.js b/src/components/Login/useLoginForm.js index 6c467e7..71262c0 100644 --- a/src/components/Login/useLoginForm.js +++ b/src/components/Login/useLoginForm.js @@ -15,4 +15,4 @@ const useLoginForm = () => { return { data, error, handleChange, setError }; }; -export default useLoginForm; \ No newline at end of file +export default useLoginForm; diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx index 68b1ec0..c471c7e 100644 --- a/src/components/Navbar/Navbar.jsx +++ b/src/components/Navbar/Navbar.jsx @@ -1,14 +1,16 @@ -import React, { useState } from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'; -import { Link, useLocation } from 'react-router-dom'; +import React, { useState } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faSignOutAlt } from "@fortawesome/free-solid-svg-icons"; +import { Link, useLocation } from "react-router-dom"; import useAuth from "../../hooks/useAuth"; const Navbar = () => { const location = useLocation(); - const isLoginPage = location.pathname === '/login'; - const isAdminPage = location.pathname === '/admin' - const { setAuth, auth } = useAuth(); + const isLoginPage = location.pathname === "/login"; + const isHomePage = location.pathname === "/"; + const isFormPage = location.pathname === "/new"; + const isAdminPage = location.pathname === "/admin"; + const { setAuth, auth } = useAuth(); const handleLogout = () => { setAuth({ roles: null, token: null }); @@ -26,51 +28,78 @@ const Navbar = () => {
- + TechTalk News -
-