diff --git a/README.md b/README.md index 57c3df1..9c1c6e9 100644 --- a/README.md +++ b/README.md @@ -20,3 +20,4 @@ Good luck and happy coding :D - To run the JSON server, use: npx json-server --watch data/db.json --port 8000 + npx json-server --watch db.json --port 3000 diff --git a/data/db.json b/data/db.json index 4958aa7..8c20135 100644 --- a/data/db.json +++ b/data/db.json @@ -2,9 +2,10 @@ "adminDashboard": [ { "id": 1, - "website": "fffffffffffff", + "website": "www. Reach.com", "name": "John Doe", - "location": "jjjjjj", + + "location": "Istanbul", "date": "10/12/1979", "email": "mu@mail.com", "phone": "53216121303", diff --git a/src/App.jsx b/src/App.jsx index e53b518..61323e5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -17,7 +17,7 @@ function App() { } /> } /> - } /> + } /> } /> - + diff --git a/src/components/EventCarousel/images/chevron-left.svg b/src/assets/chevron-left-white.svg similarity index 100% rename from src/components/EventCarousel/images/chevron-left.svg rename to src/assets/chevron-left-white.svg diff --git a/src/components/GlobalCarousel/images/chevron-right.svg b/src/assets/chevron-right-blue.svg similarity index 85% rename from src/components/GlobalCarousel/images/chevron-right.svg rename to src/assets/chevron-right-blue.svg index 076eb04..51208d2 100644 --- a/src/components/GlobalCarousel/images/chevron-right.svg +++ b/src/assets/chevron-right-blue.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/EventCarousel/images/chevron-right.svg b/src/assets/chevron-right-white.svg similarity index 100% rename from src/components/EventCarousel/images/chevron-right.svg rename to src/assets/chevron-right-white.svg diff --git a/src/components/AboutUs/AboutUs.css b/src/components/AboutUs/AboutUs.css new file mode 100644 index 0000000..336e5ba --- /dev/null +++ b/src/components/AboutUs/AboutUs.css @@ -0,0 +1,20 @@ +.diagonal-box-about { + /* background-image: linear-gradient(45deg, #6303B1, #ff0099); */ + transform: skewY(3deg); +} +.content-about { + max-width: 80%; + margin: 0 auto; + transform: skewY(-3deg); +} + +#slider-wrapper { + display: flex !important; + align-items: center !important; +} + +@media only screen and (max-width: 1100px) { + #slider-wrapper { + flex-direction: column !important; + } + } \ No newline at end of file diff --git a/src/components/AboutUs/AboutUs.jsx b/src/components/AboutUs/AboutUs.jsx index 2a4fa21..64772e3 100644 --- a/src/components/AboutUs/AboutUs.jsx +++ b/src/components/AboutUs/AboutUs.jsx @@ -1,34 +1,78 @@ -import aboutus from "src/assets/AboutUs.jpg"; +import Slider from "react-slick"; +import "./AboutUs.css"; +import aboutUsOne from "src/assets/AboutUs-1.jpg"; +import aboutUsTwo from "src/assets/AboutUs-2.jpg"; +import aboutUsThree from "src/assets/AboutUs-3.jpg"; +import SliderArrow from "./SliderArrow/SliderArrow"; import { useTranslation } from "react-i18next"; function AboutUs() { + const settings = { + arrows: true, + dots: false, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + autoplay: true, + autoplaySpeed: 3000, + pauseOnHover: true, + nextArrow: , + prevArrow: , + }; + const [t] = useTranslation(); + const ImgMap = { + aboutUsOne: aboutUsOne, + aboutUsTwo: aboutUsTwo, + aboutUsThree: aboutUsThree, + }; return ( -
-
- - {/* Text div */} -
-

- {t("home.aboutUs.title")} -

-

- {t(`home.aboutUs.texts.${[0]}.description`)} -

+
+
+

1

+
+
+

1

+
+
+

+ {t("home.aboutUs.title")} +

+ + {t("home.aboutUs.texts", { returnObjects: true }).map( + function (item) { + return ( +
+ {/* Slider wrapper */} +
+ {/* Text Wrapper */} +
+

+ {item.description} +

+
- {/* Image div */} -
- {"a -
+
+ {item.alt} +
+
+
+
+ ); + } + )} + +
); diff --git a/src/components/AboutUs/AboutUs.test.jsx b/src/components/AboutUs/AboutUs.test.jsx deleted file mode 100644 index e54d2f4..0000000 --- a/src/components/AboutUs/AboutUs.test.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import renderer from "react-test-renderer"; -import AboutUs from "./AboutUs"; - -it("renders correctly", () => { - const tree = renderer.create().toJSON(); - expect(tree).toMatchSnapshot(); -}); diff --git a/src/components/AboutUs/SliderArrow/SliderArrow.css b/src/components/AboutUs/SliderArrow/SliderArrow.css new file mode 100644 index 0000000..ecb577d --- /dev/null +++ b/src/components/AboutUs/SliderArrow/SliderArrow.css @@ -0,0 +1,3 @@ +.arrow { + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/AboutUs/SliderArrow/SliderArrow.jsx b/src/components/AboutUs/SliderArrow/SliderArrow.jsx new file mode 100644 index 0000000..0b3c3ae --- /dev/null +++ b/src/components/AboutUs/SliderArrow/SliderArrow.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import leftArrowSvg from "./../../../assets/chevron-left-white.svg"; +import rightArrowSvg from "./../../../assets/chevron-right-white.svg"; +import './SliderArrow.css'; + +const SliderArrow = ({ leftOrRight, onClick }) => { + return ( +
+ Carousel Arrow +
+ ); +}; + +export default SliderArrow; \ No newline at end of file diff --git a/src/components/AboutUs/__snapshots__/AboutUs.test.jsx.snap b/src/components/AboutUs/__snapshots__/AboutUs.test.jsx.snap deleted file mode 100644 index feba780..0000000 --- a/src/components/AboutUs/__snapshots__/AboutUs.test.jsx.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly 1`] = ` -
-
-
-

- About Us -

-

- Get the understanding you need to channel the books of spells you\`ve always been smitten with, and boost sales which cartoon rabbits love to steal! Get the understanding you need to channel the books of spells you\`ve always been smitten with, and boost sales which cartoon rabbits love to steal! Get the understanding you need to channel the books of spells you\`ve always been smitten with, and boost sales which cartoon rabbits love to steal! -

-
-
- a drawing of a studying kid -
-
-
-`; diff --git a/src/components/ContactUs/ContactUs.css b/src/components/ContactUs/ContactUs.css deleted file mode 100644 index 50f479c..0000000 --- a/src/components/ContactUs/ContactUs.css +++ /dev/null @@ -1,12 +0,0 @@ -@media only screen and (max-width: 600px) { - .ContactUs .contactInfo { - font-size: 13px; - margin-left: 30px; - max-width: 400px; - } - .FormTextContactUs{ - max-width: 290px; - } - - -} \ No newline at end of file diff --git a/src/components/ContactUs/ContactUs.jsx b/src/components/ContactUs/ContactUs.jsx index 166a269..c775980 100644 --- a/src/components/ContactUs/ContactUs.jsx +++ b/src/components/ContactUs/ContactUs.jsx @@ -2,7 +2,6 @@ import { React, useState } from "react"; import Phone from "../../assets/phone.svg"; import Message from "../../assets/email.svg"; import Location from "../../assets/location.svg"; -import "./ContactUs.css"; import { useMutation } from "@tanstack/react-query"; import { useTranslation } from "react-i18next"; @@ -12,14 +11,14 @@ function ContactUs() { email: "", Message: "", }); - + function handleChange(event) { const name = event.target.name; let value = event.target.value; - + setFormData({ ...formData, [name]: value }); } - + function handleSubmit(event) { event.preventDefault(); } @@ -37,56 +36,48 @@ function ContactUs() { const [t] = useTranslation(); return ( -
+

{t("home.contactUs.title")}

{t("home.contactUs.description")}

-
-
+
+
Location icon -

+

9094 Bay Meadows Street Conyers, GA 30012

-
+
Phone icon -

+

+229-955-5388-336

-

+

+229-955-5373-360

-
+
Contact icon -

+

support@mail.com

-

+

office@mail.com

@@ -94,18 +85,16 @@ function ContactUs() {
-
+
-
-
+
@@ -116,23 +105,14 @@ function ContactUs() { type='text' onChange={handleChange} value={formData.Fullname} - className='FormTextContactUs h-10 rounded border focus:border focus:border-indigo-700' - style={{ - backgroundColor: "#DDDDDD", - borderWidth: 0, - width: "580px", - }} + className="focus:border focus:border-blue-dark rounded border-none bg-gray mb-6" placeholder={t("home.contactUs.fullNameFormPlaceholder")} />
-
-
-
@@ -143,47 +123,30 @@ function ContactUs() { type='email' onChange={handleChange} value={formData.email} - className='FormTextContactUs h-10 rounded border focus:border focus:border-indigo-700' - style={{ - backgroundColor: "#DDDDDD", - borderWidth: 0, - width: "580px", - }} + className="focus:border focus:border-blue-dark rounded border-none bg-gray mb-6" placeholder='example@email.com' />
-
-
+
+
+ + {/* END OF FORM */} +
+ {/*footer of the form*/} +
+ + +
+
+
+
+
+ + ) : null} + + ); +} +export default EditInfoForm; diff --git a/src/components/NgoProfilePageHeroSection/NgoProfilePageHeroSection.jsx b/src/components/NgoProfilePageHeroSection/NgoProfilePageHeroSection.jsx index c7a300c..c5a1d74 100644 --- a/src/components/NgoProfilePageHeroSection/NgoProfilePageHeroSection.jsx +++ b/src/components/NgoProfilePageHeroSection/NgoProfilePageHeroSection.jsx @@ -1,94 +1,79 @@ import React, { useState } from "react"; import "../../App.css"; import NGOImage from "../../assets/NGOImage.png"; -import EditInfoForm from "../EditInfoForm/EditInfoForm"; -import Axios from "axios"; -import SubmitConfirm from "../AdminDashboardHeroSection/SubmitConfirm"; +import EditInfoForm from "./EditInfoForm"; +import { useQuery } from "@tanstack/react-query"; function NgoProfilePageHeroSection() { const [info, setInfo] = useState([]); //changed {} to [] + const { isLoading, error, data } = useQuery(["repoData"], () => + fetch("https://reach-capstone.herokuapp.com/api/ngos/").then((res) => + res.json().then((data) => setInfo(data.data[0])) + ) + ); + if (isLoading) return "Loading..."; - const [updated, setUpdated] = useState(false); - - function handleChange(e) { - setInfo({ ...info, [e.target.name]: e.target.value }); - } - - function dataSender(e) { - Axios.put("http://localhost:8000/adminDashboard/1", info).then( - (response) => { - // console.log(response.data) - setInfo(() => response.data); - // console.log('info after dataSender',info) - setUpdated(true); - setTimeout(() => setUpdated(false), 2000); - } - ); - } - - React.useEffect(() => { - Axios.get("http://localhost:8000/adminDashboard/1") - .then((res) => { - setInfo(res.data); - // console.log('info after useEffect', info) - }) - .catch((err) => { - console.log("err", err); - }); - }, []); + // if (error) return error.messag; return ( <>
-
- +
+ - {updated ? : null} - -
-
+
+
+

+ {info.name} +

+ {/* {" "} */}
-
+
    -

    - Name: {info.name} +

    + Profile :

    -
  • Location: {info.location}
    • -
  • Date: {info.date}
    • -
  • Email: {info.email}
    • +
  • + Date: {info.createdAt.slice(0, 10)} +
    • +
  • Email: {info.email}
  • Website: {info.website}
    • -
  • Phone: {info.phone}
    • +
  • Phone: +{info.phone}
    • -

    - About Us : -

    -

    - {info.message} -

    -
+ +
+
+

+ About Us : +

+

+ {info.message} +

); } - export default NgoProfilePageHeroSection; diff --git a/src/components/NgoProfilePageHeroSection/NgoProfilePageHeroSection.test.jsx b/src/components/NgoProfilePageHeroSection/NgoProfilePageHeroSection.test.jsx deleted file mode 100644 index bf12974..0000000 --- a/src/components/NgoProfilePageHeroSection/NgoProfilePageHeroSection.test.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; -import renderer from "react-test-renderer"; -import NgoProfilePageHeroSection from "./NgoProfilePageHeroSection"; -import { MemoryRouter } from "react-router-dom"; - -it("renders correctly", () => { - const test = renderer - .create( - - - - ) - .toJSON(); - expect(test).toMatchSnapshot(); -}); diff --git a/src/components/NgoProfilePageHeroSection/__snapshots__/NgoProfilePageHeroSection.test.jsx.snap b/src/components/NgoProfilePageHeroSection/__snapshots__/NgoProfilePageHeroSection.test.jsx.snap deleted file mode 100644 index 682b3fc..0000000 --- a/src/components/NgoProfilePageHeroSection/__snapshots__/NgoProfilePageHeroSection.test.jsx.snap +++ /dev/null @@ -1,83 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders correctly 1`] = ` -
-
-
- -
-
-
- -
-
-
-

- Name: -

-
  • - Location: -
    • -
  • - Date: -
    • -
  • - Email: -
    • -
  • - Website: -
    • -
  • - Phone: -
    • -
    -

    - About Us : -

    -

    -

    -
    -
    -
    -`; diff --git a/src/components/OurValues/OurValues.jsx b/src/components/OurValues/OurValues.jsx index 708a13f..297cd30 100644 --- a/src/components/OurValues/OurValues.jsx +++ b/src/components/OurValues/OurValues.jsx @@ -3,6 +3,7 @@ import "./Values.css"; import volunteerPic from "src/assets/volunteer.jpg"; import teachPic from "src/assets/Teach.jpg"; import trustPic from "src/assets/Trust.jpg"; +import SliderArrow from "./SliderArrow/SliderArrow"; import { useTranslation } from "react-i18next"; @@ -15,8 +16,10 @@ function OurValues() { slidesToShow: 1, slidesToScroll: 1, autoplay: true, - autoplaySpeed: 2000, + autoplaySpeed: 3000, pauseOnHover: true, + nextArrow: , + prevArrow: , }; const [t] = useTranslation(); diff --git a/src/components/OurValues/SliderArrow/SliderArrow.css b/src/components/OurValues/SliderArrow/SliderArrow.css new file mode 100644 index 0000000..ecb577d --- /dev/null +++ b/src/components/OurValues/SliderArrow/SliderArrow.css @@ -0,0 +1,3 @@ +.arrow { + cursor: pointer; +} \ No newline at end of file diff --git a/src/components/OurValues/SliderArrow/SliderArrow.jsx b/src/components/OurValues/SliderArrow/SliderArrow.jsx new file mode 100644 index 0000000..1c8a660 --- /dev/null +++ b/src/components/OurValues/SliderArrow/SliderArrow.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import leftArrowSvg from "./../../../assets/chevron-left-blue.svg"; +import rightArrowSvg from "./../../../assets/chevron-right-blue.svg"; +import './SliderArrow.css'; + +const SliderArrow = ({ leftOrRight, onClick }) => { + return ( +
    + Carousel Arrow +
    + ); +}; + +export default SliderArrow; \ No newline at end of file diff --git a/src/components/OurValues/Values.css b/src/components/OurValues/Values.css index 6d3566c..86345a8 100644 --- a/src/components/OurValues/Values.css +++ b/src/components/OurValues/Values.css @@ -8,3 +8,5 @@ flex-direction: column !important; } } + + diff --git a/src/components/layout/Footer/Footer.jsx b/src/components/layout/Footer/Footer.jsx index 331fd9f..b868f1f 100644 --- a/src/components/layout/Footer/Footer.jsx +++ b/src/components/layout/Footer/Footer.jsx @@ -35,7 +35,6 @@ export default function Footer() { Subscribe to our newsletter
    -

    E-mail

    {validationMsg}

    diff --git a/src/components/layout/Navbar/Navbar.jsx b/src/components/layout/Navbar/Navbar.jsx index bb0be54..9a738b4 100644 --- a/src/components/layout/Navbar/Navbar.jsx +++ b/src/components/layout/Navbar/Navbar.jsx @@ -88,7 +88,7 @@ function Navbar() {
  • Contact Us @@ -96,7 +96,7 @@ function Navbar() {
  • About Us @@ -115,29 +115,29 @@ function Navbar() { onChange={(e) => i18n.changeLanguage(e.target.value) } - className=' border-gray-700 hover:border-gray-200 mt-0 border-0 border-b-2 bg-transparent py-0 pb-3 text-3xl duration-200 ease-linear focus:border-0 sm:text-lg md:hidden' + className='border-gray-700 hover:border-gray-200 mt-0 border-0 border-b-2 bg-transparent py-0 pb-3 text-3xl duration-200 ease-linear focus:border-0 sm:text-lg md:hidden' > diff --git a/src/containers/AllEvents.jsx b/src/containers/AllEvents.jsx index fee6ed8..f92466c 100644 --- a/src/containers/AllEvents.jsx +++ b/src/containers/AllEvents.jsx @@ -4,11 +4,14 @@ import EventsGrid from "../components/EventsGrid/EventsGrid/EventsGrid"; import FilterEvents from "../components/EventsGrid/FilterEvents/FilterEvents"; import Navbar from "../components/layout/Navbar/Navbar"; import Footer from "../components/layout/Footer/Footer"; +import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; + function AllEvents() { const [events, setEvents] = useState([]); const [filteredEvents, setFilteredEvents] = useState([]); const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); + // const [error, setError] = useState(null); const [num, setnum] = useState(1); const [showMoreBtn, setShowMoreBtn] = useState(true); @@ -22,24 +25,35 @@ function AllEvents() { // - useEffect(() => { - fetch(`http://localhost:3000/events`) - .then((response) => response.json()) - .then((actualData) => setEvents(actualData)); - }, []); + const fetchData = async () => { + const { data } = await axios.get( + "https://reach-capstone.herokuapp.com/api/events" + ); + return data; + }; + const { isLoading, error, data } = useQuery(["even"], fetchData, { + onSuccess: (data) => { + setEvents(data.data); + }, + }); useEffect(() => { let tagItems = events - .map((val) => val.tags) - .reduce((acc, val) => [...acc, ...val], []); + .map((val) => { + return val.topic; + }) + .reduce((acc, val) => [...acc, val], []); setMenuTagItems([...new Set(tagItems.map((item) => item))]); + setnum(1); setFilteredEvents(events); setShowMoreBtn(true); }, [events]); useEffect(() => { - const result = events.filter((event) => event.tags.includes(tag)); + const result = events.filter((event) => { + return event.topic.includes(tag); + }); setFilteredEvents(result); setShowMoreBtn(true); setnum(1); @@ -63,6 +77,9 @@ function AllEvents() { setFilteredEvents(result); setShowMoreBtn(true); }, [location]); + if (isLoading) return "Loading..."; + + if (error) return "An error has occurred: " + error.message; return ( <> diff --git a/src/index.js b/src/index.js index 8b1abba..44da955 100644 --- a/src/index.js +++ b/src/index.js @@ -14,7 +14,7 @@ const queryClient = new QueryClient(); const root = ReactDOM.createRoot(document.getElementById("root")); root.render( - + diff --git a/src/locales/ar/translation.json b/src/locales/ar/translation.json index 7a3d310..4718692 100644 --- a/src/locales/ar/translation.json +++ b/src/locales/ar/translation.json @@ -11,15 +11,21 @@ "texts": [ { "id": 1, - "description": "ريتش هي منصة تربط ما بين المعلمين المتطوعين والمنظمات غير الربحية المعنية بالأطفال اللاجئين حول أنحاء العالم." + "description": "ريتش هي منصة تربط ما بين المعلمين المتطوعين والمنظمات غير الربحية المعنية بالأطفال اللاجئين حول أنحاء العالم", + "image": "aboutUsOne", + "alt": "Social Sustainability Graphic" }, { "id": 2, - "description": "لسوء الحظ، في ظل ظروف قاسية يُحرم العديد من الأطفال من حقوقهم الأساسية بما في ذلك التعليم. نظراً لهذا، سيكون من المفيد للغاية ربط هؤلاء الأطفال المحرومين بالمعلمين المتطوعين الذين يمكنهم تعليمهم مهارات أساسية وهامة مثل تعلم اللغات المحلية أو أساسيات البرمجة" + "description": "لسوء الحظ، في ظل ظروف قاسية يُحرم العديد من الأطفال من حقوقهم الأساسية بما في ذلك التعليم. نظراً لهذا، سيكون من المفيد للغاية ربط هؤلاء الأطفال المحرومين بالمعلمين المتطوعين الذين يمكنهم تعليمهم مهارات أساسية وهامة مثل تعلم اللغات المحلية أو أساسيات البرمجة", + "image": "aboutUsTwo", + "alt": "Education Graphic" }, { "id": 3, - "description": "إن امتلاك هذا النوع من المهارات يمكن أن يفتح أمام هؤلاء الأطفال العديد من الفرص في المستقبل التي يمكن أن تغير حياتهم على نحو إيجابي. وبالتالي، فإن الهدف من هذه المنصة هو تزويد هؤلاء الأطفال بمهارات أساسية تقوم بالتطوير من قدراتهم وضمان حصولهم على مستقبل أفضل" + "description": "إن امتلاك هذا النوع من المهارات يمكن أن يفتح أمام هؤلاء الأطفال العديد من الفرص في المستقبل التي يمكن أن تغير حياتهم على نحو إيجابي. وبالتالي، فإن الهدف من هذه المنصة هو تزويد هؤلاء الأطفال بمهارات أساسية تقوم بالتطوير من قدراتهم وضمان حصولهم على مستقبل أفضل", + "image": "aboutUsThree", + "alt": "Empathy Graphic" } ] }, diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 748ac12..ab9d455 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -11,15 +11,21 @@ "texts": [ { "id": 1, - "description": "Reach is a platform that connects between volunteer teachers and NGOs concerned with refugee kids around the world." + "description": "Reach is a platform that connects between volunteer teachers and NGOs concerned with refugee kids around the world.", + "image": "aboutUsOne", + "alt": "Social Sustainability Graphic" }, { "id": 2, - "description": "Unfortunately, under harsh conditions many children get deprived from their basic rights including education. From this point of view, it would be quite helpful to connect these affected children with volunteer teachers that can teach them important skills such as learning local languages or basic coding." + "description": "Unfortunately, under harsh conditions many children get deprived from their basic rights including education. From this point of view, it would be quite helpful to connect these affected children with volunteer teachers that can teach them important skills such as learning local languages or basic coding.", + "image": "aboutUsTwo", + "alt": "Education Graphic" }, { "id": 3, - "description": "Having this kind of skills could open for them many opportunities in the future that can positively turn their lives around. Thus, the aim of this platform is to provide these kids the opportunity to develop essential skills to thrive and have a better future." + "description": "Having this kind of skills could open for them many opportunities in the future that can positively turn their lives around. Thus, the aim of this platform is to provide these kids the opportunity to develop essential skills to thrive and have a better future.", + "image": "aboutUsThree", + "alt": "Empathy Graphic" } ] }, diff --git a/src/services/postData.js b/src/services/postData.js new file mode 100644 index 0000000..336fe60 --- /dev/null +++ b/src/services/postData.js @@ -0,0 +1,24 @@ +/* eslint-disable no-console */ +import React from "react" +import { + useMutation, + QueryClient, + useQueryClient, +} from "@tanstack/react-query"; +import { wordsNumber, isValidEmail } from './ValidationFunctions' +import axios from "axios"; + +async function PostData(data) { + + + + if (wordsNumber(data.message) && isValidEmail(data.message)) { + + const response = await axios.patch('http://localhost:8000/adminDashboard/1', data); + } + else { + console.log('what') + } +} +export default PostData; +