From 8b69c90bc499548709b5cc11130e1c2e3c192d33 Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Thu, 28 Dec 2023 22:34:34 +0300 Subject: [PATCH 1/2] Revert "Merge branch 'main' of github.com:SpaceyaTech/SYT-Web-Redesign into update-team" This reverts commit c8202d6f4227281b61765c9ad8e9aaab51d76110, reversing changes made to 7066a91289488f09b2229d14b7d17fbb27291293. --- .github/workflows/update-dev.yaml | 21 - src/ADMIN/pages/events/AddEventPage.jsx | 773 +++++++----------- src/APP/components/Header2.jsx | 8 +- src/APP/pages/blog/Blog.jsx | 87 +- src/APP/pages/blog/sections/BlogWrapper.jsx | 51 +- src/APP/pages/blog/sections/blogWrapper.css | 44 - src/APP/pages/blogs/Blogs.jsx | 2 +- src/APP/pages/blogs/sections/Banner.jsx | 4 +- src/APP/pages/blogs/sections/BlogCard.jsx | 21 +- src/APP/pages/blogs/sections/BlogStats.jsx | 17 +- src/APP/pages/blogs/sections/BlogsWrapper.jsx | 178 ++-- .../eventsSection/SingleEvents/EventAbout.css | 67 ++ .../SingleEvents/SingleEvent.jsx | 3 +- src/AUTH/pages/LogIn.jsx | 222 ++--- src/hooks/Queries/blogs/useAllBlogsData.jsx | 52 +- 15 files changed, 711 insertions(+), 839 deletions(-) delete mode 100644 .github/workflows/update-dev.yaml delete mode 100644 src/APP/pages/blog/sections/blogWrapper.css create mode 100644 src/APP/pages/community/sections/eventsSection/SingleEvents/EventAbout.css diff --git a/.github/workflows/update-dev.yaml b/.github/workflows/update-dev.yaml deleted file mode 100644 index c4d2ab90..00000000 --- a/.github/workflows/update-dev.yaml +++ /dev/null @@ -1,21 +0,0 @@ -name: Update Dev Branch on Main Update - -on: - push: - branches: - - main - -jobs: - update-dev-branch: - runs-on: ubuntu-latest - - steps: - - name: Checkout repository - uses: actions/checkout@v2 - - - name: Update Dev branch - run: | - git checkout -B dev main # Checkout or create 'dev' branch from 'main' - git pull origin main # Pull changes from the main branch - # Make necessary changes here or use any other command to update the dev branch - git push origin dev # Push changes to the 'dev' branch diff --git a/src/ADMIN/pages/events/AddEventPage.jsx b/src/ADMIN/pages/events/AddEventPage.jsx index b798b16d..077f1a30 100644 --- a/src/ADMIN/pages/events/AddEventPage.jsx +++ b/src/ADMIN/pages/events/AddEventPage.jsx @@ -1,21 +1,6 @@ import React, { useEffect, useState } from "react"; import { useQuery } from "react-query"; -import { - BtnBold, - BtnBulletList, - BtnClearFormatting, - BtnItalic, - BtnLink, - BtnNumberedList, - BtnRedo, - BtnStrikeThrough, - BtnStyles, - BtnUnderline, - BtnUndo, - Editor, - EditorProvider, - Toolbar, -} from "react-simple-wysiwyg"; +import { BtnBold, BtnBulletList, BtnClearFormatting, BtnItalic, BtnLink, BtnNumberedList, BtnRedo, BtnStrikeThrough, BtnStyles, BtnUnderline, BtnUndo, Editor, EditorProvider, Toolbar } from "react-simple-wysiwyg"; import { Controller, useForm } from "react-hook-form"; import * as yup from "yup"; import { yupResolver } from "@hookform/resolvers/yup"; @@ -23,51 +8,40 @@ import { yupResolver } from "@hookform/resolvers/yup"; import { useEventsCategories } from "../../../hooks/Queries/eventsSection/useEventCategories"; import useChaptersData from "../../../hooks/Queries/community/useChaptersData"; import usePostEvents from "../../../hooks/Queries/eventsSection/usePostEvents"; -import "../../../APP/pages/community/sections/eventsSection/SingleEvents/EventAbout.css"; +import "../../../APP/pages/community/sections/eventsSection/SingleEvents/EventAbout.css" function AddEventPage() { - const [selectedEventCategory, setSelectedEventCategory] = useState("1"); - const [editorState, setEditorState] = useState(""); - const [poster, setPoster] = useState(""); - const [newCategory, setNewCategory] = useState(false); + const [ selectedEventCategory, setSelectedEventCategory ] = useState('1'); + const [ editorState, setEditorState ] = useState(''); + const [ poster, setPoster ] = useState(''); + const [ newCategory, setNewCategory ] = useState(false); - const { data: eventsCategories, status: statusEventsCategories } = - useEventsCategories(); - const { - data: chaptersData, - isLoading, - isError, - isSuccess, - } = useChaptersData(); - const { - setEventData: postEvent, - error: errorPostEvent, + const { data: eventsCategories, status: statusEventsCategories } = useEventsCategories(); + const { data: chaptersData, isLoading, isError, isSuccess } = useChaptersData(); + const { + setEventData: postEvent, + error: errorPostEvent, clearError: clearErrorPostEvent, status: statusPostEvent, - clearStatus: clearStatusPostEvent, - } = usePostEvents(); + clearStatus: clearStatusPostEvent + } = usePostEvents(); const handleEventAboutChange = (e) => { setEditorState(e.target.value); setValue("about", e.target.value); clearErrors("about"); - }; + } const handleUploadImageClick = (e, id) => { - if ((e.type === "keydown" && e.key === "Enter") || e.type === "click") - document.getElementById(id).click(); - }; + if ((e.type === "keydown" && e.key === "Enter") || (e.type === "click")) + document.getElementById(id).click() + } const validationSchema = yup.object().shape({ name: yup.string().required("Event name is required."), about: yup.string().required("Event about details are reqired."), - link: yup - .string() - .url("Enter a valid url.") - .required("Event link is required."), - location: yup - .string() - .required("Event location (Building, region, etc) is required."), + link: yup.string().url("Enter a valid url.").required("Event link is required."), + location: yup.string().required("Event location (Building, region, etc) is required."), mode: yup.string().required("Event mode is required."), city: yup.string().required("Event city is required."), country: yup.string().required("Event country is required."), @@ -78,14 +52,14 @@ function AddEventPage() { category: yup.string().when("$newCategory", { is: false, then: (schema) => schema.required("Event category is required."), - otherwise: (schema) => schema, + otherwise: (schema) => schema }), category_name: yup.string().when("$newCategory", { is: true, then: (schema) => schema.required("Enter a new category name."), - otherwise: (schema) => schema, + otherwise: (schema) => schema }), - chapter: yup.string().required("Associated chapter is required."), + chapter: yup.string().required("Associated chapter is required.") }); const { @@ -96,40 +70,38 @@ function AddEventPage() { formState: { errors }, clearErrors, trigger, - reset, + reset } = useForm({ defaultValues: { - category: 1, - chapter: 1, - mode: "Physical", + "category": 1, + "chapter": 1, + "mode": "Physical" }, mode: "onChange", resolver: yupResolver(validationSchema), - context: { newCategory }, + context: { newCategory } }); const onSubmit = (data) => { data.poster = poster; - postEvent({ ...data }); - }; + postEvent({...data}); + } useEffect(() => { - selectedEventCategory === "" ? setNewCategory(true) : setNewCategory(false); + (selectedEventCategory === "") ? setNewCategory(true) : setNewCategory(false) }, [selectedEventCategory]); - useEffect(() => { - trigger(); - }, [trigger, newCategory]); + useEffect(() => { trigger(); },[trigger, newCategory]); useEffect(() => { if (statusPostEvent === "success") { postEvent(null); reset(); - setEditorState(""); - setPoster(""); + setEditorState(''); + setPoster(''); } - }, [statusPostEvent]); + }, [statusPostEvent]) return (
@@ -139,434 +111,297 @@ function AddEventPage() {

Add new event details

{/* Success Display */} - {statusPostEvent === "success" && ( -
- Event Added Successfully! - + Event Added Successfully! + { clearStatusPostEvent(); postEvent(null); - }} - > - - Close - - - -
- )} + }} > + Close + + + } {/* Errors Display */} - {statusPostEvent === "error" && errorPostEvent?.axios && ( -
- Cannot add the event: - {errorPostEvent.axios} - { - clearErrorPostEvent(); - clearStatusPostEvent(); - }} - > - - Close - - - -
- )} - {statusPostEvent === "error" && errorPostEvent?.event && ( -
- Cannot add the event: - - + Cannot add the event: + {errorPostEvent.axios} + { + clearErrorPostEvent(); + clearStatusPostEvent(); + }} > + Close + +
+ } + {statusPostEvent==="error" && errorPostEvent?.event && +
+ Cannot add the event: + + { clearErrorPostEvent(); clearStatusPostEvent(); - }} - > - - Close - - - -
- )} + }} > + Close + + + } - {isError && ( -

- Error loading chapters. Cannot add an event without a chapters. - Contact the site admin! -

- )} - {isSuccess && ( - <> - {chaptersData && Array.isArray(chaptersData) ? ( - <> - {chaptersData.length >= 1 ? ( -
-
- - {errors.name && ( - - {errors.name.message} - - )} -
- {statusEventsCategories === "error" && ( -
- - {errors.category_name && ( - - {errors.category_name.message} - - )} -
- )} - {statusEventsCategories === "success" && ( -
- - {errors.category && ( - - {errors.category.message} - - )} -
- )} + {isError &&

Error loading chapters. Cannot add an event without a chapters. Contact the site admin!

} + {isSuccess && + <> + {chaptersData && Array.isArray(chaptersData) ? ( + <> + {chaptersData.length >= 1 ? ( + +
+ + {errors.name && {errors.name.message}} +
- {selectedEventCategory === "" && newCategory && ( - - )} - {errors.category_name && ( - - {errors.category_name.message} - - )} -
- - ( - - - - - - - - - - - - - - - - )} - /> - - {errors.about && ( - - {errors.about.message} - - )} -
-
- - {errors.chapter && ( - - {errors.chapter.message} - - )} -
-
- + {errors.category_name && {errors.category_name.message}} +
+ } + { statusEventsCategories === "success" && +
+ + {errors.category && {errors.category.message}} +
+ } + + {selectedEventCategory === "" && newCategory && + + } + {errors.category_name && {errors.category_name.message}} +
+ + ( + - - - - {errors.mode && ( - - {errors.mode.message} - - )} -
-
+ + + + + + + + + + + + + + )} /> + + {errors.about && {errors.about.message}} +
+
+ - {errors.location && ( - - {errors.location.message} - - )} -
-
- - {errors.city && ( - - {errors.city.message} - - )} -
-
( + + ))} + + {errors.chapter && {errors.chapter.message}} +
+
+ Physical + + + {errors.mode && {errors.mode.message}} +
+
+ + {errors.location && {errors.location.message}} +
+
+ + {errors.city && {errors.city.message}} +
+
+ + {errors.country && {errors.country.message}} +
+
+ + {errors.link && {errors.link.message}} +
+
+ Date + + {errors.date && {errors.date.message}} +
+
+
+ Start Time + + {errors.start_time && {errors.start_time.message}} +
+
+ End Time + + {errors.end_time && {errors.end_time.message}} +
+
+
handleUploadImageClick(e,'poster')} + onKeyDown={(e)=>handleUploadImageClick(e,'poster')} + tabIndex="0" + role="button" + > + ( + <> + { + field.onChange(e); + setPoster(e.target.files[0]); + }} + style={{ display: "none" }} /> - {errors.country && ( - - {errors.country.message} - - )} -
-
- - {errors.link && ( - - {errors.link.message} - - )} -
-
- Date - - {errors.date && ( - - {errors.date.message} - - )} -
-
-
- Start Time - - {errors.start_time && ( - - {errors.start_time.message} - - )} -
-
- End Time - - {errors.end_time && ( - - {errors.end_time.message} - - )} -
-
-
handleUploadImageClick(e, "poster")} - onKeyDown={(e) => handleUploadImageClick(e, "poster")} - tabIndex="0" - role="button" - > - ( - <> - { - field.onChange(e); - setPoster(e.target.files[0]); - }} - style={{ display: "none" }} - /> -
-
-
- Upload Event Poster -
-
- {poster ? ( -
-

{poster.name}

-
- ) : ( -
-
- PNG, JPG, JFIF -
-
- )} +
+
+
+ Upload Event Poster +
+
+ {poster ? ( +
+

{poster.name}

+
+ ) : ( +
+
+ PNG, JPG, JFIF
- +
)} - /> -
- {errors.poster && ( - - {errors.poster.message} - - )} -
- - Cancel - - -
- - ) : ( -

You need to first add a chapter before adding an event!

- )} - +
+ + )} /> +
+ {errors.poster && {errors.poster.message}} +
+ + Cancel + + +
+ ) : ( - "" +

You need to first add a chapter before adding an event!

)} - - )} + + ) : ('')} + + } ); } diff --git a/src/APP/components/Header2.jsx b/src/APP/components/Header2.jsx index 77c48769..f8aae8b5 100644 --- a/src/APP/components/Header2.jsx +++ b/src/APP/components/Header2.jsx @@ -63,15 +63,15 @@ const Header2 = () => { Products + {/* setShowNavlinks(false)} > - Blogs + Blog - {/* { Products + {/* - Blogs + Blog - {/* - {isError &&

Error fetching blog details!

} - {isLoading &&

Loading blog details...

} - {isSuccess && ( -
- blog - - {/*
-

- {new Date(blogData.created_at).toLocaleDateString("en-US", { - year: "numeric", - month: "short", - day: "numeric", - })} -

- - -
*/} - - - - {/* */} -
- )} - - ); -} - -export default Blog; +import React from "react"; +import { useParams } from "react-router-dom"; +import BlogStats from "../blogs/sections/BlogStats"; +import BlogWrapper from "./sections/BlogWrapper"; +import useBlogData from "../../../hooks/Queries/blog/useBlogData"; + +function Blog() { + const { id } = useParams(); + const { data: blogData, isLoading, isError, isSuccess } = useBlogData(id); + + return ( + <> + {isError &&

Error fetching blog details!

} + {isLoading &&

Loading blog details...

} + {isSuccess && ( +
+ blog + +
+

+ {new Date(blogData.created_at).toLocaleDateString("en-US", { + year: "numeric", + month: "short", + day: "numeric", + })} +

+ + +
+ + + + {/* */} +
+ )} + + ); +} + +export default Blog; diff --git a/src/APP/pages/blog/sections/BlogWrapper.jsx b/src/APP/pages/blog/sections/BlogWrapper.jsx index c364d4b5..13831c16 100644 --- a/src/APP/pages/blog/sections/BlogWrapper.jsx +++ b/src/APP/pages/blog/sections/BlogWrapper.jsx @@ -1,16 +1,12 @@ import React from "react"; import { formatDistanceToNow } from "date-fns"; -import BlogStats from "../../blogs/sections/BlogStats"; - -import logo from "../../../../assets/images/sytLogo.png"; - -import "./blogWrapper.css"; +import { Ellipse30 } from "../../../../assets/images/blogs-page"; const BlogWrapper = ({ blog }) => { + const paragraph = blog.body.split("\n"); const timeAgo = formatDistanceToNow(new Date(blog.created_at), { addSuffix: true, }); - return (
@@ -19,34 +15,31 @@ const BlogWrapper = ({ blog }) => { {blog.title} -
-
- icon - -
-

- {blog.author} -

- - {timeAgo} -
-
+
+ icon - +
+

{blog.author}

+ + {timeAgo} +
-
- {/* {htmlParser(blog.body)} */} -
+

+ {paragraph.map((par, i) => ( + + {par} +
+
+ + ))} +

{/* */} diff --git a/src/APP/pages/blog/sections/blogWrapper.css b/src/APP/pages/blog/sections/blogWrapper.css deleted file mode 100644 index cb24ecd2..00000000 --- a/src/APP/pages/blog/sections/blogWrapper.css +++ /dev/null @@ -1,44 +0,0 @@ -h1 { - font-size: 18px; - font-weight: 700; -} - -h2 { - padding: 8px 0; - font-weight: 600; -} - -p, -span { - line-height: 24px; - margin-top: 6px; - margin-bottom: 12px; - font-weight: 400; - text-align: left; -} - -strong { - font-weight: 600; -} - -a { - color: #009975; - cursor: pointer; -} - -ul, -ol { - margin-left: 28px; -} - -ol { - list-style: lower-roman; -} - -ul { - list-style: disc; -} - -li { - text-transform: capitalize; -} diff --git a/src/APP/pages/blogs/Blogs.jsx b/src/APP/pages/blogs/Blogs.jsx index 324ceb58..d0f161c8 100644 --- a/src/APP/pages/blogs/Blogs.jsx +++ b/src/APP/pages/blogs/Blogs.jsx @@ -7,7 +7,7 @@ const Blogs = () => { const [searchText, setSearchText] = useState(""); return ( -
+
diff --git a/src/APP/pages/blogs/sections/Banner.jsx b/src/APP/pages/blogs/sections/Banner.jsx index 8ad1161a..fcd79ce3 100644 --- a/src/APP/pages/blogs/sections/Banner.jsx +++ b/src/APP/pages/blogs/sections/Banner.jsx @@ -10,7 +10,7 @@ const Banner = ({ searchText, setSearchText }) => {

Blogs

- {/*
@@ -24,7 +24,7 @@ const Banner = ({ searchText, setSearchText }) => { -
*/} +
); diff --git a/src/APP/pages/blogs/sections/BlogCard.jsx b/src/APP/pages/blogs/sections/BlogCard.jsx index a96a8557..8e3754ab 100644 --- a/src/APP/pages/blogs/sections/BlogCard.jsx +++ b/src/APP/pages/blogs/sections/BlogCard.jsx @@ -1,8 +1,7 @@ -import { formatDistanceToNow } from "date-fns"; import { useNavigate } from "react-router-dom"; -import { arrowRight } from "../../../../assets/images/blogs-page"; -import logo from "../../../../assets/images/sytLogo.png"; +import { Ellipse30, arrowRight } from "../../../../assets/images/blogs-page"; import BlogStats from "./BlogStats"; +import { formatDistanceToNow } from "date-fns"; const BlogCard = ({ blog }) => { const navigate = useNavigate(); @@ -10,18 +9,18 @@ const BlogCard = ({ blog }) => { addSuffix: true, }); return ( -
+
blog -
+

{blog.title}

- +

@@ -31,9 +30,9 @@ const BlogCard = ({ blog }) => {

icon
@@ -44,12 +43,12 @@ const BlogCard = ({ blog }) => {
-

- New here? - - {" "} - Create an account - -

- -
-
- ); -} - -export default LogIn; +import React, { useState } from "react"; +import axios from "axios"; +import { Navigate } from "react-router-dom"; +import LoginImg from "../../assets/images/auth/login.svg"; +import useAuth from "../../hooks/useAuth"; + +function LogIn() { + const { auth, setAuth } = useAuth(); + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [isError, setError] = useState(null); + const [rememberMe, setRememberMe] = useState(false); + + const handleSubmit = async (e) => { + e.preventDefault(); + + try { + const response = await axios.post( + `${process.env.REACT_APP_API_BASE_URL}/api/token/`, + { + username, + password, + }, + { headers: { "Content-Type": "application/json" } } + ); + + setAuth(response.data); + } catch (error) { + setError(error.message); + } + }; + + if (auth?.access) { + return ; + } + + return ( +
+
+

+ Welcome Back! +

+

+ It's always a pleasure to see you again +

+ Log in +
+ +
+

Login to your Account

+

{isError}

+ +
+ setUsername(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+ + + + Forgot password? + +
+ +

+ New here? + + {" "} + Create an account + +

+
+
+
+ ); +} + +export default LogIn; diff --git a/src/hooks/Queries/blogs/useAllBlogsData.jsx b/src/hooks/Queries/blogs/useAllBlogsData.jsx index 94d0dd06..84eb009a 100644 --- a/src/hooks/Queries/blogs/useAllBlogsData.jsx +++ b/src/hooks/Queries/blogs/useAllBlogsData.jsx @@ -1,6 +1,37 @@ -import { useQuery } from "@tanstack/react-query"; +import { blog1, blog2, blog3 } from "../../../assets/images/blogs-page"; import axios from "axios"; -// import { blog1, blog2, blog3 } from "../../../assets/images/blogs-page"; + +export const blogCat = [ + { + id: 1, + cat: "Software Development", + }, + { + id: 2, + cat: "Design", + }, + { + id: 3, + cat: "Mobile Development", + }, + { + id: 4, + cat: "UX Design", + }, + { + id: 5, + cat: "UI Design", + }, + { + id: 6, + cat: "Technical Writing", + }, +]; + +// interface BlogCategory { +// id: number; +// name: string; +// } const fetchBlogCategories = async () => { try { @@ -23,6 +54,23 @@ const useBlogCategories = () => { }); }; +// interface Blog { +// id: number; +// title: string; +// description: string; +// category: number; +// likes: number; +// image: string; +// created_at: string; +// } + +// interface BlogList { +// count: number; +// next: string; +// previous: string; +// results: Blog[] +// } + const fetchBlogsData = async (page) => { let url = `${process.env.REACT_APP_API_BASE_URL}/blog/`; From 43a76f6e561a860327ceafcd74d19003fb3486e4 Mon Sep 17 00:00:00 2001 From: felixNyalenda Date: Thu, 28 Dec 2023 22:40:31 +0300 Subject: [PATCH 2/2] return about2 img --- src/assets/images/aboutPage/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/images/aboutPage/index.js b/src/assets/images/aboutPage/index.js index 49be7502..af08b71d 100644 --- a/src/assets/images/aboutPage/index.js +++ b/src/assets/images/aboutPage/index.js @@ -23,7 +23,7 @@ import raymond from "./frontend/raymond.jpg"; import hellen from "./frontend/hellen.jpg"; import heroImg from "./heroSec.png"; -// import aboutImg2 from "./about-img-2.png"; +import aboutImg2 from "./about-img-2.png"; import about1 from "./about-img-1.png"; import about2 from "./about-img-2.png"; import buildComm from "./building-community.png";