Toggle Button Functionality for Deleted Notes Not Working Correctly

This commit is contained in:
Kartik Sharma 2025-09-05 12:45:28 +05:30
parent 42b6802419
commit 7e81649841

View File

@ -128,42 +128,40 @@ const NotesDirectory = ({
<div className="col d-flex justify-content-end gap-2 pe-0">
{" "}
<div className="d-flex align-items-center justify-content-between">
<label
className="switch switch-primary"
<label
className="switch switch-primary"
style={{
fontSize: "15px",
}}
>
<input
type="checkbox"
className="switch-input"
onChange={() => handleSwitch(!IsActive)}
checked={IsActive}
style={{
transform: "scale(0.8)", // smaller toggle
}}
/>
<span
className="switch-toggle-slider"
>
<input
type="checkbox"
className="switch-input"
onChange={handleSwitch}
checked={!IsActive} // invert binding
style={{ transform: "scale(0.8)" }}
/>
<span
className="switch-toggle-slider"
style={{
width: "30px", // narrower slider
height: "15px", // shorter slider
}}
>
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span
className="switch-label"
>
<span className="switch-on"></span>
<span className="switch-off"></span>
</span>
<span
className="switch-label"
style={{
fontSize: "14px", // smaller label text
marginLeft: "-14px"
}}
>
Include Deleted Notes
</span>
</label>
>
Include Deleted Notes
</span>
</label>
{!showEditor && (
<div className="d-flex justify-content-end">
@ -225,23 +223,23 @@ const NotesDirectory = ({
)}
{!isLoading && notesToDisplay.length > 0
? notesToDisplay
.slice()
.reverse()
.map((noteItem) => (
<NoteCardDirectory
refetchProfile={refetchProfile}
refetchNotes={refetch}
refetchContact={refetch}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))
.slice()
.reverse()
.map((noteItem) => (
<NoteCardDirectory
refetchProfile={refetchProfile}
refetchNotes={refetch}
refetchContact={refetch}
noteItem={noteItem}
contactId={contactProfile?.id}
setProfileContact={setProfileContact}
key={noteItem.id}
/>
))
: !isLoading &&
!showEditor && (
<div className="text-center mt-5">{noNotesMessage}</div>
)}
<div className="text-center mt-5">{noNotesMessage}</div>
)}
</div>
</div>
);