jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
pull from: dev-jaanvi
merge into: jaanvi:main
Conversation 1 Commits 155 Files changed 39 +414 -283
7 changed files with 414 additions and 283 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 9220143bbb - Show all commits

2
src/components/AddEditCategoryModal/index.tsx
View file

@ -45,7 +45,7 @@ const AddEditCategoryModal: React.FC<AddEditCategoryModalProps> = ({ open, handl
onSubmit: handleSubmit(onSubmit), onSubmit: handleSubmit(onSubmit),
}} }}
> >
<DialogTitle>{editRow ? "Editwefwefwe" : 'Add'} Category</DialogTitle> <DialogTitle>{editRow ? "Edit" : 'Add'} Category</DialogTitle>
<DialogContent> <DialogContent>
<Controller <Controller
name="category" name="category"

2
src/components/AddEditTagsModal/index.tsx
View file

@ -45,7 +45,7 @@ const AddEditTagsModal: React.FC<AddEditTagsModalProps> = ({ open, handleClose,e
onSubmit: handleSubmit(onSubmit), onSubmit: handleSubmit(onSubmit),
}} }}
> >
<DialogTitle>{editRow ? "Editsefwefwe" : 'Add'} Tag</DialogTitle> <DialogTitle>{editRow ? "Edit" : 'Add'} Tag</DialogTitle>
<DialogContent> <DialogContent>
<Controller <Controller
name="tag" name="tag"

366
src/components/CustomTable/index.tsx
View file

@ -1,187 +1,225 @@
import * as React from 'react'; import * as React from "react"
import { styled } from '@mui/material/styles'; import { styled } from "@mui/material/styles"
import Table from '@mui/material/Table'; import Table from "@mui/material/Table"
import TableBody from '@mui/material/TableBody'; import TableBody from "@mui/material/TableBody"
import TableCell, { tableCellClasses } from '@mui/material/TableCell'; import TableCell, { tableCellClasses } from "@mui/material/TableCell"
import TableContainer from '@mui/material/TableContainer'; import TableContainer from "@mui/material/TableContainer"
import TableHead from '@mui/material/TableHead'; import TableHead from "@mui/material/TableHead"
import TableRow from '@mui/material/TableRow'; import TableRow from "@mui/material/TableRow"
import Paper, { paperClasses } from '@mui/material/Paper'; import Paper, { paperClasses } from "@mui/material/Paper"
import { deleteAdmin } from "../../redux/slices/authSlice"
import { useDispatch } from "react-redux"
import { import {
Box, Box,
Button, Button,
dividerClasses, dividerClasses,
IconButton, IconButton,
listClasses, listClasses,
Menu, Menu,
} from '@mui/material'; } from "@mui/material"
import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded'; import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded"
import DeleteModal from "../Modals/DeleteModal/DeleteModal"
import { AppDispatch } from "../../redux/store/store"
// Styled components for customization // Styled components for customization
const StyledTableCell = styled(TableCell)(({ theme }) => ({ const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: { [`&.${tableCellClasses.head}`]: {
backgroundColor: ' #1565c0', backgroundColor: " #1565c0",
color: theme.palette.common.white, color: theme.palette.common.white,
}, },
[`&.${tableCellClasses.body}`]: { [`&.${tableCellClasses.body}`]: {
fontSize: 14, fontSize: 14,
}, },
})); }))
const StyledTableRow = styled(TableRow)(({ theme }) => ({ const StyledTableRow = styled(TableRow)(({ theme }) => ({
'&:nth-of-type(odd)': { "&:nth-of-type(odd)": {
backgroundColor: theme.palette.action.hover, backgroundColor: theme.palette.action.hover,
}, },
'&:last-child td, &:last-child th': { "&:last-child td, &:last-child th": {
border: 0, border: 0,
}, },
})); }))
interface Column { interface Column {
id: string; id: string
label: string; label: string
align?: 'left' | 'center' | 'right'; align?: "left" | "center" | "right"
} }
interface Row { interface Row {
[key: string]: any; [key: string]: any
} }
interface CustomTableProps { interface CustomTableProps {
columns: Column[]; columns: Column[]
rows: Row[]; rows: Row[]
setDeleteModal: Function; setDeleteModal: Function
setRowData: Function; setRowData: Function
setModalOpen: Function; setModalOpen: Function
deleteModal: boolean
} }
const CustomTable: React.FC<CustomTableProps> = ({ const CustomTable: React.FC<CustomTableProps> = ({
columns, columns,
rows, rows,
setDeleteModal, setDeleteModal,
setRowData, deleteModal,
setModalOpen, setRowData,
setModalOpen,
}) => { }) => {
console.log('columnsss', columns, rows); // console.log("columnsss", columns, rows)
const dispatch = useDispatch<AppDispatch>()
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
const [selectedRow, setSelectedRow] = React.useState<Row | null>(null)
const open = Boolean(anchorEl)
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const handleClick = (event: React.MouseEvent<HTMLElement>, row: Row) => {
const open = Boolean(anchorEl); setAnchorEl(event.currentTarget)
const handleClick = (event: React.MouseEvent<HTMLElement>) => { setSelectedRow(row) // Ensure the row data is set
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const isImage = (value: any) => {
if (typeof value === 'string') {
return value.startsWith('http') || value.startsWith('data:image'); // Check for URL or base64 image
} }
return false;
};
return ( const handleClose = () => {
<TableContainer component={Paper}> setAnchorEl(null)
<Table sx={{ minWidth: 700 }} aria-label="customized table"> }
<TableHead>
<TableRow> const isImage = (value: any) => {
{columns.map((column) => ( if (typeof value === "string") {
<StyledTableCell key={column.id} align={column.align || 'left'}> return value.startsWith("http") || value.startsWith("data:image") // Check for URL or base64 image
{column.label} }
</StyledTableCell> return false
))} }
</TableRow>
</TableHead> const handleDeleteButton = (id: string | undefined) => {
<TableBody> if (!id) console.error("ID not found", id)
{rows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}> dispatch(deleteAdmin(id || ""))
{columns.map((column) => ( setDeleteModal(false) // Close the modal only after deletion
<StyledTableCell key={column.id} align={column.align || 'left'}> handleClose()
{isImage(row[column.id]) ? ( }
<img
src={row[column.id]} return (
alt="Row " <TableContainer component={Paper}>
style={{ <Table sx={{ minWidth: 700 }} aria-label="customized table">
width: '50px', <TableHead>
height: '50px', <TableRow>
objectFit: 'cover', {columns.map((column) => (
}} <StyledTableCell
/> key={column.id}
) : column.id !== 'action' ? ( align={column.align || "left"}
row[column.id] >
) : ( {column.label}
<IconButton </StyledTableCell>
onClick={(e) => { ))}
handleClick(e); </TableRow>
setRowData(row); </TableHead>
}} <TableBody>
{rows.map((row, rowIndex) => (
<StyledTableRow key={rowIndex}>
{columns.map((column) => (
<StyledTableCell
key={column.id}
align={column.align || "left"}
>
{isImage(row[column.id]) ? (
<img
src={row[column.id]}
alt="Row "
style={{
width: "50px",
height: "50px",
objectFit: "cover",
}}
/>
) : column.id !== "action" ? (
row[column.id]
) : (
<IconButton
onClick={(e) => {
handleClick(e, row)
setSelectedRow(row) // Store the selected row
}}
>
<MoreVertRoundedIcon />
</IconButton>
)}
</StyledTableCell>
))}
</StyledTableRow>
))}
</TableBody>
</Table>
{open && (
<Menu
anchorEl={anchorEl}
id="menu"
open={open}
onClose={handleClose}
onClick={handleClose}
transformOrigin={{ horizontal: "right", vertical: "top" }}
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
sx={{
[`& .${listClasses.root}`]: {
padding: "4px",
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: "4px -4px",
},
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
}}
> >
<MoreVertRoundedIcon /> <Button
</IconButton> variant="text"
)} onClick={() => setModalOpen(true)}
</StyledTableCell> color="primary"
))} sx={{
</StyledTableRow> justifyContent: "flex-start",
))} py: 0,
</TableBody> textTransform: "capitalize",
</Table> }}
{open && ( >
<Menu Edit
anchorEl={anchorEl} </Button>
id="menu"
open={open}
onClose={handleClose}
onClick={handleClose}
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
sx={{
[`& .${listClasses.root}`]: {
padding: '4px',
},
[`& .${paperClasses.root}`]: {
padding: 0,
},
[`& .${dividerClasses.root}`]: {
margin: '4px -4px',
},
}}
>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-start',
}}
>
<Button
variant="text"
onClick={() => setModalOpen(true)}
color="primary"
sx={{
justifyContent: 'flex-start',
py: 0,
textTransform: 'capitalize',
}}
>
Edit
</Button>
<Button
variant="text"
onClick={() => setDeleteModal(true)}
color="error"
sx={{
justifyContent: 'flex-start',
py: 0,
textTransform: 'capitalize',
}}
>
Delete
</Button>
</Box>
</Menu>
)}
</TableContainer>
);
};
export default CustomTable; <Button
variant="text"
onClick={(e) => {
e.stopPropagation()
setDeleteModal(true)
}}
color="error"
sx={{
justifyContent: "flex-start",
py: 0,
textTransform: "capitalize",
}}
>
Delete
</Button>
{deleteModal && (
<DeleteModal
handleDelete={() =>
handleDeleteButton(selectedRow?.id)
}
open={deleteModal}
setDeleteModal={setDeleteModal}
id={selectedRow?.id}
/>
)}
</Box>
</Menu>
)}
</TableContainer>
)
}
export default CustomTable

141
src/components/Modals/DeleteModal/DeleteModal.tsx
View file

@ -1,77 +1,84 @@
import { Box, Button, Modal, Typography } from '@mui/material'; import { Box, Button, Modal, Typography } from "@mui/material"
import { MouseEventHandler } from 'react';
type Props = { type Props = {
open: boolean; open: boolean
setDeleteModal: Function; setDeleteModal: Function
handleDelete: MouseEventHandler; handleDelete: (id: string | undefined) => void
}; id?: string | undefined
}
const style = { const style = {
position: 'absolute', position: "absolute",
top: '50%', top: "50%",
left: '50%', left: "50%",
transform: 'translate(-50%, -50%)', transform: "translate(-50%, -50%)",
width: 330, width: 330,
bgcolor: 'background.paper', bgcolor: "background.paper",
borderRadius: 1.5, borderRadius: 1.5,
boxShadow: 24, boxShadow: 24,
p: 3, p: 3,
}; }
const btnStyle = { py: 1, px: 5, width: '50%', textTransform: 'capitalize' }; const btnStyle = { py: 1, px: 5, width: "50%", textTransform: "capitalize" }
export default function DeleteModal({ export default function DeleteModal({
open, open,
setDeleteModal, setDeleteModal,
handleDelete, handleDelete,
id,
}: Props) { }: Props) {
return ( // console.log("DeleteModal opened with ID:", id)
<Modal
open={open} return (
aria-labelledby="modal-modal-title" <Modal
aria-describedby="modal-modal-description" open={open}
> aria-labelledby="modal-modal-title"
<Box sx={style}> aria-describedby="modal-modal-description"
<Typography
id="modal-modal-title"
variant="h6"
component="h2"
align="center"
> >
Delete Record <Box sx={style}>
</Typography> <Typography
<Typography id="modal-modal-description" sx={{ mt: 2 }} align="center"> id="modal-modal-title"
Are you sure you want to delete this record? variant="h6"
</Typography> component="h2"
<Box align="center"
sx={{ >
display: 'flex', Delete Record
justifyContent: 'space-between', </Typography>
mt: 4, <Typography
gap: 2, id="modal-modal-description"
}} sx={{ mt: 2 }}
> align="center"
<Button >
variant="contained" Are you sure you want to delete this record?
color="error" </Typography>
type="button" <Box
sx={btnStyle} sx={{
onClick={() => setDeleteModal(false)} display: "flex",
> justifyContent: "space-between",
Cancel mt: 4,
</Button> gap: 2,
<Button }}
variant="contained" >
type="button" <Button
color="primary" variant="contained"
sx={btnStyle} color="error"
onClick={handleDelete} type="button"
> sx={btnStyle}
Delete onClick={() => setDeleteModal(false)}
</Button> >
</Box> Cancel
</Box> </Button>
</Modal> <Button
); variant="contained"
type="button"
color="primary"
sx={btnStyle}
onClick={() => handleDelete(id || "")}
>
Delete
</Button>
</Box>
</Box>
</Modal>
)
} }

1
src/lib/https.ts
View file

@ -17,7 +17,6 @@
import axios, { AxiosInstance } from 'axios'; import axios, { AxiosInstance } from 'axios';
// Axios instance for the production backend
const backendHttp = axios.create({ const backendHttp = axios.create({
baseURL: process.env.REACT_APP_BACKEND_URL, baseURL: process.env.REACT_APP_BACKEND_URL,
}); });

47
src/pages/AdminList/index.tsx
View file

@ -3,12 +3,11 @@ import { Box, Button, Typography } from "@mui/material"
import AddEditCategoryModal from "../../components/AddEditCategoryModal" import AddEditCategoryModal from "../../components/AddEditCategoryModal"
import { useForm } from "react-hook-form" import { useForm } from "react-hook-form"
import CustomTable from "../../components/CustomTable" import CustomTable from "../../components/CustomTable"
import DeleteModal from "../../components/Modals/DeleteModal/DeleteModal" // import DeleteModal from "../../components/Modals/DeleteModal/DeleteModal"
import { useDispatch, useSelector } from "react-redux" import { useDispatch, useSelector } from "react-redux"
import { adminList } from "../../redux/slices/authSlice" import { adminList } from "../../redux/slices/authSlice"
import { AppDispatch, RootState } from "../../redux/store/store" // Import RootState for selector import { AppDispatch, RootState } from "../../redux/store/store" // Import RootState for selector
// Sample data for categories // Sample data for categories
export default function AdminList() { export default function AdminList() {
@ -19,21 +18,16 @@ export default function AdminList() {
const [deleteModal, setDeleteModal] = React.useState<boolean>(false) const [deleteModal, setDeleteModal] = React.useState<boolean>(false)
const [rowData, setRowData] = React.useState<any | null>(null) const [rowData, setRowData] = React.useState<any | null>(null)
const dispatch = useDispatch<AppDispatch>(); const dispatch = useDispatch<AppDispatch>()
// Fetching admin data from the Redux store // Fetching admin data from the Redux store
const admins = useSelector((state: RootState) => state.auth.admins); const admins = useSelector((state: RootState) => state.auth.admins)
console.log(admins, "woihfiuwhfownfownefoi")
// Dispatching the API call when the component mounts // Dispatching the API call when the component mounts
useEffect(() => { useEffect(() => {
dispatch(adminList()); dispatch(adminList())
}, [dispatch]); }, [dispatch])
const handleClickOpen = () => {
const handleClickOpen = () => {
setModalOpen(true) setModalOpen(true)
setEditRow(null) setEditRow(null)
} }
@ -43,9 +37,9 @@ export default function AdminList() {
reset() reset()
} }
const handleDelete = () => { // const handleDelete = () => {
setDeleteModal(false) // setDeleteModal(false)
} // }
const categoryColumns = [ const categoryColumns = [
{ id: "srno", label: "Sr No" }, { id: "srno", label: "Sr No" },
@ -55,11 +49,19 @@ export default function AdminList() {
] ]
// If no admins are available, display the sample data // If no admins are available, display the sample data
const categoryRows = admins?.length ? admins?.map((admin: { name: any; role: any }, index: number) => ({ const categoryRows = admins?.length
srno: index + 1, ? admins?.map(
name: admin?.name, (
role: admin.role, admin: { id: string; name: string; role: string },
})) : [] index: number
) => ({
id: admin.id,
srno: index + 1,
name: admin?.name,
role: admin.role,
})
)
: []
return ( return (
<> <>
@ -97,6 +99,7 @@ export default function AdminList() {
rows={categoryRows} rows={categoryRows}
editRow={editRow} editRow={editRow}
setDeleteModal={setDeleteModal} setDeleteModal={setDeleteModal}
deleteModal={deleteModal}
setRowData={setRowData} setRowData={setRowData}
setModalOpen={setModalOpen} setModalOpen={setModalOpen}
/> />
@ -105,11 +108,11 @@ export default function AdminList() {
handleClose={handleCloseModal} handleClose={handleCloseModal}
editRow={rowData} editRow={rowData}
/> />
<DeleteModal {/* <DeleteModal
open={deleteModal} open={deleteModal}
setDeleteModal={setDeleteModal} setDeleteModal={setDeleteModal}
handleDelete={handleDelete} handleDelete={handleDelete}
/> /> */}
</> </>
) )
} }

138
src/redux/slices/authSlice.ts
View file

@ -1,26 +1,36 @@
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit" import {
createSlice,
createAsyncThunk,
PayloadAction,
isRejectedWithValue,
} from "@reduxjs/toolkit"
import axios from "axios" import axios from "axios"
import { backendHttp, apiHttp } from "../../lib/https" import { backendHttp, apiHttp } from "../../lib/https"
import { toast } from "react-toastify" import { toast } from "react-toastify"
// Define types for state // Define types for state
interface User { interface User {
map(arg0: (admin: { name: any; role: any }, index: number) => { srno: number; name: any; role: any }): unknown map(
arg0: (
admin: { name: any; role: any },
index: number
) => { srno: number; name: any; role: any }
): unknown
id: string id: string
email: string email: string
} }
interface Admin { interface Admin {
id: string, id: string
name: string, name: string
role: string role: string
} }
interface AuthState { interface AuthState {
user: User | null; user: User | null
admins: Admin[]; admins: Admin[]
isAuthenticated: boolean; isAuthenticated: boolean
isLoading: boolean; isLoading: boolean
error: string | null; error: string | null
} }
// Async thunk for login // Async thunk for login
@ -30,7 +40,10 @@ export const loginUser = createAsyncThunk<
{ rejectValue: string } { rejectValue: string }
>("auth/login", async ({ email, password }, { rejectWithValue }) => { >("auth/login", async ({ email, password }, { rejectWithValue }) => {
try { try {
const response = await backendHttp.post("admin/login", { email, password }) const response = await backendHttp.post("admin/login", {
email,
password,
})
localStorage.setItem("authToken", response.data?.data?.token) // Save token localStorage.setItem("authToken", response.data?.data?.token) // Save token
toast.success(response.data?.message) toast.success(response.data?.message)
return response.data return response.data
@ -66,19 +79,56 @@ export const adminList = createAsyncThunk<
{ rejectValue: string } { rejectValue: string }
>("/auth", async (_, { rejectWithValue }) => { >("/auth", async (_, { rejectWithValue }) => {
try { try {
const response = await apiHttp.get("/auth"); const response = await apiHttp.get("/auth")
console.log(response) console.log(response?.data?.data)
return response?.data?.data?.map((admin: { name: string; role: string }) => ({ return response?.data?.data?.map(
(admin: { id: string; name: string; role: string }) => ({
name: admin?.name, id: admin.id,
role: admin?.role || "N/A", name: admin?.name,
})); role: admin?.role || "N/A",
})
)
console.log(response.data.data) console.log(response.data.data)
} catch (error: any) { } catch (error: any) {
return rejectWithValue(error.response?.data?.message || "An error occurred"); return rejectWithValue(
error.response?.data?.message || "An error occurred"
)
} }
}); })
export const deleteAdmin = createAsyncThunk<
string,
string,
{ rejectValue: string }
>("deleteAdmin", async (id, { rejectWithValue }) => {
try {
const response = await apiHttp.delete(`/auth/${id}`)
// console.log(response, "response of deletion")
return id // Returning the deleted admin's ID
} catch (error: any) {
return rejectWithValue(
error.response?.data?.message || "An error occurred"
)
}
})
// export const putAdmin = createAsyncThunk<
// Admin, // Return type (updated admin object)
// { id: string; data: Partial<Admin> }, // Argument type
// { rejectValue: string } // Rejection type
// >(
// "updateAdmin",
// async ({ id, data }, { rejectWithValue }) => {
// try {
// const response = await apiHttp.put(`/auth/${id}`, data)
// return response.data // Ensure response contains the updated admin object
// } catch (error: any) {
// return rejectWithValue(
// error.response?.data?.message || "An error occurred"
// )
// }
// }
// )
const initialState: AuthState = { const initialState: AuthState = {
user: null, user: null,
@ -86,7 +136,7 @@ const initialState: AuthState = {
isAuthenticated: false, isAuthenticated: false,
isLoading: false, isLoading: false,
error: null, error: null,
}; }
const authSlice = createSlice({ const authSlice = createSlice({
name: "auth", name: "auth",
@ -140,16 +190,19 @@ const authSlice = createSlice({
} }
) )
// created by Jaanvi and Eknoor // created by Jaanvi and Eknoor
.addCase(adminList.pending, (state) => { //AdminList
.addCase(adminList.pending, (state) => {
state.isLoading = true state.isLoading = true
state.error = null state.error = null
}) })
.addCase(adminList.fulfilled, (state, action: PayloadAction<Admin[]>) => { .addCase(
state.isLoading = false; adminList.fulfilled,
state.admins = action.payload; // ✅ Store admins correctly (state, action: PayloadAction<Admin[]>) => {
}) state.isLoading = false
state.admins = action.payload
}
)
.addCase( .addCase(
adminList.rejected, adminList.rejected,
@ -158,6 +211,37 @@ const authSlice = createSlice({
state.error = action.payload || "An error occurred" state.error = action.payload || "An error occurred"
} }
) )
.addCase(deleteAdmin.pending, (state) => {
state.isLoading = true
})
.addCase(deleteAdmin.fulfilled, (state, action) => {
state.isLoading = false
state.admins = state.admins.filter(
(admin) => String(admin.id) !== String(action.payload)
)
})
.addCase(deleteAdmin.rejected, (state, action) => {
state.isLoading = false
state.error = action.payload || "Failed to delete admin"
})
//update Admin
// .addCase(putAdmin.pending, (state) => {
// state.isLoading = true
// state.error = null
// })
// .addCase(putAdmin.fulfilled, (state, action: PayloadAction<Admin>) => {
// state.isLoading = false
// state.admins = state.admins.map((admin) =>
// admin.id === action.payload.id ? action.payload : admin
// )
// })
// .addCase(putAdmin.rejected, (state, action: PayloadAction<string | undefined>) => {
// state.isLoading = false
// state.error = action.payload || "Failed to update admin"
// })
}, },
}) })