Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Update Broadcast Modal Description Population and Refactor form for Styling Consistency #1061

Merged
merged 4 commits into from
Jun 25, 2024
Merged

Fix Update Broadcast Modal Description Population and Refactor form for Styling Consistency #1061

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bb06edc
Fix Update Broadcast Modal Description Population and Styling Consist…
shivamgaur99 Jun 20, 2024
d36e90d
Revert "Fix Update Broadcast Modal Description Population and Styling…
shivamgaur99 Jun 21, 2024
c2237ec
Fixed Update Broadcast Modal
shivamgaur99 Jun 21, 2024
7a8eb26
updated edit broadcast
shivamgaur99 Jun 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
187 changes: 116 additions & 71 deletions frontend/src/pages/Broadcast/Component/AllBroadcasts/Edit/Edit.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,128 @@
import React, { useEffect, useState } from "react";
import React, { useState } from "react";
import style from "./edit.module.scss";
import { TextField } from "@material-ui/core";
import CloseIcon from "@material-ui/icons/Close";
import { Button2 } from "../../../../../components/util/Button/index";
import SunEditor from "suneditor-react";
import "suneditor/dist/css/suneditor.min.css";
import { SimpleToast } from "../../../../../components/util/Toast";
import { UpdateBoardCast } from "../../../../../service/Broadcast.jsx";

export function Edit(props) {
const [a, seta] = useState();
function scrolls() {
let b = window.scrollY;
seta(b);
}
useEffect(() => {
window.addEventListener("scroll", scrolls);
}, []);
const [toast, setToast] = useState({
toastStatus: false,
toastType: "",
toastMessage: "",
});

let dark = props.theme;
return props.visible ? (
<div className={style["popup"]} style={{ top: a }}>
<div className={dark ? style["div-dark"] : style["div"]}>
<h1 className={style["heading"]}>
Edit modal
<CloseIcon
style={{ float: "right", cursor: "pointer" }}
onClick={() => props.setVisible(false)}
/>
</h1>
<form>
<div className={style["form"]}>
<h5>Title:</h5>
<TextField
type="text"
name="title"
placeholder="Title"
multiline
value={props.data.title}
className={style["input"]}
InputProps={{
className: `${dark ? style["input-dark"] : ""}`,
}}
onChange={props.handleChange}
/>
const handleCloseToast = (event, reason) => {
if (reason === "clickaway") {
return;
}
setToast({ ...toast, toastStatus: false });
props.setVisible(false);
};

const handleInputChange = (e) => {
const { name, value } = e.target;
props.handleChange({ target: { name, value } });
};

const handleContentChange = (content) => {
props.handleChange({ target: { name: 'content', value: content } });
};

const handleSubmit = async (e) => {
e.preventDefault();
const { data } = props;
const newData = {
id: data._id,
content:data.content,
link: data.link,
expiresOn: data.expiresOn,
imageUrl: data.imageUrl,
tags: data.tags,
isApproved: data.isApproved,
title: data.title,
};

await UpdateBoardCast(newData, setToast, toast);
};

const { visible, data } = props;

return visible ? (
<div className={style["popup"]}>
<div className={style["card"]}>
<form className={style["editor"]} onSubmit={handleSubmit}>
<div className={style["motive"]}>
<h1 className={style["heading"]}>Edit Broadcast</h1>
<div className={style["dash"]} />
</div>
<div className={style.form}>
<h5>Description:</h5>
<TextField
type="text"
name="desc"
multiline
placeholder="Description"
value={props.data.desc}
className={style["input"]}
InputProps={{
className: `${dark ? style["input-dark"] : ""}`,
}}
onChange={props.handleChange}
/>
<div>
<div className={style["form-control"]}>
<input
type="text"
name="title"
className={style["form-control-input"]}
placeholder="Title"
value={data.title}
onChange={handleInputChange}
/>
<i className="fas fa-pencil-alt" />
</div>
</div>
<div>
<div className={style["form-control"]}>
<SunEditor
name="content"
placeholder="Description"
setContents={data.content}
onChange={handleContentChange}
height="100px"
className={style["edit"]}
onSetContents={(content) =>
handleInputChange({ target: { name: "content", value: content } })
}
/>
</div>
</div>
<div className={style.form}>
<h5>Link:</h5>
<TextField
type="text"
name="link"
placeholder="Link"
className={style["input"]}
InputProps={{
className: `${dark ? style["input-dark"] : ""}`,
}}
onChange={props.handleChange}
value={props.data.link}
multiline
<div>
<div className={style["form-control"]}>
<input
type="text"
name="link"
className={style["form-control-input"]}
placeholder="Resource Link"
value={data.link}
onChange={handleInputChange}
/>
<i className="fas fa-link" />
</div>
</div>
<div className={style["submit-btn"]}>
<Button2
className={style["submit-btn-text"]}
label="Update"
type="submit"
/>
<Button2
className={style["submit-btn-text"]}
label="Cancel"
type="button"
onClick={() => props.setVisible(false)}
/>
</div>
<button
className={style["btns1"]}
onClick={() => props.setVisible(false)}
>
Edit
</button>
</form>
</div>
{toast.toastStatus && (
<div className={style["toast-overlay"]}>
<SimpleToast
open={toast.toastStatus}
message={toast.toastMessage}
handleCloseToast={handleCloseToast}
severity={toast.toastType}
/>
</div>
)}
</div>
) : null;
}
}
Loading
Loading