diff --git a/components/Events/Event.js b/components/Events/Event.js index 38b87ebc..4b0465a5 100644 --- a/components/Events/Event.js +++ b/components/Events/Event.js @@ -1,1220 +1,1077 @@ -/* eslint-disable react/destructuring-assignment */ -/* eslint-disable max-len */ -import React, { Component } from 'react'; -import axios from 'axios'; -import Swiper from 'swiper'; -import Select from 'react-select'; -import CreateEvent from '../CreateEvent'; -import EventCard from './EventCard'; -import EventCardFeatured from './EventCardFeatured'; -import EventCardSkeleton from './EventCardSkeleton'; -import EventCardFeaturedSkeleton from './EventCardFeaturedSkeleton'; -import 'swiper/css/swiper.min.css'; -import 'swiper/css/swiper.css'; -import EventMoreInfo from './EventMoreInfo'; -import Card from '../login-signup/card/index'; -import EventCategoryFilterButton from './EventCategoryFilterButton'; +// /* eslint-disable react/destructuring-assignment */ +// /* eslint-disable max-len */ -class Event extends Component { - constructor(props) { - super(props); - this.state = { - loading: true, - Swiperdata: [], - AllEvent: [], - PastEvent: [], - moreInfoData: [], - allsavedEvents: [], - userSavedEvents: [], - userEvents: [], - showMoreInfo: false, - createEventData: { - step: 0, - EventPicture: '', - eventName: '', - catName: '', - catNameOptions: '', - EventDescription: '', - eventLink: '', - Virtual: '', - VirtualOptions: '', - eventTime: '', - eventDate: '', - time: '', - isError: false, - }, - showCreateEvent: false, - showMyEvent: false, - eventDateTime: '', - myEvent: false, - categoryButtons: [ - { - category: 'Lectures/Webinars', - description: 'On The Hottest Topic', - activebtn: false, - }, - { - category: 'Workshops/Conferences', - description: 'Hands on Training', - activebtn: false, - }, - { - category: 'Hackathons', - description: 'Compete For Prizes', - activebtn: false, - }, - { - category: 'Incubators/Accelerators', - description: 'Start Your Tech Business', - activebtn: false, - }, +import React, { useEffect, useState } from "react"; +import axios from "axios"; +import Select from "react-select"; +import CreateEvent from "../CreateEvent"; +import EventCard from "./EventCard"; +import EventCardFeatured from "./EventCardFeatured"; +import { useRouter } from "next/router"; +import EventCardSkeleton from "./EventCardSkeleton"; +import EventCardFeaturedSkeleton from "./EventCardFeaturedSkeleton"; +import EventMoreInfo from "./EventMoreInfo"; +import Card from "../login-signup/card/index"; +import EventCategoryFilterButton from "./EventCategoryFilterButton"; +import PastEventCard from "./PastEventCard"; +import Slider from "react-slick"; +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; + +const eventdata = { + step: 0, + EventPicture: "", + eventName: "", + catName: "", + catNameOptions: "", + EventDescription: "", + eventLink: "", + Virtual: "", + VirtualOptions: "", + eventTime: "", + eventDate: "", + time: "", + isError: false, +}; + +const ctgButtons = [ + { + category: "Lectures/Webinars", + description: "On The Hottest Topic", + activebtn: false, + }, + { + category: "Workshops/Conferences", + description: "Hands on Training", + activebtn: false, + }, + { + category: "Hackathons", + description: "Compete For Prizes", + activebtn: false, + }, + { + category: "Incubators/Accelerators", + description: "Start Your Tech Business", + activebtn: false, + }, +]; + +const Event = (props) => { + const [Swiperdata, setSwiperData] = useState([]); + const [loading, setLoading] = useState(true); + const [AllEvent, setAllEvent] = useState([]); + const [PastEvent, setPastEvent] = useState([]); + const [moreInfoData, setMoreInfoData] = useState([]); + const [allsavedEvents, setAllSavedEvents] = useState([]); + const [userSavedEvents, setUserSavedEvents] = useState([]); + const [userEvents, setUserEvents] = useState([]); + const [showMoreInfo, setShowMoreInfo] = useState(false); + const [createEventData, setCreateEventData] = useState(eventdata); + const [showCreateEvent, setShowCreateEvent] = useState(false); + const [showMyEvent, setShowMyEvent] = useState(false); + const [eventDateTime, setEventDateTime] = useState(""); + const [myEvent, setMyEvent] = useState(false); + const [categoryButtons, setCategoryButtons] = useState(ctgButtons); + const [categoryButtonsActiveIndex, setCategoryButtonsActiveIndex] = + useState(-1); + const [categoryFilterLoading, setCategoryFilterLoading] = useState(false); + const [filter, setFilters] = useState({ + event_time: "", + catName: "", + Virtual: "", + Featured: "", + }); + const [categories, setCategories] = useState([]); + const [currentIndex, setCurrentIndex] = useState(0); + const [sliderRef, setSliderRef] = useState(null); + const { userData, active, clickRegister, setClickRegister, token } = props; + + const options = [ + { + label: "Event Location", + options: [ + { label: "Virtual Event", value: "Virtual Event" }, + { label: "In-person Event", value: "In-person Event" }, ], - categoryButtonsActiveIndex: -1, - catergoryFilterLoading: false, - filter: { - event_time: '', - catName: '', - Virtual: '', - Featured: '', - }, - categories: [], - }; - } + }, + { + label: "happening in", + options: [ + { label: "Week", value: "Week" }, + { label: "Month", value: "Month" }, + ], + }, + { + label: "Cost", + options: [ + { label: "Free", value: "Free" }, + { label: "Paid", value: "Paid" }, + ], + }, + ]; + + const router = useRouter(); - // fetch events when page loaded - async componentDidMount() { + useEffect(() => { Promise.all([ - this.getEvents(), - this.getSavedEvents(), - this.findSavedEvents(), - this.getUserSavedEvents(), + getEvents(), + getSavedEvents(), + findSavedEvents(), + getUserSavedEvents(), ]) .then(() => { setTimeout(() => { - this.setState({ loading: false }); + setLoading(false); }, 1500); }) .catch((err) => console.error(err)); - } + }, []); - componentDidUpdate(prevProps, prevState) { - if (prevState.Swiperdata !== this.state.Swiperdata) { - const swiper = new Swiper('.swiper-container', { - direction: 'horizontal', - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - }, - centeredSlides: false, - spaceBetween: 50, - loop: false, - reverseDirection: true, - stopOnLastSlide: false, - // loopAdditionalSlides: 1000, - preloadImages: true, - updateOnImagesReady: true, - observeParents: true, - observer: true, - breakpoints: { - // when window width is >= 640px - 1: { - slidesPerView: 1, - }, - // when window width is >= 918px - 918: { - slidesPerView: 1.5, - }, - // when window width is >= 1400px - 1400: { - slidesPerView: 2.3, - }, - // when window width is >= 2400px - 2400: { - slidesPerView: 3, - }, - }, - }); - } - } - - // fetch Event data - getEvents = async () => { + const getEvents = async () => { const dateNow = Date.now(); await axios.get(`${process.env.BASE_URI}/event`).then((response) => { - this.setState({ - AllEvent: response.data.data.filter((event) => { + setAllEvent(() => + response.data.data.filter((event) => { const eventTime = new Date(event.time).getTime(); if ( - dateNow < eventTime - && event.approved !== null - && event.approved === true - ) { + dateNow < eventTime && + event.approved !== null && + event.approved === true + ) return event; - } - }), - }); + }) + ); - this.setState({ - Swiperdata: response.data.data.filter((event) => { + setSwiperData(() => + response.data.data.filter((event) => { const eventTime = new Date(event.time).getTime(); if (event.approved !== null && event.approved === true) { return event.Featured === true; } - }), - }); + }) + ); - this.setState({ - PastEvent: response.data.data + setPastEvent(() => + response.data.data .filter((event) => { const eventTime = new Date(event.time).getTime(); if ( - dateNow > eventTime - && event.approved !== null - && event.approved === true + dateNow > eventTime && + event.approved !== null && + event.approved === true ) { return event; } }) - .sort((a, b) => new Date(a.time) - new Date(b.time)), - }); + .sort((a, b) => new Date(a.time) - new Date(b.time)) + ); }); }; - // fetch SavedEvents data from a user - getSavedEvents = async () => { - const token = window.localStorage.getItem('jwtToken'); + const getSavedEvents = async () => { + const token = window.localStorage.getItem("jwtToken"); return axios .get(`${process.env.BASE_URI}/saveEvent/`, { headers: { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Methods': 'GET', - 'Access-Control-Allow-Headers': 'Content-Type', + "Access-Control-Allow-Origin": "*", + "Access-Control-Allow-Methods": "GET", + "Access-Control-Allow-Headers": "Content-Type", Authorization: `Bearer ${token}`, - 'Content-Type': 'application/json', + "Content-Type": "application/json", }, }) - .then((res) => { - this.setState({ - allsavedEvents: res.data.data, - }); - }); + .then((res) => setAllSavedEvents(res.data.data)); }; - getUserSavedEvents = async () => { - const token = window.localStorage.getItem('jwtToken'); + const getUserSavedEvents = async () => { + const token = window.localStorage.getItem("jwtToken"); if (token != null) { return axios .get(`${process.env.BASE_URI}/saveEvent/userEvents`, { headers: { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Methods': 'GET', - 'Access-Control-Allow-Headers': 'Content-Type', + "Access-Control-Allow-Origin": "*", + "Access-Control-Allow-Methods": "GET", + "Access-Control-Allow-Headers": "Content-Type", Authorization: `Bearer ${token}`, - 'Content-Type': 'application/json', + "Content-Type": "application/json", }, }) .then((res) => { - this.setState({ - userEvents: res.data.data, - userSavedEvents: res.data.data, - }); + setUserEvents(res.data.data); + setUserSavedEvents(res.data.data); }); } }; - setEventState = (response) => { + const setEventState = (response) => { const dateNow = Date.now(); - this.setState({ - AllEvent: response.data.filter((event) => { + setAllEvent(() => + response?.data?.filter((event) => { const eventTime = new Date(event.time).getTime(); if ( - dateNow < eventTime - && event.approved !== null - && event.approved === true + dateNow < eventTime && + event.approved !== null && + event.approved === true ) { return event; } - }), - }); - this.setState({ - Swiperdata: response.data.filter((event) => { + }) + ); + + setSwiperData(() => + response?.data?.filter((event) => { const eventTime = new Date(event.time).getTime(); if (event.approved !== null && event.approved === true) { - return event.Featured === true; + return event.Featured; } - }), - }); - this.setState({ - PastEvent: response.data - .filter((event) => { + }) + ); + setPastEvent(() => + response?.data + ?.filter((event) => { const eventTime = new Date(event.time).getTime(); if ( - dateNow > eventTime - && event.approved !== null - && event.approved === true + dateNow > eventTime && + event.approved !== null && + event.approved === true ) { return event; } }) - .sort((a, b) => new Date(a.time) - new Date(b.time)), - }); - this.setState({ catergoryFilterLoading: false }); + .sort((a, b) => new Date(a.time) - new Date(b.time)) + ); + setCategoryFilterLoading(false); }; - filterEvents = () => { - const { filter } = this.state; - this.setState({ catergoryFilterLoading: true }); + const filterEvents = () => { + setCategoryFilterLoading(true); fetch( - `${process.env.BASE_URI}/event/?Virtual=${filter.Virtual}&event_time=${filter.event_time}&catName=${filter.catName}`, + `${process.env.BASE_URI}/event/?Virtual=${filter.Virtual}&event_time=${filter.event_time}&catName=${filter.catName}` ) .then((response) => response.json()) .then((response) => { setTimeout(() => { - this.setEventState(response); + setEventState(response); }, 1500); }); }; - findSavedEvents = () => { - if (this.props.userData !== null) { - this.state.userEvents.map((all) => { + const findSavedEvents = () => { + if (userData !== null) { + userEvents?.map((all) => { if (all.event_id !== null) { if ( - all.user_id._id === this.props.userData._id - && all.event_id.approved !== null - && all.event_id.approved === true + all.user_id._id === userData._id && + all.event_id.approved !== null && + all.event_id.approved === true ) { - this.setState({ - userSavedEvents: [...this.state.userSavedEvents, all], - }); + setUserSavedEvents((current) => [...current, all]); } } }); - this.setState({ - userSavedEvents: this.state.allsavedEvents.filter( - (event) => event.user_id._id === this.props.userData._id, - ), - }); - - return this.state.userSavedEvents; + setUserSavedEvents((current) => + current.filter((event) => event.user_id._id === userData._id) + ); + return userSavedEvents; } return false; }; - render() { - const { - userData, active, clickRegister, setClickRegister, token, - } = this.props; - const { userSavedEvents, allsavedEvents } = this.state; - - const options = [ - { - label: 'Event Location', - options: [ - { label: 'Virtual Event', value: 'Virtual Event' }, - { label: 'In-person Event', value: 'In-person Event' }, - ], - }, - { - label: 'happening in', - options: [ - { label: 'Week', value: 'Week' }, - { label: 'Month', value: 'Month' }, - ], - }, - { - label: 'Cost', - options: [ - { label: 'Free', value: 'Free' }, - { label: 'Paid', value: 'Paid' }, - ], - }, - ]; + const handleSubmit = async (e) => { + e.preventDefault(); - const handleSubmit = async (e) => { - e.preventDefault(); + if (e.target.childNodes[0].value) { + const searchValue = e.target.childNodes[0].value; + setAllEvent((current) => + [...current].filter((event) => + event.eventName.toLowerCase().includes(searchValue.toLowerCase()) + ) + ); + setPastEvent((current) => + [...current].filter((event) => + event.eventName.toLowerCase().includes(searchValue.toLowerCase()) + ) + ); + setSwiperData((current) => + [...current].filter((event) => + event.eventName.toLowerCase().includes(searchValue.toLowerCase()) + ) + ); + } else { + filterEvents(); + } + }; - if (e.target.childNodes[0].value) { - const searchValue = e.target.childNodes[0].value; - this.setState({ - AllEvent: [...this.state.AllEvent].filter((event) => event.eventName.toLowerCase().includes(searchValue.toLowerCase())), - }); - this.setState({ - PastEvent: [...this.state.PastEvent].filter((event) => event.eventName.toLowerCase().includes(searchValue.toLowerCase())), - }); - this.setState({ - Swiperdata: [...this.state.Swiperdata].filter((event) => event.eventName.toLowerCase().includes(searchValue.toLowerCase())), - }); + const handleMoreInfo = (item) => { + if (showCreateEvent === true) { + if (showMoreInfo === true) { + setMoreInfoData([]); + setShowMoreInfo(false); } else { - this.filterEvents(); + setMoreInfoData(createEventData); + setShowMoreInfo(true); } - }; - // Handle showMoreInfo change - const handleMoreInfo = (item) => { - if (this.state.showCreateEvent === true) { - if (this.state.showMoreInfo === true) { - this.setState({ moreInfoData: [], showMoreInfo: false }); - } else { - const data = this.state.createEventData; - this.setState({ moreInfoData: data, showMoreInfo: true }); - } - } else if (this.state.showMoreInfo === false) { - this.setState({ moreInfoData: item, showMoreInfo: true }); - } else { - this.setState({ moreInfoData: [], showMoreInfo: false }); - } - }; - const handleCreateEvent = () => { - if (this.state.showCreateEvent === false) { - this.setState({ showCreateEvent: true }); + } else if (showMoreInfo === false) { + setMoreInfoData(item); + setShowMoreInfo(true); + } else { + setMoreInfoData([]); + setShowMoreInfo(false); + } + }; + + const handleCreateEvent = () => { + if (showCreateEvent === false) { + showCreateEvent(true); + } else { + showCreateEvent(false); + const changedState = { + ...createEventData, + step: 0, + EventPicture: "", + }; + setCreateEventData(changedState); + } + }; + + const handleError = (input) => { + let changedState = { ...createEventData }; + if (input === "isError") { + if (createEventData.isError === false) { + changedState = { ...createEventData, [input]: true }; } else { - this.setState({ showCreateEvent: false }); - const changedState = { - ...this.state.createEventData, - step: 0, - EventPicture: '', - }; - this.setState({ createEventData: changedState }); + changedState = { ...createEventData, [input]: false }; } - }; + setCreateEventData(changedState); + } + }; - const handleError = (input) => { - let changedState = { ...this.state.createEventData }; - if (input === 'isError') { - if (this.state.createEventData.isError === false) { - changedState = { ...this.state.createEventData, [input]: true }; - } else { - changedState = { ...this.state.createEventData, [input]: false }; - } - this.setState({ createEventData: changedState }); - } - }; + const conditionalInfinite = { + arrows: false, + dots: false, + speed: 2000, + slidesToShow: 2, + infinite: Swiperdata?.length > 2, + autoplay: true, + slidesToScroll: 1, + className: "profile__projects-slider", + afterChange: (current) => setCurrentIndex(current), + responsive: [ + { + breakpoint: 1755, + settings: { + slidesToShow: 2, + infinite: Swiperdata?.length > 2, + }, + }, + { + breakpoint: 1180, + settings: { + slidesToShow: 1, + infinite: Swiperdata?.length > 1, + }, + }, + ], + }; - const handleEventDateTime = (inputDateTime) => { - this.setState({ - eventDateTime: inputDateTime.toISOString(), - }); - const changedState = [this.state.createEventData]; - changedState[0].time = inputDateTime.toISOString(); - this.setState({ changedState }); - }; + const handleEventDateTime = (inputDateTime) => { + setEventDateTime(inputDateTime.toISOString()); + const changedState = [...createEventData]; + changedState[0].time = inputDateTime.toISOString(); + setCreateEventData(changedState); + }; - const handleCreateEventData = (input) => (e) => { - if (input === 'step') { - const { step } = this.state.createEventData; - const changedState = { - ...this.state.createEventData, - [input]: step + 1, - }; - this.setState({ createEventData: changedState }); - if (step === 2) { - handleMoreInfo(); + const handleCreateEventData = (input) => (e) => { + if (input === "step") { + const { step } = createEventData; + const changedState = { + ...createEventData, + [input]: step + 1, + }; + setCreateEventData(changedState); + if (step === 2) { + handleMoreInfo(); + } + } else if (input === "catName" || input === "Virtual") { + if (input === "eventDate") { + if (createEventData?.eventTime?.length === 0) { + const changedState = { + ...createEventData, + [input]: e.target.value, + time: `${e.target.value}T00:00:00.000Z`, + }; + setCreateEventData(changedState); + } else { + const changedState = { + ...createEventData, + [input]: e.target.value, + time: `${e.target.value}T${createEventData?.eventTime}:00.000Z`, + }; + createEventData(changedState); } - } else if (input === 'catName' || input === 'Virtual') { - const changedState = { - ...this.state.createEventData, - [input]: e.value, - [`${input}Options`]: e, - }; - this.setState({ createEventData: changedState }); - } else if (input === 'eventDate' || input === 'eventTime') { - if (input === 'eventDate') { - if (this.state.createEventData.eventTime.length === 0) { - const changedState = { - ...this.state.createEventData, - [input]: e.target.value, - time: `${e.target.value}T00:00:00.000Z`, - }; - this.setState({ createEventData: changedState }); - } else { - const changedState = { - ...this.state.createEventData, - [input]: e.target.value, - time: `${e.target.value}T${this.state.createEventData.eventTime}:00.000Z`, - }; - this.setState({ createEventData: changedState }); - } - } else if (input === 'eventTime') { - if (this.state.createEventData.eventDate.length === 0) { - const changedState = { - ...this.state.createEventData, - [input]: e.target.value, - time: `2021-01-01'T${e.target.value}:00.000Z`, - }; - this.setState({ createEventData: changedState }); - } else { - const changedState = { - ...this.state.createEventData, - [input]: e.target.value, - time: `${this.state.createEventData.eventDate}T${e.target.value}:00.000Z`, - }; - this.setState({ createEventData: changedState }); - } + } else if (input === "eventTime") { + if (createEventData.eventDate?.length === 0) { + const changedState = { + ...createEventData, + [input]: e.target.value, + time: `2021-01-01'T${e.target.value}:00.000Z`, + }; + setCreateEventData(changedState); } - } else { - const changedState = { - ...this.state.createEventData, - [input]: e.target.value, - }; - this.setState({ createEventData: changedState }); } - }; - - const handleCreateEventPicture = (input) => { + } else { const changedState = { - ...this.state.createEventData, - EventPicture: input, + ...createEventData, + [input]: e.target.value, }; - this.setState({ createEventData: changedState }); - }; + setCreateEventData(changedState); + } + }; - const selectStyles = { - menu: (provided) => ({ - ...provided, - padding: 10, - cursor: 'pointer', - backgroundColor: 'var(--secondary-high-contrast)', - zIndex: '2', - }), - input: (provided) => ({ - ...provided, - padding: 0, - height: 50, - minHeight: 50, - }), - container: (provided) => ({ - ...provided, - padding: 0, - height: 50, - minHeight: 50, - width: 200, - minWidth: 200, - '@media only screen and (max-width: 666px)': { - width: '80%', - minWidth: '80%', - }, - }), - indicatorsContainer: (provided) => ({ - ...provided, - padding: 0, - height: 50, - minHeight: 50, - }), - valueContainer: (provided) => ({ - ...provided, - height: 50, - minHeight: 50, - }), - control: (base) => ({ - ...base, - backgroundColor: 'var(--secondary-high-contrast)', - '&:hover': { borderColor: 'var(--tertiary-accent-3)' }, - border: '1px solid var(--secondary-accent)', - boxShadow: 'none', - padding: 0, - height: 50, - minHeight: 50, - }), - option: (provided, state) => ({ - ...provided, - backgroundColor: state.isSelected ? 'var(--tertiary-low-contrast)' : 'none', - '&:hover': { backgroundColor: 'var(--tertiary-high-contrast)' }, - '&:focused': { backgroundColor: 'none' }, - color: '#fff', - cursor: 'pointer', - padding: 10, - }), - placeholder: (base) => ({ - ...base, - fontSize: '1em', - color: 'var(--light-low-contrast)', - fontWeight: 500, - }), - indicatorSeparator: (base) => ({ - ...base, - display: 'none', - }), - groupHeading: (base) => ({ - ...base, - fontSize: '1.02em', - color: '#afafaf', - fontWeight: 700, - }), + const handleCreateEventPicture = (input) => { + const changedState = { + ...createEventData, + EventPicture: input, }; + setCreateEventData(changedState); + }; - const fetchEvents = async () => { - const dateNow = Date.now(); - const response = await axios.get(`${process.env.BASE_URI}/event`, { - headers: { - 'Access-Control-Allow-Origin': '*', - 'Access-Control-Allow-Methods': 'POST, GET', - 'Access-Control-Allow-Headers': 'Content-Type', - }, - }); - this.setState({ - Swiperdata: response.data.data.filter((event) => { - const eventTime = new Date(event.time).getTime(); - if ( - dateNow < eventTime - && event.approved !== null - && event.approved === true - ) { - return event.Featured === true; - } - }), - }); - this.setState({ - AllEvent: response.data.data.filter((event) => { - const eventTime = new Date(event.time).getTime(); - if ( - dateNow < eventTime - && event.approved !== null - && event.approved === true - ) { - return event; - } - }), - }); - this.setState({ - PastEvent: response.data.data.filter((event) => { - const eventTime = new Date(event.time).getTime(); - if ( - dateNow > eventTime - && event.approved !== null - && event.approved === true - ) { - return event; - } - }), - }); - }; + const selectStyles = { + menu: (provided) => ({ + ...provided, + padding: 10, + cursor: "pointer", + backgroundColor: "var(--secondary-high-contrast)", + zIndex: "2", + }), + input: (provided) => ({ + ...provided, + padding: 0, + height: 50, + minHeight: 50, + }), + container: (provided) => ({ + ...provided, + height: 50, + minHeight: 50, + width: 200, + minWidth: 200, - const onChangeInput = async (value) => { - if ((await value) != null) { - if (value.value === 'Virtual Event') { - this.setState((prevState) => ({ - filter: { - ...prevState.filter, - Virtual: true, - }, - })); - } - if (value.value === 'In-person Event') { - this.setState((prevState) => ({ - filter: { - ...prevState.filter, - Virtual: false, - }, - })); + "@media only screen and (max-width: 666px)": { + width: "80%", + minWidth: "80%", + }, + }), + indicatorsContainer: (provided) => ({ + ...provided, + padding: 0, + height: 50, + minHeight: 50, + }), + valueContainer: (provided) => ({ + ...provided, + height: 50, + minHeight: 50, + }), + control: (base) => ({ + ...base, + backgroundColor: "var(--secondary-high-contrast)", + "&:hover": { borderColor: "#6938EF" }, + border: "1px solid var(--secondary-accent)", + boxShadow: "none", + padding: 0, + height: 50, + minHeight: 50, + borderRadius: "50px", + }), + option: (provided, state) => ({ + ...provided, + backgroundColor: state.isSelected ? "#6938EF" : "none", + "&:hover": { + backgroundColor: "#6938EF", + transition: "all 0.3s ease-in", + }, + "&:focused": { backgroundColor: "#6938EF", color: "#6938EF" }, + color: "#fff", + cursor: "pointer", + padding: 10, + }), + placeholder: (base) => ({ + ...base, + fontSize: "12px", + color: "#fff", + fontWeight: 500, + }), + indicatorSeparator: (base) => ({ + ...base, + display: "none", + }), + groupHeading: (base) => ({ + ...base, + fontSize: "1.02em", + color: "#fff", + fontWeight: 700, + }), + }; + + const fetchEvents = async () => { + const dateNow = Date.now(); + const response = await axios.get(`${process.env.BASE_URI}/event`, { + headers: { + "Access-Control-Allow-Origin": "*", + "Access-Control-Allow-Methods": "POST, GET", + "Access-Control-Allow-Headers": "Content-Type", + }, + }); + setSwiperData(() => + response.data.data.filter((event) => { + const eventTime = new Date(event.time).getTime(); + if ( + dateNow < eventTime && + event.approved !== null && + event.approved === true + ) { + return event.Featured === true; } - if (value.value === 'Week') { - this.setState((prevState) => ({ - filter: { - ...prevState.filter, - event_time: 'week', - }, - })); + }) + ); + setAllEvent(() => + response.data.data.filter((event) => { + const eventTime = new Date(event.time).getTime(); + if ( + dateNow < eventTime && + event.approved !== null && + event.approved === true + ) { + return event; } - if (value.value === 'Month') { - this.setState((prevState) => ({ - filter: { - ...prevState.filter, - event_time: 'month', - }, - })); + }) + ); + setPastEvent(() => + response.data.data.filter((event) => { + const eventTime = new Date(event.time).getTime(); + if ( + dateNow > eventTime && + event.approved !== null && + event.approved === true + ) { + return event; } - } else { - fetchEvents(); - } - - this.filterEvents(); - }; + }) + ); + }; - const { - categoryButtons, - categoryButtonsActiveIndex, - catergoryFilterLoading, - AllEvent, - PastEvent, - Swiperdata, - } = this.state; + const onChangeInput = async (value) => { + if ((await value) !== null) { + if (value.value === "Virtual Event") { + setFilters((current) => [{ ...current.filter, Virtual: true }]); + } + if (value.value === "In-person Event") { + setFilters((current) => [{ ...current.filter, Virtual: false }]); + } + if (value.value === "Week") { + setFilters((current) => [{ ...current.filter, event_time: "week" }]); + } + if (value.value === "Month") { + setFilters((current) => [{ ...current.filter, event_time: "month" }]); + } + } else { + fetchEvents(); + } + filterEvents(); + }; - const categoryFilter = async (idx) => { - this.setState({ catergoryFilterLoading: true }); - await this.setState({ categoryButtonsActiveIndex: idx }); + const categoryFilter = async (idx) => { + setCategoryFilterLoading(true); + setCategoryButtonsActiveIndex(idx); - if (idx === categoryButtonsActiveIndex) { - await this.setState({ categoryButtonsActiveIndex: -1 }); + if (idx === categoryButtonsActiveIndex) { + setCategoryButtonsActiveIndex(-1); + } + if (idx !== -1) { + if (idx === 0) { + if (categories.includes("Webinar") || categories.includes("Lecture")) { + setCategories((current) => + [...current].filter( + (category) => category !== "Webinar" && category !== "Lecture" + ) + ); + } + } else { + setCategories((current) => [...current, "Webinar", "Lecture"]); } - if (idx !== -1) { - if (idx === 0) { - if ( - (await this.state.categories.includes('Webinar')) - || this.state.categories.includes('Lecture') - ) { - this.setState({ - categories: [...this.state.categories].filter( - (category) => category !== 'Webinar' && category !== 'Lecture', - ), - }); - } else { - await this.setState({ - categories: [...this.state.categories, 'Webinar', 'Lecture'], - }); - } - } - await this.setState((prevState) => ({ - filter: { - ...prevState.filter, - catName: this.state.categories, - }, - })); - if (idx === 1) { - if ( - this.state.categories.includes('Workshop') - || this.state.categories.includes('Conference') - ) { - this.setState({ - categories: [...this.state.categories].filter( - (category) => category !== 'Workshop' && category !== 'Conference', - ), - }); - } else { - await this.setState({ - categories: [...this.state.categories, 'Workshop', 'Conference'], - }); - } - } - await this.setState((prevState) => ({ - filter: { - ...prevState.filter, - catName: this.state.categories, - }, - })); - if (idx === 2) { - if (this.state.categories.includes('Hackathon')) { - this.setState({ - categories: [...this.state.categories].filter( - (category) => category !== 'Hackathon', - ), - }); - } else { - await this.setState({ - categories: [...this.state.categories, 'Hackathon'], - }); - } + setFilters((current) => [{ ...current, catName: categories }]); + if (idx === 1) { + if ( + categories.includes("Workshop") || + categories.includes("Conference") + ) { + setCategories((current) => + [...current].filter((category) => { + category !== "Workshop" && category !== "Conference"; + }) + ); + } else { + setCategories((current) => [...current, "Workshop", "Conference"]); } - await this.setState((prevState) => ({ - filter: { - ...prevState.filter, - catName: this.state.categories, - }, - })); - if (idx === 3) { - if ( - this.state.categories.includes('Incubator') - || this.state.categories.includes('Accelerator') - ) { - this.setState({ - categories: [...this.state.categories].filter( - (category) => category !== 'Incubator' && category !== 'Accelerator', - ), - }); - } else { - await this.setState({ - categories: [ - ...this.state.categories, - 'Incubator', - 'Accelerator', - ], - }); - } + } + setFilters((current) => [{ ...current, catName: categories }]); + if (idx === 2) { + if (categories.includes("Hackathon")) { + setCategories((current) => + [...current].filter((category) => category !== "Hackathon") + ); + } else { + setCategories((current) => [...current, "Hackathon"]); } - await this.setState((prevState) => ({ - filter: { - ...prevState.filter, - catName: this.state.categories, - }, - })); - } /* else { } */ - this.filterEvents(); - }; + } + setFilters((current) => [{ ...current, catName: categories }]); - const searchNoValue = (e) => { - if (!e.target.value) fetchEvents(); - }; + if (idx === 3) { + if ( + categories.includes("Incubator") || + categories.includes("Accelerator") + ) { + setCategories((current) => + [...current].filter( + (category) => + category !== "Incubator" && category !== "Accelerator" + ) + ); + } else { + setCategories((current) => [...current, "Incubator, Accelerator"]); + } + } + setFilters((current) => [{ ...current, catName: categories }]); + } + filterEvents(); + }; - const resetFilter = async () => { - await this.setState({ categories: [] }); - this.setState((prevState) => ({ - filter: { - ...prevState.filter, - catName: this.state.categories, - }, - })); + const searchNoValue = (e) => { + if (!e.target.value) fetchEvents(); + }; - this.setState({ categoryButtonsActiveIndex: -1 }); + const resetFilter = () => { + setCategories([]); + setFilters((current) => [{ ...current, catName: categories }]); + setCategoryButtonsActiveIndex(-1); + categoryButtons?.map((button) => { + button.activebtn = false; + }); + filterEvents(); + }; - this.state.categoryButtons.map((button) => { - button.activebtn = false; - }); - this.filterEvents(); - }; + const clearFilters = () => [ + getEvents(), + getSavedEvents(), + getUserSavedEvents(), + filterEvents(), + ]; - return ( -
-
-
-
handleSubmit(e)}> + return ( +
+
+
+ handleSubmit(e)}> +
+ searchNoValue(e)} /> - - +
+ + +
+ background +
+
+ {options.map(({ label, options }) => ( +
+
*/} +
-
- {categoryButtons.map((button, idx) => ( - { - button.activebtn = !button.activebtn; - }} - /> - ))} +
+ {categoryButtons.map((button, idx) => ( + { + button.activebtn = !button.activebtn; + }} + /> + ))} - {[...categoryButtons].filter((button) => button.activebtn === true) - .length > 0 ? ( - - ) : ( - '' - )} -
+ {[...categoryButtons].filter((button) => button.activebtn === true) + ?.length > 0 ? ( + + ) : ( + "" + )} +
+
+ background +
-
-

Featured Events

-
-
-
-
-
-
-
-
+
+

Featured Events

+
- {/* LOADING SKELETON HERE */} -
- {this.state.loading ? ( -
-
- -
-
- -
-
- -
-
- -
+ {/* LOADING SKELETON HERE */} +
+ {loading ? ( +
+
+
- ) : catergoryFilterLoading ? ( -
-
- -
-
- -
-
- -
-
- -
+
+
- ) : Swiperdata.length < 1 ? ( -
-
- Sorry, no events match your filters -
+
+ ) : categoryFilterLoading ? ( +
+
+
- ) : ( -
- {this.state.Swiperdata.map((event, index) => ( -
+
+ +
+
+ ) : Swiperdata?.length < 1 ? ( +
+ Sorry, no events match your filters +
+ ) : ( + <> +
+ + {Swiperdata?.map((event, index) => ( + ))} + +
+
+ control +

+ {Swiperdata?.length > 2 + ? `${currentIndex + 1}/${Swiperdata?.length}` + : "1/1"} +

+ control
- ))} +
- )} -
-
-

Active Events

-
-
- {/* LOADING SKELETON HERE */} -
- {this.state.loading ? ( -
- - - - -
- ) : catergoryFilterLoading ? ( -
- - - - -
- ) : ( -
- {AllEvent.length < 1 && ( -
Sorry, no events match your filters
- )} - {this.state.AllEvent.map((events, index) => ( - - ))} +
+ bg
- )} -
+ + )} +
-
-

Past Events

-
-
- {/* LOADING SKELETON HERE */} -
- {this.state.loading ? ( -
- - - - -
- ) : catergoryFilterLoading ? ( -
- - - - -
- ) : ( -
- {PastEvent.length < 1 && ( -
Sorry, no events match your filters
- )} - {this.state.PastEvent.map((events, index) => ( - - ))} -
- )} -
+
+

Active Events

+
+ {/* LOADING SKELETON HERE */} +
+ {loading ? ( +
+ + +
+ ) : categoryFilterLoading ? ( +
+ + +
+ ) : ( +
+ {AllEvent?.length < 1 && ( +
+ Sorry, no events match your filters +
+ )} + {AllEvent?.map((events, index) => ( + + ))} +
+ )} +
+ +
+

Past Events

+
+ {/* LOADING SKELETON HERE */} +
+ {loading ? ( +
+ + +
+ ) : categoryFilterLoading ? ( +
+ + +
+ ) : ( +
+ {PastEvent?.length < 1 && ( +
+ Sorry, no events match your filters +
+ )} -
-
-

My Events

-
+
+ )} +
- {userData !== null ? ( -
- {this.state.loading ? ( -
-
- -
-
- -
-
- -
-
- -
+
+
+

My Events

+
+ + {userData !== null ? ( +
+ {loading ? ( +
+
+
- ) : catergoryFilterLoading ? ( -
-
- -
-
- -
-
- -
-
- -
+
+
- ) : this.state.userEvents.length === 0 ? ( -
-

You have not registered to any events yet.

+
+
- ) : ( - <> -
- {this.state.userEvents - .filter( - (e) => (e.attending === 'yes' - || e.attending === 'maybe') - && e.event_id !== null, - ) - .map((events, index) => ( -
- -
- ))} -
-
-
-
-
-
-
- - )} -
- ) : ( -
-

Participate in events you enjoy

-

- Choose from the hundreds of virtual, hybrid, and IRL events in - the Minority Programmers network. -

- -
- + {/*
+ +
*/}
-
- )} - {this.state.showMyEvent ? ( -
-
{ - this.setState({ showMyEvent: false }); - }} - /> -
- + ) : catergoryFilterLoading ? ( +
+
+ +
+
+ +
+
+ +
+
+ +
- { - this.setState({ showMyEvent: false }); - }} - /> -
- ) : ( - '' - )} -
+ ) : userEvents?.length === 0 ? ( +
+

You have not registered to any events yet.

+
+ ) : ( + <> +
+ {userEvents + ?.filter( + (e) => + (e.attending === "yes" || e.attending === "maybe") && + e.event_id !== null + ) + ?.map((events, index) => ( +
+ +
+ ))} +
+
+ background +
+
+
+
+
+
+
+ + )} +
+ ) : ( +
+

Participate in events you enjoy

+

+ Choose from the hundreds of virtual, hybrid, and IRL events in + the Minority Programmers network. +

-
-
-

Create your own event

-
- It could be a virtual party, workshop, meetup or seminar. Host - any event you want and share for people to join. -
-
+
-
-
- event1 -
-
-
- event2 -
-
-
- event3 -
-
- event4 -
-
-
-
-
- {this.state.showCreateEvent && ( - )} - {this.state.showMoreInfo && ( - - )} - {this.props.clickRegister && !this.props.active ? ( + {showMyEvent ? (
{ - setClickRegister(false); + setShowMyEvent(false); }} />
{ - setClickRegister(false); + setShowMyEvent(false); }} />
) : ( - '' + "" )}
+ +
+
+

Create your own event

+
+ It could be a virtual party, workshop, meetup or seminar. Host any + event you want and share for people to join. +
+
+ +
+
+
+
+ event1 +
+
+
+ event2 +
+
+
+ event3 +
+
+ event4 +
+
+
+
+
+ {showCreateEvent && ( + + )} + {showMoreInfo && ( + + )} + {clickRegister && !active ? ( +
+
{ + setClickRegister(false); + }} + /> +
+ +
+ { + setClickRegister(false); + }} + /> +
+ ) : ( + "" + )}
- ); - } -} +
+ ); +}; export default Event; diff --git a/components/Events/EventCard.js b/components/Events/EventCard.js index 980c8c05..f7807f32 100644 --- a/components/Events/EventCard.js +++ b/components/Events/EventCard.js @@ -1,9 +1,9 @@ /* eslint-disable max-len */ -import React, { useState } from 'react'; -import Link from 'next/link'; -import Moment from 'moment'; -import axios from 'axios'; -import { successToast, errorToast } from '../../contexts/utils/toasts'; +import React, { useState } from "react"; +import Link from "next/link"; +import Moment from "moment"; +import axios from "axios"; +import { successToast, errorToast } from "../../contexts/utils/toasts"; const EventCardFeatured = (props) => { const { @@ -22,20 +22,20 @@ const EventCardFeatured = (props) => { const [, setLoading] = useState(false); const [liked, setLiked] = useState(false); const dateNow = Date.now(); - const eventTime = new Date(props.item ? props.item.time : '').getTime(); + const eventTime = new Date(props.item ? props.item.time : "").getTime(); const sId = userSavedEvents.map((se) => se.event_id?._id); const sAtt = userSavedEvents.map((se) => se?.attending); // Check saveEvents to change label const checkSaveEvent = (val) => { - if (val === 'Register') { + if (val === "Register") { for (let i = 0; i < userSavedEvents.length; i += 1) { if ( - userSavedEvents !== null - && userSavedEvents[i].event_id?._id === props.item._id - && (userSavedEvents[i].attending === 'yes' - || userSavedEvents[i].attending === 'maybe') + userSavedEvents !== null && + userSavedEvents[i].event_id?._id === props.item._id && + (userSavedEvents[i].attending === "yes" || + userSavedEvents[i].attending === "maybe") ) { return ( {/* Check save events Register label */} - {eventTime < dateNow ? ( + {/* {eventTime < dateNow ? ( ) : ( {userData !== null ? ( - checkSaveEvent('Register') + checkSaveEvent("Register") ) : ( )} - {userData !== null && !checkSaveEvent('Register') ? ( + {userData !== null && !checkSaveEvent("Register") ? ( ) : ( - '' + "" )} - )} + )} */}
diff --git a/components/Events/EventCardFeatured.js b/components/Events/EventCardFeatured.js index ecc5eaa7..c2bc444d 100644 --- a/components/Events/EventCardFeatured.js +++ b/components/Events/EventCardFeatured.js @@ -1,9 +1,9 @@ /* eslint-disable max-len */ -import React, { useState } from 'react'; -import Link from 'next/link'; -import Moment from 'moment'; -import axios from 'axios'; -import { successToast, errorToast } from '../../contexts/utils/toasts'; +import React, { useState } from "react"; +import Link from "next/link"; +import Moment from "moment"; +import axios from "axios"; +import { successToast, errorToast } from "../../contexts/utils/toasts"; const EventCardFeatured = (props) => { const { @@ -26,13 +26,13 @@ const EventCardFeatured = (props) => { // Check saveEvents to change label const checkSaveEvent = (val) => { - if (val === 'Register') { + if (val === "Register") { for (let i = 0; i < userSavedEvents.length; i += 1) { if ( - userSavedEvents !== null - && userSavedEvents[i].event_id._id === props.item._id - && (userSavedEvents[i].attending === 'yes' - || userSavedEvents[i].attending === 'maybe') + userSavedEvents !== null && + userSavedEvents[i].event_id._id === props.item._id && + (userSavedEvents[i].attending === "yes" || + userSavedEvents[i].attending === "maybe") ) { return ( + {props.item && ( + + )} {/* Check save events Register label */} - {eventTime < dateNow ? ( + {/* {eventTime < dateNow ? (
diff --git a/components/Events/EventCardFeaturedSkeleton.js b/components/Events/EventCardFeaturedSkeleton.js index 2f86cd0b..aa3d2dc2 100644 --- a/components/Events/EventCardFeaturedSkeleton.js +++ b/components/Events/EventCardFeaturedSkeleton.js @@ -1,14 +1,14 @@ -import React from 'react'; -import ContentLoader from 'react-content-loader'; +import React from "react"; +import ContentLoader from "react-content-loader"; const EventCardFeaturedSkeleton = () => ( -
+
diff --git a/components/Events/EventCardSkeleton.js b/components/Events/EventCardSkeleton.js index 83b18206..90f507b5 100644 --- a/components/Events/EventCardSkeleton.js +++ b/components/Events/EventCardSkeleton.js @@ -1,14 +1,14 @@ -import React from 'react'; -import ContentLoader from 'react-content-loader'; +import React from "react"; +import ContentLoader from "react-content-loader"; const EventCardSkeleton = () => ( -
+
diff --git a/components/Events/EventMoreInfo.js b/components/Events/EventMoreInfo.js index 89c3e404..18703534 100644 --- a/components/Events/EventMoreInfo.js +++ b/components/Events/EventMoreInfo.js @@ -1,7 +1,7 @@ -import React, { useState, useEffect } from 'react'; -import Link from 'next/link'; -import Moment from 'moment'; -import axios from 'axios'; +import React, { useState, useEffect } from "react"; +import Link from "next/link"; +import Moment from "moment"; +import axios from "axios"; import { EmailShareButton, FacebookShareButton, @@ -9,8 +9,8 @@ import { TelegramShareButton, TwitterShareButton, WhatsappShareButton, -} from 'react-share'; -import { successToast, errorToast } from '../../contexts/utils/toasts'; +} from "react-share"; +import { successToast, errorToast } from "../../contexts/utils/toasts"; const EventMoreInfo = (props) => { const { @@ -57,21 +57,21 @@ const EventMoreInfo = (props) => { }, { headers: { - 'Content-Type': 'application/json', - Accept: 'application/json', + "Content-Type": "application/json", + Accept: "application/json", Authorization: `Bearer ${token}`, }, - }, + } ) .then((/* res */) => { setLoading(false); - successToast('You are registered!'); + successToast("You are registered!"); getUserSavedEvents(); }) .catch((err) => { console.log(err); setLoading(false); - errorToast('Something went wrong, please contact us.'); + errorToast("Something went wrong, please contact us."); }); } }; @@ -84,29 +84,29 @@ const EventMoreInfo = (props) => { axios .delete(`${process.env.BASE_URI}/saveEvent/${eventId}`, { headers: { - 'Content-Type': 'application/json', - Accept: 'application/json', + "Content-Type": "application/json", + Accept: "application/json", Authorization: `Bearer ${_token}`, }, }) .then((/* res */) => { setLoading(false); - successToast('removed event'); + successToast("removed event"); getUserSavedEvents(); }) .catch((err) => { console.log(err); setLoading(false); - errorToast('Something went wrong, please contact us.'); + errorToast("Something went wrong, please contact us."); }); } }; const checkSaveEvent = (val) => { - if (val === 'Register') { + if (val === "Register") { for (let i = 0; i < userSavedEvents.length; i += 1) { if ( - userSavedEvents[i].event_id?._id === data._id - || (userSavedEvents !== null && attended.attending === 'yes') + userSavedEvents[i].event_id?._id === data._id || + (userSavedEvents !== null && attended.attending === "yes") ) { return ( ); - } else if (labelTitle === 'workshop' || labelTitle === 'conference') { + } else if (labelTitle === "workshop" || labelTitle === "conference") { label = (

{Capitalize(catName)} @@ -262,7 +262,7 @@ const EventMoreInfo = (props) => { Export Event To Calendar ); - } else if (labelTitle === 'hackathon') { + } else if (labelTitle === "hackathon") { label = (

{Capitalize(catName)} @@ -276,7 +276,7 @@ const EventMoreInfo = (props) => { Export Event To Calendar ); - } else if (labelTitle === 'incubator' || labelTitle === 'accelerator') { + } else if (labelTitle === "incubator" || labelTitle === "accelerator") { label = (

{Capitalize(catName)} @@ -292,39 +292,38 @@ const EventMoreInfo = (props) => { ); } - const getEventDetailPhoto = () => allEvent - .filter((e) => e._id === data._id) - .map((n) => ( - + allEvent + .filter((e) => e._id === data._id) + .map((n) => ( + avatar - )); + style={{ + borderRadius: "50%", + width: "100px", + height: "100px", + objectFit: "cover", + marginRight: "20px", + }} + alt="avatar" + /> + )); - const getEventDetailName = () => allEvent - .filter((e) => e._id === data._id) - .map((n) => ( - <> -

{n.host.fistName}

-

- {' '} - {n.host.lastName} -

- - )); + const getEventDetailName = () => + allEvent + .filter((e) => e._id === data._id) + .map((n) => ( + <> +

{n.host.fistName}

+

{n.host.lastName}

+ + )); - Moment.locale('en'); + Moment.locale("en"); return (
@@ -338,238 +337,241 @@ const EventMoreInfo = (props) => { )}
-
- Event_Picture -
-
- {data.host && ( - handleMoreInfo()} - /> - )} -
- {data.host ? ( -
- {data.host.profilePicture ? ( + {data.host && ( + handleMoreInfo()} + /> + )} +
+
+ Event_Picture +
+
+
+

+ {data.eventName} {label} + {eventStatus && ( +
{eventStatus}
+ )} +

+
+
+ {data.host ? ( +
+ {data.host.profilePicture ? ( + Host Avatar + ) : ( + getEventDetailPhoto() + )} + +
+

Host

+ {data.host.firstName ? ( +

+ {data.host.firstName} {data.host.lastName} +

+ ) : ( + getEventDetailName() + )} +
+
+ ) : ( +
Host Avatar - ) : ( - getEventDetailPhoto() - )} - -
-

Host

- {data.host.firstName ? ( +
+

Host

- {data.host.firstName} - {' '} - {data.host.lastName} + {userData.firstName + ? userData.firstName + : data.host.fistName}{" "} + {userData.lastName + ? userData.lastName + : data.host.lastName}

+
+
+ )} + {createEventData.step === 2 ? ( + "" + ) : ( +
+ {eventTime < dateNow ? ( + ) : ( - getEventDetailName() + + {userData !== null ? ( + checkSaveEvent("Register") + ) : ( + + )} + {userData !== null && !checkSaveEvent("Register") ? ( + + ) : ( + "" + )} + )}
-
- ) : ( -
- Host Avatar -
-

Host

-

- {userData.firstName - ? userData.firstName - : data.host.fistName} - {' '} - {userData.lastName ? userData.lastName : data.host.lastName} -

-
-
- )} - {createEventData.step === 2 ? ( - '' - ) : ( -
- {Virtual === 'true' ? ( -

Virtual Event

+ )} +
+
+
+
+ Local Time +

{Moment(data.time).format("LLL")}

+ {/*

+ {totalAttendees(data._id)} + {totalAttendees(data._id) > 2 ? "people" : "person"} + {eventTime < dateNow ? "attended" : "attending"} +

*/} +

Location

+ {Virtual === "true" ? ( +

Virtual Event

) : ( -

In-Person Event

+

In-Person Event

)} - {eventTime < dateNow ? ( - + {eventTime < dateNow || createEventData.step === 2 ? ( + "" ) : ( - - {userData !== null ? ( - checkSaveEvent('Register') - ) : ( + <> +

Will you be attending?

+
- )} - {userData !== null && !checkSaveEvent('Register') ? ( - ) : ( - '' - )} - - )} -
- )} -
-
-
-
-
-

{data.eventName}

- {label} - {eventStatus && ( -
{eventStatus}
+ +
+ )} -
-
-

About event

-

{data.EventDescription}

-
-
-
- Local Time -

{Moment(data.time).format('LLL')}

-

- {totalAttendees(data._id)} - {totalAttendees(data._id) > 2 ? 'people' : 'person'} - {eventTime < dateNow ? 'attended' : 'attending'} -

- {eventTime < dateNow || createEventData.step === 2 ? ( - '' - ) : ( - <> -

Will you be attending?

-
- - - -
- - )} -

Share event

-
- - - - - - +

Share event

+
+ + + + + + - - - - - - - - - - - - + + + + + + + + + + + + +
+ {userData && eventTime > dateNow && createEventData.step !== 2 + ? exportButton + : ""}
- {userData && eventTime > dateNow && createEventData.step !== 2 - ? exportButton - : ''}
-
- {data.host ? ( -
- ) : ( -
-
- - + {data.host ? ( +
+ ) : ( +
+
+ + +
-
- )} + )} +
+
+
+
+

About Event

+

{data.EventDescription}

+
diff --git a/components/Events/PastEventCard.js b/components/Events/PastEventCard.js new file mode 100644 index 00000000..a96ae909 --- /dev/null +++ b/components/Events/PastEventCard.js @@ -0,0 +1,69 @@ +import React, { useState } from "react"; +import EventCard from "./EventCard"; +import ReactPaginate from "react-paginate"; + +const PastEventCard = ({ + data, + attended, + userSavedEvents, + userEvent, + active, + handleMoreInfo, + setClickRegister, + clickRegister, + userData, + token, + allsavedEvents, + getUserSavedEvents, +}) => { + const [pageNumber, setPageNumber] = useState(0); + + const perPage = 4; + const pagesVisited = pageNumber * perPage; + + const pageCount = Math.ceil(data?.length / perPage); + + const changePage = ({ selected }) => { + setPageNumber(selected); + }; + + return ( +
+
+ {data?.slice(pagesVisited, pagesVisited + perPage).map((d, i) => ( + + ))} +
+ +
+ ); +}; + +export default PastEventCard; diff --git a/components/HomepageCore.js b/components/HomepageCore.js index 112f03cc..78bbcfa8 100644 --- a/components/HomepageCore.js +++ b/components/HomepageCore.js @@ -1,6 +1,5 @@ /* import React, { useState } from 'react'; import Swiper from 'react-id-swiper'; -import 'swiper/css/swiper.css'; const CORE_PRINCIPLES = [ { diff --git a/components/featured/FeaturedCard.js b/components/featured/FeaturedCard.js index 883e67c3..c6db88cf 100644 --- a/components/featured/FeaturedCard.js +++ b/components/featured/FeaturedCard.js @@ -92,7 +92,7 @@ const FeaturedCard = ({ data, setClickRegister, userData, allfunded }) => {
{/* Add popup when button is clicked */} - {!allfunded.includes(data._id) && ( + {/* {!allfunded.includes(data._id) && ( - )} + )} */} Learn More diff --git a/components/featured/FeaturedUpcoming.js b/components/featured/FeaturedUpcoming.js index 707dce05..d63a621c 100644 --- a/components/featured/FeaturedUpcoming.js +++ b/components/featured/FeaturedUpcoming.js @@ -46,14 +46,14 @@ const FeaturedUpcoming = ({ data, setClickRegister, userData, allfunded }) => {

All Startups

-
+
setSearch(e.target.value)} />
-
diff --git a/components/learn/courseDetails/ActivityDetails.js b/components/learn/courseDetails/ActivityDetails.js index 31f71605..4167be73 100644 --- a/components/learn/courseDetails/ActivityDetails.js +++ b/components/learn/courseDetails/ActivityDetails.js @@ -1,17 +1,17 @@ /* eslint-disable react/jsx-no-constructed-context-values */ -import React, { useEffect, useState, createContext } from 'react'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'; -import { faClock } from '@fortawesome/free-regular-svg-icons'; -import { useRouter } from 'next/router'; -import ReactPlayer from 'react-player'; +import React, { useEffect, useState, createContext } from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons"; +import { faClock } from "@fortawesome/free-regular-svg-icons"; +import { useRouter } from "next/router"; +import ReactPlayer from "react-player"; import { CircularProgressbarWithChildren, buildStyles, -} from 'react-circular-progressbar'; -import QuizModal from '../quizActivity/QuizModal'; -import CourseSidebar from './CourseSidebar'; -import 'react-circular-progressbar/dist/styles.css'; +} from "react-circular-progressbar"; +import QuizModal from "../quizActivity/QuizModal"; +import CourseSidebar from "./CourseSidebar"; +import "react-circular-progressbar/dist/styles.css"; export const QuizContext = createContext(); @@ -32,13 +32,12 @@ const ActivityDetails = ({ const [disable, setDisable] = useState(false); const router = useRouter(); const { courseId, moduleLevel, moduleId } = router.query; - const { - completionStatus, completionRate, completed, _id, - } = singleUserModuleInfo; + const { completionStatus, completionRate, completed, _id } = + singleUserModuleInfo; useEffect(() => { const singleCourse = enrolledCourses?.filter( - (_course) => _course.courseId._id === courseId, + (_course) => _course.courseId._id === courseId ); singleCourse.forEach((_course) => { setCourse(_course?.courseId); @@ -46,7 +45,7 @@ const ActivityDetails = ({ }, [courseId]); const specificModules = modules.filter( - (module) => module.level === moduleLevel, + (module) => module.level === moduleLevel ); for (let i = 0; i < specificModules.length; i += 1) { specificModules[i].elementKey = i; @@ -57,8 +56,11 @@ const ActivityDetails = ({ return null; } - const specificUserModules = userModules - && userModules.filter((eModule) => specificModules.some((module) => eModule.moduleId._id === module._id)); + const specificUserModules = + userModules && + userModules.filter((eModule) => + specificModules.some((module) => eModule.moduleId._id === module._id) + ); const userModulesId = []; specificUserModules.forEach((module) => { @@ -67,24 +69,23 @@ const ActivityDetails = ({ const onStart = () => { if (completionRate < 50) { - const userToken = JSON.parse(localStorage.getItem('userInfo')).token; + const userToken = JSON.parse(localStorage.getItem("userInfo")).token; fetch(`${process.env.BASE_URI}/learn/${courseId}/${moduleId}/${_id}`, { - method: 'PATCH', + method: "PATCH", headers: { - 'Content-Type': 'application/json', + "Content-Type": "application/json", Authorization: `Bearer ${userToken}`, }, body: JSON.stringify({ completionRate: 50, }), - }) - .then((res) => res.json()); + }).then((res) => res.json()); } }; const nextElementKey = moduleInfo.elementKey + 1; const nextModuleDetails = specificModules?.find( - (module) => module.elementKey === nextElementKey, + (module) => module.elementKey === nextElementKey ); const forwardInfo = () => { @@ -94,11 +95,11 @@ const ActivityDetails = ({ if (userModulesId.includes(nextModuleId)) { router.push(nextModuleInfo); } else { - const userToken = JSON.parse(localStorage.getItem('userInfo')).token; + const userToken = JSON.parse(localStorage.getItem("userInfo")).token; fetch(`${process.env.BASE_URI}/learn/${courseId}/module`, { - method: 'POST', + method: "POST", headers: { - 'Content-Type': 'application/json', + "Content-Type": "application/json", Authorization: `Bearer ${userToken}`, }, body: JSON.stringify({ @@ -125,7 +126,7 @@ const ActivityDetails = ({ }; const advancedModules = modules.filter( - (module) => module.level === 'advanced', + (module) => module.level === "advanced" ); const lastAdvancedModules = advancedModules[advancedModules.length - 1]; @@ -133,7 +134,7 @@ const ActivityDetails = ({
{/*
*/} -
-
- -

+

{moduleInfo.name}

-
{/* youtube player */} -
-
+
+
@@ -192,14 +216,13 @@ const ActivityDetails = ({
- {moduleInfo.elementKey !== specificModules.length - 1 && ( <> {completed === false ? ( @@ -220,7 +243,10 @@ const ActivityDetails = ({
-
+
@@ -228,26 +254,33 @@ const ActivityDetails = ({

{completionStatus}

-

{moduleInfo.description}

+

+ {moduleInfo.description} +

@@ -263,13 +296,18 @@ const ActivityDetails = ({
@@ -287,7 +325,9 @@ const ActivityDetails = ({
-

Addtional Resources

+

+ Addtional Resources +

@@ -307,7 +347,7 @@ const ActivityDetails = ({
Module Completed!
@@ -316,11 +356,11 @@ const ActivityDetails = ({ value={completionRate} strokeWidth={4} styles={buildStyles({ - pathColor: '#ffc700', - trailColor: '#B9BCC1', - strokeLinecap: 'butt', + pathColor: "#ffc700", + trailColor: "#B9BCC1", + strokeLinecap: "butt", rotation: 0.25, - transition: 'stroke-dashoffset 0.5s ease 0s', + transition: "stroke-dashoffset 0.5s ease 0s", })} > {userInfo != null && userInfo.profilePicture ? ( @@ -339,19 +379,16 @@ const ActivityDetails = ({ ;
-

- - {completionRate} - % Completed - +

+ {completionRate}% Completed

You just completed
-
+
{moduleInfo.name}
@@ -368,7 +405,7 @@ const ActivityDetails = ({ className="pb-4 pt-2" data-dismiss="modal" aria-label="Close" - style={{ cursor: 'pointer' }} + style={{ cursor: "pointer" }} > Cancel

@@ -377,7 +414,7 @@ const ActivityDetails = ({
-
+
); }; diff --git a/components/startup/StartupTopBar.js b/components/startup/StartupTopBar.js index 6c72f460..5856582d 100644 --- a/components/startup/StartupTopBar.js +++ b/components/startup/StartupTopBar.js @@ -1,5 +1,5 @@ -import React from 'react'; -import { numFormat, convert, percentFund } from '../../helpers/formatIncubator'; +import React from "react"; +import { numFormat, convert, percentFund } from "../../helpers/formatIncubator"; const StartupTopBar = ({ data }) => (
@@ -9,7 +9,11 @@ const StartupTopBar = ({ data }) => ( - startup_image + startup_image

{data.name}

@@ -18,33 +22,27 @@ const StartupTopBar = ({ data }) => (

Shares offered

-

- {convert(data.shareOffered)} - {' '} - shares -

+

{convert(data.shareOffered)} shares

Funds raised

- {percentFund(data.targetAmount, data.amount)} - % complete + {percentFund(data.targetAmount, data.amount)}% complete

- $ - {numFormat(data.amount)} + ${numFormat(data.amount)} /$ {numFormat(data.targetAmount)}

-
+
(
-
+ {/* +
*/}
); diff --git a/pages/incubator.js b/pages/incubator.js index 546d1248..d848529c 100644 --- a/pages/incubator.js +++ b/pages/incubator.js @@ -1,22 +1,22 @@ /* eslint-disable consistent-return */ -import axios from 'axios'; -import React, { useEffect, useRef, useState } from 'react'; -import LoginPage from '../components/Consultancy/helperFiles/LoginPage'; -import FeaturedAdvice from '../components/featured/FeaturedAdvice'; -import FeaturedMyStartup from '../components/featured/FeaturedMyStartup'; -import FeaturedMyStartupSkeleton from '../components/featured/FeaturedMyStartupSkeleton'; -import FeaturedStartups from '../components/featured/FeaturedStartups'; -import FeaturedStartupsSkeleton from '../components/featured/FeaturedStartupsSkeleton'; -import FeaturedUpcoming from '../components/featured/FeaturedUpcoming'; -import FeaturedUpcomingSkeleton from '../components/featured/FeaturedUpcomingSkeleton'; -import Footer from '../components/Footer'; -import HomepageNav from '../components/homepage/HomepageNav'; -import IncubatorHero from '../components/IncubatorHero'; -import Layout from '../components/Layout'; -import SidebarTwo from '../components/sidebar/SidebarTwo'; -import useDetectOutsideClick from '../components/UseDetectOutsideClick'; -import links from '../contexts/utils/links'; -import ComingSoon from '../components/ComingSoon'; +import axios from "axios"; +import React, { useEffect, useRef, useState } from "react"; +import LoginPage from "../components/Consultancy/helperFiles/LoginPage"; +import FeaturedAdvice from "../components/featured/FeaturedAdvice"; +import FeaturedMyStartup from "../components/featured/FeaturedMyStartup"; +import FeaturedMyStartupSkeleton from "../components/featured/FeaturedMyStartupSkeleton"; +import FeaturedStartups from "../components/featured/FeaturedStartups"; +import FeaturedStartupsSkeleton from "../components/featured/FeaturedStartupsSkeleton"; +import FeaturedUpcoming from "../components/featured/FeaturedUpcoming"; +import FeaturedUpcomingSkeleton from "../components/featured/FeaturedUpcomingSkeleton"; +import Footer from "../components/Footer"; +import HomepageNav from "../components/homepage/HomepageNav"; +import IncubatorHero from "../components/IncubatorHero"; +import Layout from "../components/Layout"; +import SidebarTwo from "../components/sidebar/SidebarTwo"; +import useDetectOutsideClick from "../components/UseDetectOutsideClick"; +import links from "../contexts/utils/links"; +import ComingSoon from "../components/ComingSoon"; const IncubatorPage = () => { const [startups, setStartups] = useState([]); @@ -41,7 +41,7 @@ const IncubatorPage = () => { const allfunded = funded.map((all) => all.startup_id._id); useEffect(() => { - const _token = window.localStorage.getItem('jwtToken'); + const _token = window.localStorage.getItem("jwtToken"); axios .get(`${process.env.BASE_URI}/startup/`) .then((res) => { @@ -52,7 +52,7 @@ const IncubatorPage = () => { return axios .get(`${process.env.BASE_URI}/funded/userFunded`, { headers: { - Authorization: `Bearer ${_token || ''}`, + Authorization: `Bearer ${_token || ""}`, }, }) .then((response) => { @@ -63,11 +63,13 @@ const IncubatorPage = () => { setTimeout(setLoading(false), 3000); }) .catch((err) => { - console.log('error fetching startup data', err); + console.log("error fetching startup data", err); }); - }, [typeof window !== 'undefined' - ? window.localStorage.getItem('jwtToken') - : null]); + }, [ + typeof window !== "undefined" + ? window.localStorage.getItem("jwtToken") + : null, + ]); return ( diff --git a/public/assets/scss/_event.scss b/public/assets/scss/_event.scss index cbece67e..60d71c52 100644 --- a/public/assets/scss/_event.scss +++ b/public/assets/scss/_event.scss @@ -1,4 +1,4 @@ -@import '../../../styles/global-variables.css'; +@import "../../../styles/global-variables.css"; #loadingIcon { position: absolute; @@ -17,13 +17,15 @@ padding-top: 80px; } &_container { - width: 100%; + width: 95%; height: 100%; background-color: var(--secondary-main); padding-top: 40px; .swiper-container { - width: 90%; position: relative; + display: flex; + justify-content: center; + align-items: center; padding-bottom: 50px !important; cursor: move; /* fallback if grab cursor is unsupported */ cursor: grab; @@ -31,36 +33,40 @@ cursor: -webkit-grab; min-height: 100px; .swiper-wrapper { - color: #f5f5f5; + position: relative; + width: 100%; + flex-direction: row; + margin-left: 40px; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + transition-property: transform; + box-sizing: content-box; + } - width: fit-content; - } - // .swiper-navigation_container { - // position: absolute; - // height: 40px; - // padding-top: 20px; - // bottom: 5px; - // display: flex; - // justify-content: center; - // z-index: 9999; - // } - // .swiper-navigation { - // display: flex; - // width: 100px; - // height: auto; - // .swiper-button-prev, - // .swiper-button-next { - // position: relative; - // background: none; - // border: no - // ne; - // color: #ff00b8; - // } - // } .swiper-slide { height: auto !important; } } + @media only screen and (max-width: 1400px) { + .swiper-container { + width: 90% !important; + margin-left: 100px; + } + } + @media only screen and (max-width: 1200px) { + .swiper-container { + width: 100% !important; + margin-left: 40px; + } + } + @media only screen and (max-width: 700px) { + .swiper-container { + width: 100% !important; + margin-left: 0 !important; + } + } &_section { position: relative; min-height: 300px; @@ -76,9 +82,9 @@ .eventcard { &_container { - flex-direction: column !important; + flex-direction: row; min-width: 280px; - width: 350px; + width: 450px; margin: 17px; } &_image { @@ -89,6 +95,10 @@ width: 100%; } &_top { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 90%; h2 { margin-top: 5px; display: -webkit-box; @@ -106,9 +116,10 @@ } &_search { width: 80%; - max-width: 800px; - margin: 2% auto 3%; + max-width: 900px; + margin: 100px auto 3%; display: flex; + flex-direction: column; justify-content: space-between; .input { width: 80%; @@ -127,6 +138,7 @@ border-radius: 10px; width: 100%; text-indent: 10px; + color: white; font-size: 1rem; background: var(--secondary-high-contrast); } @@ -137,7 +149,7 @@ input:hover { border-color: #808080; } - button { + i { border-radius: 10px; background: var(--secondary-high-contrast); padding: 10px 20px 10px 10px; @@ -148,6 +160,7 @@ box-shadow: 0 0 0 0.2rem rgba(161, 30, 236, 0.25); } } + @media only screen and (max-width: 666px) { &_search { flex-direction: column; @@ -166,42 +179,48 @@ cursor: pointer; max-width: 1250px; margin: 0 auto 3%; + display: flex; align-items: center; &1 { - border-color: var(--tertiary-low-contrast); + border-color: rgba(105, 56, 239, 1); } &1:hover { - background-color: var(--secondary-high-contrast); + background-color: rgba(105, 56, 239, 1); } &2 { - border-color: var(--tertiary-low-contrast); + border-color: rgba(105, 56, 239, 1); } &2:hover { - background-color: var(--secondary-high-contrast); + background-color: rgba(105, 56, 239, 1); color: white; } &3 { - border-color: var(--tertiary-low-contrast); + border-color: rgba(105, 56, 239, 1); } &3:hover { - background-color: var(--secondary-high-contrast); + background-color: rgba(105, 56, 239, 1); color: white; } &4 { - border-color: var(--tertiary-low-contrast); + border-color: rgba(105, 56, 239, 1); } &4:hover { - background-color: var(--secondary-high-contrast); + background-color: rgba(105, 56, 239, 1); } div { - padding: 10px; + height: 80px; min-width: 200px; width: 300px; - text-align: center; + display: flex; + align-items: center; + transition: all 0.2s ease-in; + justify-content: center; + flex-direction: column; + border-style: solid; border-width: 2px; - border-radius: 3px; + border-radius: 16px; margin-right: 20px; &:last-child { margin-right: 0px; @@ -262,12 +281,13 @@ align-items: center; padding: 0 7%; &_second { - margin-top: 0; + margin-top: 30px; } h1 { font-size: 40px; font-weight: 700; float: right; + margin-top: 20px; background-size: 100%; background: var(--light-low-contrast); -webkit-background-clip: text; @@ -306,13 +326,13 @@ // width: fit-content; // } .swiper-navigation_container { - // position: absolute; + position: relative; + width: 100px; height: 40px; padding-top: 20px; - bottom: 5px; display: flex; justify-content: center; - z-index: 50; + // z-index: 50; } .swiper-navigation { display: flex; @@ -361,7 +381,7 @@ position: relative; width: 100%; .gradient-button { - font-family: 'Arial Black', Gadget, sans-serif; + font-family: "Arial Black", Gadget, sans-serif; font-size: 20px; text-align: center; text-transform: uppercase; @@ -527,7 +547,7 @@ } &_gradient-button { - font-family: 'Arial Black', Gadget, sans-serif; + font-family: "Arial Black", Gadget, sans-serif; font-size: 16px; text-align: center; text-transform: uppercase; @@ -562,16 +582,27 @@ .eventcard { &_container { - height: 100%; + height: 262px; + width: 500px; + padding: 0 !important; display: flex; flex-direction: row; justify-content: center; + background: linear-gradient( + 116.82deg, + #21175f 32.9%, + rgba(36, 14, 98, 0) 148.54% + ); + box-shadow: inset -7px -7px 24px rgba(255, 255, 255, 0.04), + inset 7px 7px 14px rgba(255, 255, 255, 0.09); + border-radius: 16px; } &_image { height: auto; + width: 50%; position: relative; - margin-right: 40px; + margin-right: 45px; img { width: 100%; @@ -606,20 +637,31 @@ &_content { width: 40%; display: flex; + height: 100%; flex-direction: column; - justify-content: center; + justify-content: space-around; color: var(--light-low-contrast); } &_top { + margin-top: 40px; + margin-left: -20px; + padding-right: 10px; h2 { + margin-bottom: 7px; font-weight: 500; - font-size: 3vh; + + font-size: 18px; text-transform: capitalize; } .date { - display: flex; - font-size: 2vh; + margin-bottom: 7px; + background: linear-gradient(92.43deg, #68aeff 31.43%, #9379ff 77.17%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + letter-spacing: 0.03em; + font-weight: bold; + font-size: 12px; } } @@ -627,7 +669,6 @@ display: flex; flex-direction: column; justify-content: space-between; - margin-top: 60px; .save { color: #f700ff !important; margin-bottom: 10px; @@ -637,16 +678,26 @@ } .button_info { - color: var(--tertiary-accent-1); - border-style: solid; - border-width: 1px; - border-color: var(--tertiary-accent-1); + color: white; + background: linear-gradient(91.39deg, #ff00b8 17.68%, #cc00ff 106.94%); + border: 1px solid #cc00ff; + border-radius: 35px; margin-bottom: 5px; - width: fit-content; - padding: 7px; + margin-top: 10px; + transition: 0.3s; + margin-left: 20px; + width: 120px; + padding: 10px 10px 10px 10px; + font-weight: 550; // width: 40%; } + .button_info:hover { + opacity: 0.8; + } + .button_info:focus { + outline: none; + } .button_register { color: azure; background-color: var(--tertiary-main); @@ -661,20 +712,30 @@ } } @media only screen and (max-width: 520px) { + .button_info { + margin-bottom: 15px; + } &_container { - flex-direction: column; + flex-direction: column !important; + height: 100% !important; + width: 90%; + margin-left: 30px; } &_image { margin-right: 0; - + width: 100%; img { border-top-right-radius: 16px; - border-bottom-right-radius: 16px; + // border-bottom-right-radius: 16px; + height: 150px; + border-bottom-left-radius: 0 !important; } } &_content { - margin-top: 10px; - width: 100%; + width: 90%; + padding-left: 20px; + margin-left: 20px; + padding-bottom: 20px; } &_bottom { margin-top: 10px; @@ -743,7 +804,7 @@ display: none; } &::before { - content: 'Upload Image'; + content: "Upload Image"; display: inline-block; outline: none; white-space: nowrap; @@ -790,7 +851,7 @@ right: 0; z-index: 400; - background: url('https://cdn.britannica.com/26/162626-050-3534626F/Koala.jpg'); + background: url("https://cdn.britannica.com/26/162626-050-3534626F/Koala.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; @@ -904,8 +965,8 @@ .column-question { width: 100%; .datepicker { - color: '#fca311'; - border-radius: '200px'; + color: "#fca311"; + border-radius: "200px"; border: 1px solid var(--secondary-accent-1); } } @@ -1131,17 +1192,51 @@ background-color: var(--secondary-high-contrast); width: 85%; z-index: 6000; + justify-content: space-between; + flex-direction: column; height: 90vh; border-radius: 20px; overflow: auto; display: flex; + #closeicon { + position: absolute; + top: 15px; + right: 30px; + font-size: 15px; + border: 2px solid var(--light-low-contrast); + border-radius: 100%; + padding: 5px; + background: none; + transition: 0.3s; + cursor: pointer; + color: var(--light-low-contrast); + &:hover { + color: #6938ef; + border-color: #6938ef; + } + &:active { + margin-top: 5px; + } + } + &_grid { + display: flex; + width: 95%; + height: 100%; + flex-direction: row; + padding-bottom: 20px; + align-items: center; + justify-content: center; + border-bottom: 1px solid #6938ef; + } &_left { flex-basis: 40%; - height: 100%; + height: 80%; img { - width: 100%; + width: 80%; + border-radius: 16px; height: 100%; + margin-left: 35px; object-fit: cover; } } @@ -1149,25 +1244,50 @@ &_right { position: relative; display: flex; + width: 60%; flex-direction: column; - flex-basis: 60%; - #closeicon { - position: absolute; - top: 15px; - right: 30px; - font-size: 40px; - background: none; - cursor: pointer; - color: var(--light-low-contrast); - &:hover { - color: var(--tertiary-accent-1); + // flex-basis: 60%; + margin-top: 40px; + height: auto; + + .about_header { + display: flex; + width: 100%; + margin-bottom: 20px; + justify-content: space-between; + h1 { + color: var(--light-low-contrast); + font-size: 36px; + font-weight: bold; + word-break: break-word; } - &:active { - margin-top: 5px; + &-label { + height: 35px; + padding: 5px 15px; + border-radius: 10px; + font-weight: bold; + font-size: 16px; + width: fit-content; + text-align: center; + display: flex; + align-items: center; + &-first { + background: #e9e9ff; + color: #151371; + } + &-second, + &-fourth { + background: #fbceee; + color: #ff00b8; + } + &-third { + background: #fff7da; + color: #ffbb3c; + } } } .header { - padding: 40px 30px 30px; + padding: 5px 5px 5px; display: flex; flex-direction: row; justify-content: space-between; @@ -1177,20 +1297,20 @@ align-items: center; img { border-radius: 50%; - width: 100px; - height: 100px; + width: 52px; + height: 52px; object-fit: cover; margin-right: 20px; } .host_title { h4 { color: var(--light-accent); - font-size: 20px; + font-size: 15px; padding: 0; } p { padding: 0; - font-size: 34px; + font-size: 26px; font-weight: bold; color: var(--light-low-contrast); text-transform: capitalize; @@ -1201,13 +1321,13 @@ .buttons { padding-top: 1rem; .button_action { - background: var(--tertiary-main); + background: #6938ef; color: #ffffff; font-weight: bold; width: 172px; - height: 58px; - border-radius: 5px; - border: 1px solid var(--tertiary-main); + height: 50px; + border-radius: 100px; + border: #6938ef; transition: 0.3s; a { @@ -1222,47 +1342,13 @@ } .body { display: flex; - padding: 20px 40px; height: 100%; justify-content: space-between; .about { flex-basis: 60%; overflow-y: scroll; padding: 10px; - &_header { - display: flex; - width: 100%; - margin-bottom: 20px; - justify-content: space-between; - h1 { - color: var(--light-low-contrast); - font-size: 36px; - font-weight: bold; - word-break: break-word; - } - &-label { - height: 35px; - padding: 5px 15px; - border-radius: 10px; - font-weight: bold; - text-align: center; - display: flex; - align-items: center; - &-first { - background: #e9e9ff; - color: #151371; - } - &-second, - &-fourth { - background: #fbceee; - color: #ff00b8; - } - &-third { - background: #fff7da; - color: #ffbb3c; - } - } - } + &_body { h3 { font-size: 22px; @@ -1282,15 +1368,30 @@ // justify-content: center; flex-basis: 35%; padding: 10px; + .date { + margin-bottom: 1px; + background: linear-gradient( + 92.43deg, + #68aeff 31.43%, + #9379ff 77.17% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + letter-spacing: 0.03em; + font-weight: bold; + font-size: 15px; + } h3 { font-size: 20px; color: var(--light-low-contrast); font-weight: bold; - margin: 20px 0; + margin: 3px 0 10px 0; } p, span { color: var(--light-low-contrast); + font-size: 20px; + font-weight: bold; } .option_buttons { display: flex; diff --git a/styles/Events/Event.css b/styles/Events/Event.css index a9f9d6b7..16f0b561 100644 --- a/styles/Events/Event.css +++ b/styles/Events/Event.css @@ -11,26 +11,191 @@ position: absolute; top: 0; left: 0; - background-color:green; + background-color: green; padding: 5px 15px; color: #fff; - border-radius:10px; + border-radius: 10px; } .event-status-yes-detail { position: absolute; top: 10px; left: 10px; - background-color:green; + background-color: green; padding: 5px 15px; color: #fff; - border-radius:10px; + border-radius: 10px; } -.event-status-red{ +.event-status-red { position: absolute; top: 0; left: 0; - background-color:red; + background-color: red; padding: 5px 15px; color: #fff; - border-radius:10px; + border-radius: 10px; +} + +.event_search_button { + background: #6938ef; + color: white; + padding: 0 40px; + transition: all 0.2s ease-in; + border: 2px solid #6938ef; + border-radius: 100px; + font-weight: 500; + height: 50px; + font-size: 14px; +} +.event_search_button:hover { + background: none; + border-color: #6938ef; +} +.event__form { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.mobile_event_select { + display: none; +} + +@media screen and (max-width: 600px) { + .no-filters { + font-size: 16px !important; + } + .background-icons { + display: none; + } + .swiper-navigation_container { + top: 34rem !important; + right: 0 !important; + } + .event__form { + flex-direction: row; + margin-bottom: 10px; + } + .input { + height: 40px !important; + } + .fas-hide { + display: none; + } + .event_search_button { + padding: 0 3px !important; + font-size: 12px; + border-radius: 10px; + margin-left: 10px; + height: 40px !important; + } + .event_select_button { + flex-direction: column; + } + .mobile_event_select { + display: block; + width: 80% !important; + height: 50px; + } + .event_select_grid { + display: none !important; + } + .about_footer { + height: 10% !important; + padding-bottom: 20px; + } +} +.past_event__container { + display: flex; + flex-direction: row; + width: 100%; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.img_position { + position: absolute; + top: 4%; + right: 5%; +} + +.eventcard_container_skeleton { + width: 100%; +} + +.swiper-navigation_container { + position: relative; + float: right; + width: 150px; + height: 40px; + top: 350px; + right: 15%; + padding-top: 20px; + display: flex; + justify-content: center; + z-index: 50; +} +.swiper-navigation { + display: flex; + width: 100px; + height: auto; + margin-bottom: 0.7rem; +} +.swiper-button-prev, +.swiper-button-next { + position: relative; + background: none; + border: none; + color: var(--light-low-contrast); + opacity: 0.65; +} +.clear-button:hover { + opacity: 0.6; + transition: all 0.3 ease-in-out; +} + +.about_footer { + height: 50%; +} +.about_body { + height: 80%; + display: flex; + margin-left: 30px; + margin-top: 40px; + flex-direction: column; +} + +.about_body h3 { + color: white; + font-size: 24px; + font-weight: 600; +} +.about_body p { + color: white; + font-size: 20px; + font-weight: 400; +} +.clear-button { + width: 100px; + transition: 0.3s; +} + +.clear-button:focus { + outline: none; +} + +.event_skeleton { + height: 262px; + width: 500px; + padding: 0 !important; + display: flex; + opacity: 0.8; + flex-direction: row; + justify-content: center; + /* background: #d6d4d4; */ + box-shadow: inset -7px -7px 24px rgba(255, 255, 255, 0.04), + inset 7px 7px 14px rgba(255, 255, 255, 0.09); + border-radius: 16px; + margin-right: 30px; } diff --git a/styles/incubator-css/incubator.css b/styles/incubator-css/incubator.css index 745a35d7..116fdb78 100644 --- a/styles/incubator-css/incubator.css +++ b/styles/incubator-css/incubator.css @@ -205,8 +205,8 @@ hr { display: none; } .form-control { - width: 100% !important; - height: 40px !important; + width: 90% !important; + height: 45px !important; } .incubator-btn1, .incubator-btn2 { @@ -222,6 +222,7 @@ hr { .incubator-btn1 { background: #6938ef; color: white; + transition: 0.3s; padding: 1rem 3rem; border: 1px solid #6938ef; border-radius: 100px; @@ -233,26 +234,28 @@ hr { .searchBtn { background: #6938ef; color: white; - padding: 1rem 2.8rem; + padding: 10px 30px; border: 1px solid #6938ef; border-radius: 100px; - margin-right: 1.5rem; - font-weight: 600; - font-size: 18px; + transition: 0.3s; + margin-right: 1rem; + font-weight: 500; + font-size: 16px; } .incubator-btn1:hover, .searchBtn:hover { background: none; - border: 1px solid white; + border: 1px solid #6938ef; } .incubator-btn2 { background: none; color: white; + transition: 0.3s; padding: 1rem 3rem; - border: 1px solid white; + border: 1px solid #6938ef; border-radius: 100px; font-weight: 600; font-size: 18px; @@ -302,9 +305,9 @@ hr { .form-control { background: var(--secondary-high-contrast); border: 1px solid var(--secondary-high-contrast); - width: 100%; + width: 70%; border-radius: 100px; - height: 40px; + height: 50px; } .form-control:focus { @@ -617,7 +620,7 @@ div.swiper-button-next { width: 100%; display: flex; align-content: center; - justify-content: center; + /* justify-content: center; */ align-items: center; }