media page update
This commit was merged in pull request #707.
This commit is contained in:
victorAnumudu
@@ -12,6 +12,7 @@ import IndexJobActions from "./JobActions/IndexJobActions";
|
||||
import usersService from "../../services/UsersService";
|
||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||
import { SocketValues } from "../Contexts/SocketIOContext";
|
||||
import TabButton from "../customTabs/TabButton";
|
||||
|
||||
function ActiveJobs(props) {
|
||||
let {sendMessage, joinRoom} = SocketValues() // destructures 'SEND MESSAGE' and 'JOIN ROOM' FUNCTIONS FROM SOCKET
|
||||
@@ -29,7 +30,9 @@ function ActiveJobs(props) {
|
||||
|
||||
const [filesToSend, setFilesToSend] = useState([]); // State to hold the value of files to be sent
|
||||
|
||||
const [tab, setTab] = useState("message");
|
||||
// const [tab, setTab] = useState("message");
|
||||
const tabs = ["Send Message", "Send Files",] //STATE FOR SWITCHING BETWEEN TABS
|
||||
const [selectedTab, setSelectedTab] = useState(tabs[0]);
|
||||
|
||||
const [requestStatus, setRequestStatus] = useState({
|
||||
loading: false,
|
||||
@@ -93,9 +96,9 @@ function ActiveJobs(props) {
|
||||
|
||||
// FUNCTION TO CLEAR ALL TYPED MESSAGE OR FILES
|
||||
const handleClearAll = ({ target: { name } }) => {
|
||||
if (tab == "message") {
|
||||
if (selectedTab == "Send Message") {
|
||||
setMessageToSend("");
|
||||
} else if (tab == "files") {
|
||||
} else if (selectedTab == "Send Files") {
|
||||
setFilesToSend([]);
|
||||
} else {
|
||||
return;
|
||||
@@ -394,78 +397,119 @@ function ActiveJobs(props) {
|
||||
|
||||
{/* TEXTAREA SECTION */}
|
||||
<div className="mt-5">
|
||||
<div className="">
|
||||
<div
|
||||
className="pl-7 my-2 flex items-center border-b border-slate-300 gap-3"
|
||||
// className='ml-7 flex justify-start items-center gap-3'
|
||||
>
|
||||
<button
|
||||
name="message"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`px-4 py-1 rounded-t-2xl ${
|
||||
tab == "message"
|
||||
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
||||
: "bg-white text-[#000] border-t-[2px]"
|
||||
}`}
|
||||
>
|
||||
Send Message
|
||||
</button>
|
||||
<button
|
||||
name="files"
|
||||
onClick={(e) => setTab(e.target.name)}
|
||||
className={`px-4 py-1 rounded-t-2xl ${
|
||||
tab == "files"
|
||||
? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
|
||||
: "bg-white text-[#000] border-t-[2px]"
|
||||
}`}
|
||||
>
|
||||
Send Files
|
||||
</button>
|
||||
</div>
|
||||
{tab == "message" ? (
|
||||
<textarea
|
||||
className="p-4 w-full h-[200px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-slate-300 outline-none"
|
||||
// rows="10"
|
||||
style={{ resize: "none" }}
|
||||
name="message"
|
||||
onChange={handleMessageChange}
|
||||
value={messageToSend}
|
||||
autoFocus
|
||||
/>
|
||||
) : (
|
||||
<div className="p-4 w-full h-[200px] text-base text-slate-600 border border-slate-300">
|
||||
<div className="files">
|
||||
<label
|
||||
htmlFor="file"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
|
||||
>
|
||||
Select Files to Upload
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleFileChange}
|
||||
<div className="w-full">
|
||||
{/* switch button */}
|
||||
<div className="grid grid-cols-2">
|
||||
{tabs.map((item) => (
|
||||
<TabButton
|
||||
key={item}
|
||||
item={item}
|
||||
selectedTab={selectedTab}
|
||||
setSelectedTab={setSelectedTab}
|
||||
/>
|
||||
</div>
|
||||
<div className="selected_file my-2">
|
||||
{filesToSend.length > 0 &&
|
||||
filesToSend.map((item, index) => (
|
||||
<p key={index} className="flex items-center space-x-2">
|
||||
<span>{item.name}</span>
|
||||
<button
|
||||
name="remove"
|
||||
onClick={() => handleRemoveImage(item)}
|
||||
className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* switch button */}
|
||||
<div className="w-full bg-red-50 overflow-x-auto">
|
||||
{selectedTab == "Send Message" ? (
|
||||
<div className="p-2 w-full">
|
||||
<textarea
|
||||
className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black outline-none"
|
||||
// rows="10"
|
||||
style={{ resize: "none" }}
|
||||
name="message"
|
||||
onChange={handleMessageChange}
|
||||
value={messageToSend}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-2 w-full">
|
||||
<div className="p-4 mb-2 h-[150px] text-base text-slate-600">
|
||||
<div className="files flex">
|
||||
<label
|
||||
htmlFor="file"
|
||||
className="custom-btn btn-gradient text-base text-white"
|
||||
>
|
||||
Select Files to Upload
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
id="file"
|
||||
accept="image/*"
|
||||
style={{ display: "none" }}
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="selected_file my-2 overflow-y-auto">
|
||||
{filesToSend.length > 0 &&
|
||||
filesToSend.map((item, index) => (
|
||||
<p key={index} className="flex items-center space-x-2">
|
||||
<span>{item.name}</span>
|
||||
<button
|
||||
name="remove"
|
||||
onClick={() => handleRemoveImage(item)}
|
||||
className="px-2 flex justify-center items-center rounded-full border border-red-500 text-red-500"
|
||||
>
|
||||
x
|
||||
</button>
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Buttons Sections */}
|
||||
<div className="p-2 grid grid-cols-1 xxs:grid-cols-3">
|
||||
<div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClearAll}
|
||||
className="custom-btn border-gradient"
|
||||
>
|
||||
<span className="text-gradient">Clear</span>
|
||||
</button>
|
||||
{selectedTab == "Send Files" ? (
|
||||
<button
|
||||
onClick={sendFile}
|
||||
type="button"
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
height="20"
|
||||
fill="white"
|
||||
>
|
||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
|
||||
</svg>
|
||||
|
||||
<span className="text-white">Upload Files</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={sendTaskMessage}
|
||||
type="button"
|
||||
className="custom-btn btn-gradient text-white"
|
||||
>
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<span className="text-white">Send</span>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* end of Buttons Sections */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ERROR DISPLAY AND SUBMIT BUTTON */}
|
||||
@@ -489,57 +533,6 @@ function ActiveJobs(props) {
|
||||
))}
|
||||
</div>
|
||||
{/* End of error or success display */}
|
||||
|
||||
{/* Buttons Sections */}
|
||||
<div className="py-2 sm:flex sm:justify-end sm:items-center">
|
||||
<div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClearAll}
|
||||
className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
|
||||
>
|
||||
<span className="text-gradient">Clear</span>
|
||||
</button>
|
||||
{tab == "files" ? (
|
||||
<button
|
||||
onClick={sendFile}
|
||||
type="button"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
|
||||
>
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="white"
|
||||
>
|
||||
<path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
|
||||
</svg>
|
||||
|
||||
<span className="text-white">Upload Files</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={sendTaskMessage}
|
||||
type="button"
|
||||
className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
|
||||
>
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="6" color="sky-blue" />
|
||||
) : (
|
||||
<span className="text-white">Send</span>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* end of Buttons Sections */}
|
||||
</div>
|
||||
{/* END OF TEXTAREA */}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user