Skip to content

Commit

Permalink
fix: online mode for events
Browse files Browse the repository at this point in the history
  • Loading branch information
@tamalCodes
tamalCodes committed Mar 12, 2024
1 parent b04f6cb commit 2fefbc1
Show file tree
Hide file tree
Showing 7 changed files with 228 additions and 113 deletions.
50 changes: 37 additions & 13 deletions src/components/private/events/card/EventsCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,6 @@ import { Button } from "../../../shared";
import "./EventsCard.scss";

const EventsCard = ({ event }) => {
console.log("🚀 ~ EventsCard ~ event:", event?.startTime);
const userType = useSelector((state) => state.user.userType);
const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
const navigate = useNavigate();

Expand Down Expand Up @@ -38,23 +36,49 @@ const EventsCard = ({ event }) => {
<>
<div className="eventcard_container">
<div className="eventcard_parent">
<img
src="https://earth5r.org/wp-content/uploads/2020/07/World-Environment-Day-Mumbai-India-Environmental-NGO-CSR-Earth5R-1230x767.jpg"
alt=""
/>
<img src={event?.coverImage} alt="" />

<div className="eventcard_body">
<p>{event?.name}</p>

<div className="eventcard_datetime">
<span>
<CiLocationOn
{event?.mode === "Offline" ? (
<span>
<CiLocationOn
style={{
opacity: "1",
}}
/>{" "}
{event?.address}
</span>
) : (
<span
style={{
opacity: "1",
display: "flex",
alignItems: "center",
}}
/>{" "}
{event?.address}
</span>
>
<img
src={
event?.platform === "Zoom"
? "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRaxhRNvMDVHn8fw7gbZLmN9sM_ppNEb3AnAsBrlGFyK_13ofG6ofodBfnCXuUEwje-MpA"
: event?.platform === "Google Meet"
? "https://img.icons8.com/color/48/000000/google-meet.png"
: event?.platform === "Microsoft Teams"
? "https://img.icons8.com/color/48/000000/microsoft-teams.png"
: "https://img.icons8.com/color/48/000000/other.png"
}
alt=""
style={{
width: "15px",
height: "15px",
minHeight: "15px",
}}
/>
{event.platform}
</span>
)}

<span>
<CiCalendar /> {formatttedStartDate}
</span>
Expand All @@ -71,7 +95,7 @@ const EventsCard = ({ event }) => {
opacity: "1",
}}
/>{" "}
Kolkata Police Head Quarter Lalbazar
{event?.address}
</span>
</div>

Expand Down
2 changes: 2 additions & 0 deletions src/components/private/events/card/EventsCard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,12 +38,14 @@
object-fit: cover;
max-width: 100%;
height: 37%;
min-height: 119px;
width: 100%;

@media screen and (max-width: 430px) {
height: auto;
width: 90px;
border-radius: 6px;
min-height: auto;
}
}

Expand Down
218 changes: 141 additions & 77 deletions src/components/private/events/create/CreateEvents.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { useSelector } from "react-redux";
import "react-time-picker/dist/TimePicker.css";
import { useEvent } from "../../../../hooks/useEvent";
import countries from "../../../../static/CountryList";
import platforms from "../../../../static/OnlinePlatform";
import { Button } from "../../../shared";
import "./CreateEvents.scss";

Expand All @@ -41,14 +42,16 @@ const CreateEvents = ({ setshowCreateModal }) => {
mapIframe: "",
coverImage:
"https://images.pexels.com/videos/3045163/free-video-3045163.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500",
platform: "Zoom",
platformLink: "",
});

const { validateEvent, submitCallback } = useEvent(event);

const handleCreateBase64 = useCallback(async (e) => {
const file = e.target.files[0];
const base64 = await convertToBase64(file);
setevent({ ...event, coverImage: base64 });
setevent((prevEvent) => ({ ...prevEvent, coverImage: base64 }));
e.target.value = "";
}, []);

Expand All @@ -74,7 +77,6 @@ const CreateEvents = ({ setshowCreateModal }) => {
};

const handleSubmit = () => {
console.log(event);
seterrors(validateEvent());
submitCallback(event, setshowCreateModal);
};
Expand Down Expand Up @@ -229,102 +231,164 @@ const CreateEvents = ({ setshowCreateModal }) => {
<span className="error_message">{errors.description}</span>
)}

<Accordion defaultExpanded className="location">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
className="location_header"
>
<p>Location Details</p>
</AccordionSummary>
{event?.mode === "Offline" ? (
<Accordion defaultExpanded className="location">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
className="location_header"
>
<p>Location Details</p>
</AccordionSummary>

<div className="location_citystate">
<AccordionDetails className="accordionbody">
<input
type="text"
placeholder="City"
name="city"
value={event.city}
onChange={(e) => {
handleChange(e);
}}
/>
{errors.city && (
<span className="error_message">{errors.city}</span>
)}
</AccordionDetails>
<AccordionDetails className="accordionbody">
<input
type="text"
placeholder="State"
name="state"
value={event.state}
onChange={(e) => {
handleChange(e);
}}
/>
{errors.state && (
<span className="error_message">{errors.state}</span>
)}
</AccordionDetails>
</div>

<div className="location_citystate">
<AccordionDetails className="accordionbody">
<input
type="text"
placeholder="City"
name="city"
value={event.city}
placeholder="Address"
name="address"
value={event.address}
onChange={(e) => {
handleChange(e);
}}
/>
{errors.city && (
<span className="error_message">{errors.city}</span>
{errors.address && (
<span className="error_message">{errors.address}</span>
)}
</AccordionDetails>

<FormControl fullWidth className="country_accordion">
<InputLabel id="demo-simple-select-label label">
Country Name
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={event.country}
name="country"
label="Event Mode"
className="select"
onChange={(e) => {
handleChange(e);
}}
>
{countries.map((country, index) => {
return (
<MenuItem value={country.label} key={index}>
{country.label}
</MenuItem>
);
})}
</Select>
</FormControl>

<AccordionDetails className="accordionbody">
<input
type="text"
placeholder="State"
name="state"
value={event.state}
placeholder="Map Iframe"
name="mapIframe"
value={event.mapIframe}
onChange={(e) => {
handleChange(e);
}}
/>
{errors.state && (
<span className="error_message">{errors.state}</span>
{errors.mapIframe && (
<span className="error_message">{errors.mapIframe}</span>
)}
</AccordionDetails>
</div>

<AccordionDetails className="accordionbody">
<input
type="text"
placeholder="Address"
name="address"
value={event.address}
onChange={(e) => {
handleChange(e);
}}
/>
{errors.address && (
<span className="error_message">{errors.address}</span>
)}
</AccordionDetails>

<FormControl fullWidth className="country_accordion">
<InputLabel id="demo-simple-select-label label">
Country Name
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={event.country}
name="country"
label="Event Mode"
className="select"
onChange={(e) => {
handleChange(e);
}}
</Accordion>
) : (
<Accordion defaultExpanded className="location">
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
className="location_header"
>
{countries.map((country, index) => {
return (
<MenuItem value={country.label} key={index}>
{country.label}
</MenuItem>
);
})}
</Select>
</FormControl>
<p>Meeting Details</p>
</AccordionSummary>

<AccordionDetails className="accordionbody">
<input
type="text"
placeholder="Map Iframe"
name="mapIframe"
value={event.mapIframe}
onChange={(e) => {
handleChange(e);
}}
/>
{errors.mapIframe && (
<span className="error_message">{errors.mapIframe}</span>
)}
</AccordionDetails>
</Accordion>
<FormControl fullWidth className="country_accordion">
<InputLabel id="demo-simple-select-label label">
Online Platform
</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={event.platform}
name="platform"
label="Event Mode"
className="select"
onChange={(e) => {
handleChange(e);
}}
>
{platforms.map((platform, index) => {
return (
<MenuItem value={platform.label} key={index}>
<img
src={platform.icon}
alt=""
style={{
width: "20px",
height: "20px",
marginRight: "10px",
}}
/>
{platform.label}
</MenuItem>
);
})}
</Select>
</FormControl>

<AccordionDetails className="accordionbody">
<input
type="text"
placeholder="Platform Link"
name="platformLink"
value={event.platformLink}
onChange={(e) => {
handleChange(e);
}}
/>
{errors.platformLink && (
<span className="error_message">{errors.platformLink}</span>
)}
</AccordionDetails>
</Accordion>
)}
</div>

<Button onClickfunction={handleSubmit}>Create</Button>
Expand Down
Loading

0 comments on commit 2fefbc1

Please sign in to comment.