From fc083d17224f49c6dc0c8803f5360f98f5ed083b Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:57:35 +0530 Subject: [PATCH 01/16] Delete src/components/Member/members.tsx --- src/components/Member/members.tsx | 40 ------------------------------- 1 file changed, 40 deletions(-) delete mode 100644 src/components/Member/members.tsx diff --git a/src/components/Member/members.tsx b/src/components/Member/members.tsx deleted file mode 100644 index a42b1fc..0000000 --- a/src/components/Member/members.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import MemberCard from '@/components/Member/MemberCard'; -import { color, h4, h5 } from '@/constants'; -import { Box, Typography, useMediaQuery } from '@mui/material'; -import MemberData from '@/data/members'; - -export default function Members() { - const breakPoint = useMediaQuery('(min-width:600px)'); - const breakPoint2 = useMediaQuery('(min-width:750px)'); - - return ( - - - Members - - - {MemberData.map((member, index) => ( - - ))} - - - ); -} From 8869bc34cf6e9b9c56b573de1fabe4bcb3832e1b Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:57:48 +0530 Subject: [PATCH 02/16] Delete src/components/Member/MemberCard.tsx --- src/components/Member/MemberCard.tsx | 133 --------------------------- 1 file changed, 133 deletions(-) delete mode 100644 src/components/Member/MemberCard.tsx diff --git a/src/components/Member/MemberCard.tsx b/src/components/Member/MemberCard.tsx deleted file mode 100644 index d38380c..0000000 --- a/src/components/Member/MemberCard.tsx +++ /dev/null @@ -1,133 +0,0 @@ -import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; -import { Backdrop, Box, Typography, useMediaQuery } from '@mui/material'; -import { useState } from 'react'; - -interface MemberCardProps { - memberName: string; - memberRole: string; - memberThumbnail: string; - memberDescription: string; - key: number; -} - -const MemberCard = ({ - memberName, - memberRole, - memberThumbnail, - memberDescription, -}: MemberCardProps) => { - const breakPoint = useMediaQuery('(min-width:600px)'); - const [isClicked, setIsClicked] = useState(false); - const [mouseOver, setMouseOver] = useState(false); - - function handleClick() { - setIsClicked(!isClicked); - } - - return ( - <> - setMouseOver(true)} - onMouseLeave={() => setMouseOver(false)} - > - theme.zIndex.drawer + 2, - backgroundColor: 'black', - display: 'flex', - fontSize: '30px', - padding: '20px', - flexDirection: breakPoint ? 'row' : 'column', - gap: '20px', - }} - className="closeIconCursor" - open={isClicked} - > - - - - {memberName} - - - - {memberRole} - - - - {memberDescription} - - - - - drone image - - - - {memberName} - - - {memberRole} - - - - ); -}; - -export default MemberCard; From bd76b81a8a9d7aebb55ef795fe9b95d43f28e2ce Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Thu, 16 Jan 2025 13:07:27 +0530 Subject: [PATCH 03/16] Add files via upload --- src/components/MemberCard.tsx | 630 ++++++++++++++++++++++++++++++++++ src/components/members.tsx | 200 +++++++++++ 2 files changed, 830 insertions(+) create mode 100644 src/components/MemberCard.tsx create mode 100644 src/components/members.tsx diff --git a/src/components/MemberCard.tsx b/src/components/MemberCard.tsx new file mode 100644 index 0000000..9e84745 --- /dev/null +++ b/src/components/MemberCard.tsx @@ -0,0 +1,630 @@ +// import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; +// import { Backdrop, Box, Typography, useMediaQuery } from '@mui/material'; +// import { useState } from 'react'; + +// interface MemberCardProps { +// memberName: string; +// memberRole: string; +// memberThumbnail: string; +// memberDescription: string; +// key: number; +// } + +// const MemberCard = ({ +// memberName, +// memberRole, +// memberThumbnail, +// memberDescription, +// }: MemberCardProps) => { +// const breakPoint = useMediaQuery('(min-width:600px)'); +// const [isClicked, setIsClicked] = useState(false); +// const [mouseOver, setMouseOver] = useState(false); + +// function handleClick() { +// setIsClicked(!isClicked); +// } + +// return ( +// <> +// setMouseOver(true)} +// onMouseLeave={() => setMouseOver(false)} +// > +// theme.zIndex.drawer + 2, +// backgroundColor: 'black', +// display: 'flex', +// fontSize: '30px', +// padding: '20px', +// flexDirection: breakPoint ? 'row' : 'column', +// gap: '20px', +// }} +// className="closeIconCursor" +// open={isClicked} +// > +// +// +// +// {memberName} +// + +// +// {memberRole} +// + +// +// {memberDescription} +// +// +// +// +// drone image +// +// +// +// {memberName} +// +// +// {memberRole} +// +// +// +// ); +// }; + +// export default MemberCard; + +import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; +import { Backdrop, Box, Typography, Button, Modal, TextField, useMediaQuery } from '@mui/material'; +import { useState } from 'react'; + +interface MemberCardProps { + memberName: string; + memberRole: string; + memberThumbnail: string; + memberDescription: string; + key: number; + onDelete: () => void; + onEdit: (updatedMember: Partial) => void; +} + +const MemberCard = ({ + memberName, + memberRole, + memberThumbnail, + memberDescription, + onDelete, + onEdit, +}: MemberCardProps) => { + const breakPoint = useMediaQuery('(min-width:600px)'); + const [isClicked, setIsClicked] = useState(false); + const [mouseOver, setMouseOver] = useState(false); + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + const [editedMember, setEditedMember] = useState({ + name: memberName, + role: memberRole, + thumbnail: memberThumbnail, + description: memberDescription, + }); + + function handleClick() { + setIsClicked(!isClicked); + } + + function handleEditSave() { + onEdit({ + memberName: editedMember.name, + memberRole: editedMember.role, + memberThumbnail: editedMember.thumbnail, + memberDescription: editedMember.description, + }); + setIsEditModalOpen(false); + } + + return ( + <> + setMouseOver(true)} + onMouseLeave={() => setMouseOver(false)} + > + theme.zIndex.drawer + 2, + backgroundColor: 'black', + display: 'flex', + fontSize: '30px', + padding: '20px', + flexDirection: breakPoint ? 'row' : 'column', + gap: '20px', + }} + className="closeIconCursor" + open={isClicked} + > + + + + {memberName} + + + + {memberRole} + + + + {memberDescription} + + + + + drone image + + + + {memberName} + + + {memberRole} + + + {/* Edit and Delete buttons placed at the bottom */} + + + + + + + {/* Edit Modal */} + setIsEditModalOpen(false)}> + + + Edit Member + + + setEditedMember((prev) => ({ ...prev, name: e.target.value })) + } + margin="normal" + /> + + setEditedMember((prev) => ({ ...prev, role: e.target.value })) + } + margin="normal" + /> + + setEditedMember((prev) => ({ ...prev, thumbnail: e.target.value })) + } + margin="normal" + /> + + setEditedMember((prev) => ({ ...prev, description: e.target.value })) + } + margin="normal" + /> + + + + + + + + ); +}; + +export default MemberCard; + + + +// import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; +// import { Backdrop, Box, Typography, Button, TextField, useMediaQuery } from '@mui/material'; +// import { useState } from 'react'; + +// interface MemberCardProps { +// memberName: string; +// memberRole: string; +// memberThumbnail: string; +// memberDescription: string; +// key: number; +// onEdit: (updatedMember: any) => void; +// onDelete: () => void; +// } + +// const MemberCard = ({ +// memberName, +// memberRole, +// memberThumbnail, +// memberDescription, +// onEdit, +// onDelete, +// }: MemberCardProps) => { +// const breakPoint = useMediaQuery('(min-width:600px)'); +// const [isClicked, setIsClicked] = useState(false); +// const [mouseOver, setMouseOver] = useState(false); +// const [isEditing, setIsEditing] = useState(false); +// const [editData, setEditData] = useState({ +// memberName, +// memberRole, +// memberThumbnail, +// memberDescription, +// }); + +// const handleClick = () => { +// setIsClicked(!isClicked); +// }; + +// const handleEditClick = () => { +// setIsEditing(true); +// }; + +// const handleSaveClick = () => { +// onEdit(editData); // Update the member details +// setIsEditing(false); +// }; + +// const handleCancelClick = () => { +// setEditData({ +// memberName, +// memberRole, +// memberThumbnail, +// memberDescription, +// }); +// setIsEditing(false); +// }; + +// const handleInputChange = (e: React.ChangeEvent) => { +// setEditData({ +// ...editData, +// [e.target.name]: e.target.value, +// }); +// }; + +// return ( +// <> +// setMouseOver(true)} +// onMouseLeave={() => setMouseOver(false)} +// > +// +// +// {memberName} +// +// +// {memberRole} +// +// +// +// +// +// +// drone image +// + +// {/* Editable Form Overlay */} +// {isEditing && ( +// theme.zIndex.drawer + 2, +// backgroundColor: 'rgba(0, 0, 0, 0.5)', // Blurred background +// display: 'flex', +// justifyContent: 'center', +// alignItems: 'center', +// }} +// > +// +// +// Edit Member Information +// + +// +// +// +// + +// +// +// +// +// +// +// )} +// +// ); +// }; + +// export default MemberCard; + + + + + diff --git a/src/components/members.tsx b/src/components/members.tsx new file mode 100644 index 0000000..bf8229a --- /dev/null +++ b/src/components/members.tsx @@ -0,0 +1,200 @@ +// import MemberCard from '@/components/Member/MemberCard'; +// import { color, h4, h5 } from '@/constants'; +// import { Box, Typography, useMediaQuery } from '@mui/material'; +// import MemberData from '@/data/members'; + +// export default function Members() { +// const breakPoint = useMediaQuery('(min-width:600px)'); +// const breakPoint2 = useMediaQuery('(min-width:750px)'); + +// return ( +// +// +// Members +// +// +// {MemberData.map((member, index) => ( +// +// ))} +// +// +// ); +// } +// src/pages/members.tsx + +import MemberCard from '@/components/Member/MemberCard'; +import { color, h4, h5 } from '@/constants'; +import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material'; +import MemberData from '@/data/members'; +import { useState } from 'react'; + +export default function Members() { + const breakPoint = useMediaQuery('(min-width:600px)'); + const breakPoint2 = useMediaQuery('(min-width:750px)'); + const [members, setMembers] = useState(MemberData); + const [isAddModalOpen, setIsAddModalOpen] = useState(false); + const [newMember, setNewMember] = useState({ + name: '', + role: '', + thumbnail: '', + description: '' + }); + + function handleDelete(index: number) { + setMembers(members.filter((_, i) => i !== index)); + } + + function handleEdit(index: number, updatedMember: Partial) { + const updatedMembers = [...members]; + updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; + setMembers(updatedMembers); + } + + function handleAddMember() { + setMembers([ + ...members, + { + memberName: newMember.name, + memberRole: newMember.role, + memberThumbnail: newMember.thumbnail, + memberQuote: newMember.description + } + ]); + setIsAddModalOpen(false); + setNewMember({ name: '', role: '', thumbnail: '', description: '' }); + } + + return ( + + + Members + + + {/* Add Member Button */} + + + + {members.map((member, index) => ( + handleDelete(index)} + onEdit={(updatedMember) => handleEdit(index, updatedMember)} + /> + ))} + + + {/* Add Member Modal */} + setIsAddModalOpen(false)}> + + + Add New Member + + + setNewMember((prev) => ({ ...prev, name: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, role: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, thumbnail: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, description: e.target.value })) + } + margin="normal" + /> + + + + + + + + ); +} From 8c9697bbffd63a036c5357c754eae76736fe1482 Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Thu, 16 Jan 2025 13:09:17 +0530 Subject: [PATCH 04/16] Create MemberCard.tsx --- src/components/Member/MemberCard.tsx | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/components/Member/MemberCard.tsx diff --git a/src/components/Member/MemberCard.tsx b/src/components/Member/MemberCard.tsx new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/src/components/Member/MemberCard.tsx @@ -0,0 +1 @@ + From 1df2fd64ce4ed91f37e8ca00a8f5c01dbdf0f8e5 Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Thu, 16 Jan 2025 13:11:49 +0530 Subject: [PATCH 05/16] Delete src/components/members.tsx --- src/components/members.tsx | 200 ------------------------------------- 1 file changed, 200 deletions(-) delete mode 100644 src/components/members.tsx diff --git a/src/components/members.tsx b/src/components/members.tsx deleted file mode 100644 index bf8229a..0000000 --- a/src/components/members.tsx +++ /dev/null @@ -1,200 +0,0 @@ -// import MemberCard from '@/components/Member/MemberCard'; -// import { color, h4, h5 } from '@/constants'; -// import { Box, Typography, useMediaQuery } from '@mui/material'; -// import MemberData from '@/data/members'; - -// export default function Members() { -// const breakPoint = useMediaQuery('(min-width:600px)'); -// const breakPoint2 = useMediaQuery('(min-width:750px)'); - -// return ( -// -// -// Members -// -// -// {MemberData.map((member, index) => ( -// -// ))} -// -// -// ); -// } -// src/pages/members.tsx - -import MemberCard from '@/components/Member/MemberCard'; -import { color, h4, h5 } from '@/constants'; -import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material'; -import MemberData from '@/data/members'; -import { useState } from 'react'; - -export default function Members() { - const breakPoint = useMediaQuery('(min-width:600px)'); - const breakPoint2 = useMediaQuery('(min-width:750px)'); - const [members, setMembers] = useState(MemberData); - const [isAddModalOpen, setIsAddModalOpen] = useState(false); - const [newMember, setNewMember] = useState({ - name: '', - role: '', - thumbnail: '', - description: '' - }); - - function handleDelete(index: number) { - setMembers(members.filter((_, i) => i !== index)); - } - - function handleEdit(index: number, updatedMember: Partial) { - const updatedMembers = [...members]; - updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; - setMembers(updatedMembers); - } - - function handleAddMember() { - setMembers([ - ...members, - { - memberName: newMember.name, - memberRole: newMember.role, - memberThumbnail: newMember.thumbnail, - memberQuote: newMember.description - } - ]); - setIsAddModalOpen(false); - setNewMember({ name: '', role: '', thumbnail: '', description: '' }); - } - - return ( - - - Members - - - {/* Add Member Button */} - - - - {members.map((member, index) => ( - handleDelete(index)} - onEdit={(updatedMember) => handleEdit(index, updatedMember)} - /> - ))} - - - {/* Add Member Modal */} - setIsAddModalOpen(false)}> - - - Add New Member - - - setNewMember((prev) => ({ ...prev, name: e.target.value })) - } - margin="normal" - /> - - setNewMember((prev) => ({ ...prev, role: e.target.value })) - } - margin="normal" - /> - - setNewMember((prev) => ({ ...prev, thumbnail: e.target.value })) - } - margin="normal" - /> - - setNewMember((prev) => ({ ...prev, description: e.target.value })) - } - margin="normal" - /> - - - - - - - - ); -} From 0a2b8a13c40f0d23bbe6dc1a602df4bbb4915716 Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Thu, 16 Jan 2025 13:12:32 +0530 Subject: [PATCH 06/16] Delete src/components/MemberCard.tsx --- src/components/MemberCard.tsx | 630 ---------------------------------- 1 file changed, 630 deletions(-) delete mode 100644 src/components/MemberCard.tsx diff --git a/src/components/MemberCard.tsx b/src/components/MemberCard.tsx deleted file mode 100644 index 9e84745..0000000 --- a/src/components/MemberCard.tsx +++ /dev/null @@ -1,630 +0,0 @@ -// import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; -// import { Backdrop, Box, Typography, useMediaQuery } from '@mui/material'; -// import { useState } from 'react'; - -// interface MemberCardProps { -// memberName: string; -// memberRole: string; -// memberThumbnail: string; -// memberDescription: string; -// key: number; -// } - -// const MemberCard = ({ -// memberName, -// memberRole, -// memberThumbnail, -// memberDescription, -// }: MemberCardProps) => { -// const breakPoint = useMediaQuery('(min-width:600px)'); -// const [isClicked, setIsClicked] = useState(false); -// const [mouseOver, setMouseOver] = useState(false); - -// function handleClick() { -// setIsClicked(!isClicked); -// } - -// return ( -// <> -// setMouseOver(true)} -// onMouseLeave={() => setMouseOver(false)} -// > -// theme.zIndex.drawer + 2, -// backgroundColor: 'black', -// display: 'flex', -// fontSize: '30px', -// padding: '20px', -// flexDirection: breakPoint ? 'row' : 'column', -// gap: '20px', -// }} -// className="closeIconCursor" -// open={isClicked} -// > -// -// -// -// {memberName} -// - -// -// {memberRole} -// - -// -// {memberDescription} -// -// -// -// -// drone image -// -// -// -// {memberName} -// -// -// {memberRole} -// -// -// -// ); -// }; - -// export default MemberCard; - -import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; -import { Backdrop, Box, Typography, Button, Modal, TextField, useMediaQuery } from '@mui/material'; -import { useState } from 'react'; - -interface MemberCardProps { - memberName: string; - memberRole: string; - memberThumbnail: string; - memberDescription: string; - key: number; - onDelete: () => void; - onEdit: (updatedMember: Partial) => void; -} - -const MemberCard = ({ - memberName, - memberRole, - memberThumbnail, - memberDescription, - onDelete, - onEdit, -}: MemberCardProps) => { - const breakPoint = useMediaQuery('(min-width:600px)'); - const [isClicked, setIsClicked] = useState(false); - const [mouseOver, setMouseOver] = useState(false); - const [isEditModalOpen, setIsEditModalOpen] = useState(false); - const [editedMember, setEditedMember] = useState({ - name: memberName, - role: memberRole, - thumbnail: memberThumbnail, - description: memberDescription, - }); - - function handleClick() { - setIsClicked(!isClicked); - } - - function handleEditSave() { - onEdit({ - memberName: editedMember.name, - memberRole: editedMember.role, - memberThumbnail: editedMember.thumbnail, - memberDescription: editedMember.description, - }); - setIsEditModalOpen(false); - } - - return ( - <> - setMouseOver(true)} - onMouseLeave={() => setMouseOver(false)} - > - theme.zIndex.drawer + 2, - backgroundColor: 'black', - display: 'flex', - fontSize: '30px', - padding: '20px', - flexDirection: breakPoint ? 'row' : 'column', - gap: '20px', - }} - className="closeIconCursor" - open={isClicked} - > - - - - {memberName} - - - - {memberRole} - - - - {memberDescription} - - - - - drone image - - - - {memberName} - - - {memberRole} - - - {/* Edit and Delete buttons placed at the bottom */} - - - - - - - {/* Edit Modal */} - setIsEditModalOpen(false)}> - - - Edit Member - - - setEditedMember((prev) => ({ ...prev, name: e.target.value })) - } - margin="normal" - /> - - setEditedMember((prev) => ({ ...prev, role: e.target.value })) - } - margin="normal" - /> - - setEditedMember((prev) => ({ ...prev, thumbnail: e.target.value })) - } - margin="normal" - /> - - setEditedMember((prev) => ({ ...prev, description: e.target.value })) - } - margin="normal" - /> - - - - - - - - ); -}; - -export default MemberCard; - - - -// import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; -// import { Backdrop, Box, Typography, Button, TextField, useMediaQuery } from '@mui/material'; -// import { useState } from 'react'; - -// interface MemberCardProps { -// memberName: string; -// memberRole: string; -// memberThumbnail: string; -// memberDescription: string; -// key: number; -// onEdit: (updatedMember: any) => void; -// onDelete: () => void; -// } - -// const MemberCard = ({ -// memberName, -// memberRole, -// memberThumbnail, -// memberDescription, -// onEdit, -// onDelete, -// }: MemberCardProps) => { -// const breakPoint = useMediaQuery('(min-width:600px)'); -// const [isClicked, setIsClicked] = useState(false); -// const [mouseOver, setMouseOver] = useState(false); -// const [isEditing, setIsEditing] = useState(false); -// const [editData, setEditData] = useState({ -// memberName, -// memberRole, -// memberThumbnail, -// memberDescription, -// }); - -// const handleClick = () => { -// setIsClicked(!isClicked); -// }; - -// const handleEditClick = () => { -// setIsEditing(true); -// }; - -// const handleSaveClick = () => { -// onEdit(editData); // Update the member details -// setIsEditing(false); -// }; - -// const handleCancelClick = () => { -// setEditData({ -// memberName, -// memberRole, -// memberThumbnail, -// memberDescription, -// }); -// setIsEditing(false); -// }; - -// const handleInputChange = (e: React.ChangeEvent) => { -// setEditData({ -// ...editData, -// [e.target.name]: e.target.value, -// }); -// }; - -// return ( -// <> -// setMouseOver(true)} -// onMouseLeave={() => setMouseOver(false)} -// > -// -// -// {memberName} -// -// -// {memberRole} -// -// -// -// -// -// -// drone image -// - -// {/* Editable Form Overlay */} -// {isEditing && ( -// theme.zIndex.drawer + 2, -// backgroundColor: 'rgba(0, 0, 0, 0.5)', // Blurred background -// display: 'flex', -// justifyContent: 'center', -// alignItems: 'center', -// }} -// > -// -// -// Edit Member Information -// - -// -// -// -// - -// -// -// -// -// -// -// )} -// -// ); -// }; - -// export default MemberCard; - - - - - From 4a73dc5dc0320bd83c2c3b94cefc3cf102ba2856 Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Thu, 16 Jan 2025 13:13:11 +0530 Subject: [PATCH 07/16] Update MemberCard.tsx --- src/components/Member/MemberCard.tsx | 629 +++++++++++++++++++++++++++ 1 file changed, 629 insertions(+) diff --git a/src/components/Member/MemberCard.tsx b/src/components/Member/MemberCard.tsx index 8b13789..9e84745 100644 --- a/src/components/Member/MemberCard.tsx +++ b/src/components/Member/MemberCard.tsx @@ -1 +1,630 @@ +// import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; +// import { Backdrop, Box, Typography, useMediaQuery } from '@mui/material'; +// import { useState } from 'react'; + +// interface MemberCardProps { +// memberName: string; +// memberRole: string; +// memberThumbnail: string; +// memberDescription: string; +// key: number; +// } + +// const MemberCard = ({ +// memberName, +// memberRole, +// memberThumbnail, +// memberDescription, +// }: MemberCardProps) => { +// const breakPoint = useMediaQuery('(min-width:600px)'); +// const [isClicked, setIsClicked] = useState(false); +// const [mouseOver, setMouseOver] = useState(false); + +// function handleClick() { +// setIsClicked(!isClicked); +// } + +// return ( +// <> +// setMouseOver(true)} +// onMouseLeave={() => setMouseOver(false)} +// > +// theme.zIndex.drawer + 2, +// backgroundColor: 'black', +// display: 'flex', +// fontSize: '30px', +// padding: '20px', +// flexDirection: breakPoint ? 'row' : 'column', +// gap: '20px', +// }} +// className="closeIconCursor" +// open={isClicked} +// > +// +// +// +// {memberName} +// + +// +// {memberRole} +// + +// +// {memberDescription} +// +// +// +// +// drone image +// +// +// +// {memberName} +// +// +// {memberRole} +// +// +// +// ); +// }; + +// export default MemberCard; + +import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; +import { Backdrop, Box, Typography, Button, Modal, TextField, useMediaQuery } from '@mui/material'; +import { useState } from 'react'; + +interface MemberCardProps { + memberName: string; + memberRole: string; + memberThumbnail: string; + memberDescription: string; + key: number; + onDelete: () => void; + onEdit: (updatedMember: Partial) => void; +} + +const MemberCard = ({ + memberName, + memberRole, + memberThumbnail, + memberDescription, + onDelete, + onEdit, +}: MemberCardProps) => { + const breakPoint = useMediaQuery('(min-width:600px)'); + const [isClicked, setIsClicked] = useState(false); + const [mouseOver, setMouseOver] = useState(false); + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + const [editedMember, setEditedMember] = useState({ + name: memberName, + role: memberRole, + thumbnail: memberThumbnail, + description: memberDescription, + }); + + function handleClick() { + setIsClicked(!isClicked); + } + + function handleEditSave() { + onEdit({ + memberName: editedMember.name, + memberRole: editedMember.role, + memberThumbnail: editedMember.thumbnail, + memberDescription: editedMember.description, + }); + setIsEditModalOpen(false); + } + + return ( + <> + setMouseOver(true)} + onMouseLeave={() => setMouseOver(false)} + > + theme.zIndex.drawer + 2, + backgroundColor: 'black', + display: 'flex', + fontSize: '30px', + padding: '20px', + flexDirection: breakPoint ? 'row' : 'column', + gap: '20px', + }} + className="closeIconCursor" + open={isClicked} + > + + + + {memberName} + + + + {memberRole} + + + + {memberDescription} + + + + + drone image + + + + {memberName} + + + {memberRole} + + + {/* Edit and Delete buttons placed at the bottom */} + + + + + + + {/* Edit Modal */} + setIsEditModalOpen(false)}> + + + Edit Member + + + setEditedMember((prev) => ({ ...prev, name: e.target.value })) + } + margin="normal" + /> + + setEditedMember((prev) => ({ ...prev, role: e.target.value })) + } + margin="normal" + /> + + setEditedMember((prev) => ({ ...prev, thumbnail: e.target.value })) + } + margin="normal" + /> + + setEditedMember((prev) => ({ ...prev, description: e.target.value })) + } + margin="normal" + /> + + + + + + + + ); +}; + +export default MemberCard; + + + +// import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; +// import { Backdrop, Box, Typography, Button, TextField, useMediaQuery } from '@mui/material'; +// import { useState } from 'react'; + +// interface MemberCardProps { +// memberName: string; +// memberRole: string; +// memberThumbnail: string; +// memberDescription: string; +// key: number; +// onEdit: (updatedMember: any) => void; +// onDelete: () => void; +// } + +// const MemberCard = ({ +// memberName, +// memberRole, +// memberThumbnail, +// memberDescription, +// onEdit, +// onDelete, +// }: MemberCardProps) => { +// const breakPoint = useMediaQuery('(min-width:600px)'); +// const [isClicked, setIsClicked] = useState(false); +// const [mouseOver, setMouseOver] = useState(false); +// const [isEditing, setIsEditing] = useState(false); +// const [editData, setEditData] = useState({ +// memberName, +// memberRole, +// memberThumbnail, +// memberDescription, +// }); + +// const handleClick = () => { +// setIsClicked(!isClicked); +// }; + +// const handleEditClick = () => { +// setIsEditing(true); +// }; + +// const handleSaveClick = () => { +// onEdit(editData); // Update the member details +// setIsEditing(false); +// }; + +// const handleCancelClick = () => { +// setEditData({ +// memberName, +// memberRole, +// memberThumbnail, +// memberDescription, +// }); +// setIsEditing(false); +// }; + +// const handleInputChange = (e: React.ChangeEvent) => { +// setEditData({ +// ...editData, +// [e.target.name]: e.target.value, +// }); +// }; + +// return ( +// <> +// setMouseOver(true)} +// onMouseLeave={() => setMouseOver(false)} +// > +// +// +// {memberName} +// +// +// {memberRole} +// +// +// +// +// +// +// drone image +// + +// {/* Editable Form Overlay */} +// {isEditing && ( +// theme.zIndex.drawer + 2, +// backgroundColor: 'rgba(0, 0, 0, 0.5)', // Blurred background +// display: 'flex', +// justifyContent: 'center', +// alignItems: 'center', +// }} +// > +// +// +// Edit Member Information +// + +// +// +// +// + +// +// +// +// +// +// +// )} +// +// ); +// }; + +// export default MemberCard; + + + + From 604740276742a58be5d986c3cd5615cfe1fbe88d Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Thu, 16 Jan 2025 13:14:18 +0530 Subject: [PATCH 08/16] Create members.tsx --- src/components/Member/members.tsx | 200 ++++++++++++++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 src/components/Member/members.tsx diff --git a/src/components/Member/members.tsx b/src/components/Member/members.tsx new file mode 100644 index 0000000..bf8229a --- /dev/null +++ b/src/components/Member/members.tsx @@ -0,0 +1,200 @@ +// import MemberCard from '@/components/Member/MemberCard'; +// import { color, h4, h5 } from '@/constants'; +// import { Box, Typography, useMediaQuery } from '@mui/material'; +// import MemberData from '@/data/members'; + +// export default function Members() { +// const breakPoint = useMediaQuery('(min-width:600px)'); +// const breakPoint2 = useMediaQuery('(min-width:750px)'); + +// return ( +// +// +// Members +// +// +// {MemberData.map((member, index) => ( +// +// ))} +// +// +// ); +// } +// src/pages/members.tsx + +import MemberCard from '@/components/Member/MemberCard'; +import { color, h4, h5 } from '@/constants'; +import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material'; +import MemberData from '@/data/members'; +import { useState } from 'react'; + +export default function Members() { + const breakPoint = useMediaQuery('(min-width:600px)'); + const breakPoint2 = useMediaQuery('(min-width:750px)'); + const [members, setMembers] = useState(MemberData); + const [isAddModalOpen, setIsAddModalOpen] = useState(false); + const [newMember, setNewMember] = useState({ + name: '', + role: '', + thumbnail: '', + description: '' + }); + + function handleDelete(index: number) { + setMembers(members.filter((_, i) => i !== index)); + } + + function handleEdit(index: number, updatedMember: Partial) { + const updatedMembers = [...members]; + updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; + setMembers(updatedMembers); + } + + function handleAddMember() { + setMembers([ + ...members, + { + memberName: newMember.name, + memberRole: newMember.role, + memberThumbnail: newMember.thumbnail, + memberQuote: newMember.description + } + ]); + setIsAddModalOpen(false); + setNewMember({ name: '', role: '', thumbnail: '', description: '' }); + } + + return ( + + + Members + + + {/* Add Member Button */} + + + + {members.map((member, index) => ( + handleDelete(index)} + onEdit={(updatedMember) => handleEdit(index, updatedMember)} + /> + ))} + + + {/* Add Member Modal */} + setIsAddModalOpen(false)}> + + + Add New Member + + + setNewMember((prev) => ({ ...prev, name: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, role: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, thumbnail: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, description: e.target.value })) + } + margin="normal" + /> + + + + + + + + ); +} From c38f1e3ca30222eb9ced0fb5942c44dddd3085ce Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Wed, 12 Mar 2025 02:43:24 +0530 Subject: [PATCH 09/16] Create index.tsx --- src/pages/admin/members/index.tsx | 151 ++++++++++++++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 src/pages/admin/members/index.tsx diff --git a/src/pages/admin/members/index.tsx b/src/pages/admin/members/index.tsx new file mode 100644 index 0000000..c3fd899 --- /dev/null +++ b/src/pages/admin/members/index.tsx @@ -0,0 +1,151 @@ +import { useState } from 'react'; +import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material'; +import { color, h4, h5 } from '@/constants'; +import MemberData from '@/data/members'; +import AdminMemberCard from '@/components/Admin/AdminMemberCard'; + +export default function Members() { + const breakPoint = useMediaQuery('(min-width:600px)'); + const breakPoint2 = useMediaQuery('(min-width:750px)'); + + const [members, setMembers] = useState(MemberData); + + const [isAddModalOpen, setIsAddModalOpen] = useState(false); + const [newMember, setNewMember] = useState({ + name: '', + role: '', + thumbnail: '', + description: '' + }); + + function handleDelete(index: number) { + setMembers(members.filter((_, i) => i !== index)); + } + + function handleEdit(index: number, updatedMember: any) { + const updatedMembers = [...members]; + updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; + setMembers(updatedMembers); + } + + function handleAddMember() { + setMembers([ + ...members, + { + memberName: newMember.name, + memberRole: newMember.role, + memberThumbnail: newMember.thumbnail, + memberQuote: newMember.description + } + ]); + setIsAddModalOpen(false); + setNewMember({ name: '', role: '', thumbnail: '', description: '' }); + } + + return ( + + + + Admin Members + + + {/* Add Member Button */} + + + + {members.map((member, index) => ( + handleDelete(index)} + onEdit={(updatedMember) => handleEdit(index, updatedMember)} + /> + ))} + + + {/* Add Member Modal with white background */} + setIsAddModalOpen(false)}> + + + Add New Member + + + setNewMember((prev) => ({ ...prev, name: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, role: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, thumbnail: e.target.value })) + } + margin="normal" + /> + + setNewMember((prev) => ({ ...prev, description: e.target.value })) + } + margin="normal" + /> + + + + + + + + + ); +} From 38c44a748bf4bd4a53e98e4f5a263c3682c6423e Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Wed, 12 Mar 2025 02:44:48 +0530 Subject: [PATCH 10/16] Create AdminMemberCard.tsx --- src/components/Admin/AdminMemberCard.tsx | 234 +++++++++++++++++++++++ 1 file changed, 234 insertions(+) create mode 100644 src/components/Admin/AdminMemberCard.tsx diff --git a/src/components/Admin/AdminMemberCard.tsx b/src/components/Admin/AdminMemberCard.tsx new file mode 100644 index 0000000..7cff275 --- /dev/null +++ b/src/components/Admin/AdminMemberCard.tsx @@ -0,0 +1,234 @@ +import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; +import { Backdrop, Box, Typography, Button, Modal, TextField, useMediaQuery } from '@mui/material'; +import { useState } from 'react'; + +interface AdminMemberCardProps { + adminName: string; + adminRole: string; + adminThumbnail: string; + adminDescription: string; + key: number; + onDelete: () => void; + onEdit: (updatedAdmin: Partial) => void; +} + +const AdminMemberCard = ({ + adminName, + adminRole, + adminThumbnail, + adminDescription, + onDelete, + onEdit, +}: AdminMemberCardProps) => { + const breakPoint = useMediaQuery('(min-width:600px)'); + const [isClicked, setIsClicked] = useState(false); + const [mouseOver, setMouseOver] = useState(false); + const [isEditModalOpen, setIsEditModalOpen] = useState(false); + const [editedAdmin, setEditedAdmin] = useState({ + name: adminName, + role: adminRole, + thumbnail: adminThumbnail, + description: adminDescription, + }); + + function handleClick() { + setIsClicked(!isClicked); + } + + function handleEditSave() { + onEdit({ + adminName: editedAdmin.name, + adminRole: editedAdmin.role, + adminThumbnail: editedAdmin.thumbnail, + adminDescription: editedAdmin.description, + }); + setIsEditModalOpen(false); + } + + return ( + <> + setMouseOver(true)} + onMouseLeave={() => setMouseOver(false)} + > + theme.zIndex.drawer + 2, + backgroundColor: 'black', + display: 'flex', + fontSize: '30px', + padding: '20px', + flexDirection: breakPoint ? 'row' : 'column', + gap: '20px', + }} + open={isClicked} + > + + + + {adminName} + + + + {adminRole} + + + + {adminDescription} + + + + + admin image + + + + {adminName} + + + {adminRole} + + + {/* Admin-only Edit and Delete buttons */} + + + + + + + {/* Edit Modal with white background */} + setIsEditModalOpen(false)}> + + + Edit Admin + + + setEditedAdmin((prev) => ({ ...prev, name: e.target.value })) + } + margin="normal" + /> + + setEditedAdmin((prev) => ({ ...prev, role: e.target.value })) + } + margin="normal" + /> + + setEditedAdmin((prev) => ({ ...prev, thumbnail: e.target.value })) + } + margin="normal" + /> + + setEditedAdmin((prev) => ({ ...prev, description: e.target.value })) + } + margin="normal" + /> + + + + + + + + ); +}; + +export default AdminMemberCard; From 8ebb2b3e589c5e27c758cdf666d31cc3f129f4d9 Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Wed, 12 Mar 2025 12:33:12 +0530 Subject: [PATCH 11/16] Update index.tsx --- src/pages/admin/members/index.tsx | 60 ++++++++++++++++--------------- 1 file changed, 31 insertions(+), 29 deletions(-) diff --git a/src/pages/admin/members/index.tsx b/src/pages/admin/members/index.tsx index c3fd899..4b801b1 100644 --- a/src/pages/admin/members/index.tsx +++ b/src/pages/admin/members/index.tsx @@ -1,45 +1,47 @@ import { useState } from 'react'; import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material'; import { color, h4, h5 } from '@/constants'; -import MemberData from '@/data/members'; +import MemberData, { MemberDatatype } from '@/data/members'; import AdminMemberCard from '@/components/Admin/AdminMemberCard'; export default function Members() { const breakPoint = useMediaQuery('(min-width:600px)'); const breakPoint2 = useMediaQuery('(min-width:750px)'); - const [members, setMembers] = useState(MemberData); + const [members, setMembers] = useState(MemberData); const [isAddModalOpen, setIsAddModalOpen] = useState(false); const [newMember, setNewMember] = useState({ - name: '', - role: '', - thumbnail: '', - description: '' + memberName: '', + memberRole: '', + memberImage: '', + memberQuote: '' }); function handleDelete(index: number) { setMembers(members.filter((_, i) => i !== index)); } - function handleEdit(index: number, updatedMember: any) { - const updatedMembers = [...members]; - updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; - setMembers(updatedMembers); + function handleEdit(index: number, updatedMember: Partial) { + setMembers((prevMembers) => + prevMembers.map((member, i) => + i === index ? { ...member, ...updatedMember } : member + ) + ); } function handleAddMember() { - setMembers([ - ...members, + setMembers((prevMembers) => [ + ...prevMembers, { - memberName: newMember.name, - memberRole: newMember.role, - memberThumbnail: newMember.thumbnail, - memberQuote: newMember.description + memberName: newMember.memberName, + memberRole: newMember.memberRole, + memberImage: newMember.memberImage, + memberQuote: newMember.memberQuote } ]); setIsAddModalOpen(false); - setNewMember({ name: '', role: '', thumbnail: '', description: '' }); + setNewMember({ memberName: '', memberRole: '', memberImage: '', memberQuote: '' }); } return ( @@ -73,14 +75,14 @@ export default function Members() { adminName={member.memberName} adminRole={member.memberRole} adminDescription={member.memberQuote} - adminThumbnail={`members/${member.memberName.toLowerCase()}.jpg`} + adminThumbnail={member.memberImage ? `members/${member.memberImage}.jpg` : ''} onDelete={() => handleDelete(index)} onEdit={(updatedMember) => handleEdit(index, updatedMember)} /> ))} - {/* Add Member Modal with white background */} + {/* Add Member Modal */} setIsAddModalOpen(false)}> - setNewMember((prev) => ({ ...prev, name: e.target.value })) + setNewMember((prev) => ({ ...prev, memberName: e.target.value })) } margin="normal" /> - setNewMember((prev) => ({ ...prev, role: e.target.value })) + setNewMember((prev) => ({ ...prev, memberRole: e.target.value })) } margin="normal" /> - setNewMember((prev) => ({ ...prev, thumbnail: e.target.value })) + setNewMember((prev) => ({ ...prev, memberImage: e.target.value })) } margin="normal" /> - setNewMember((prev) => ({ ...prev, description: e.target.value })) + setNewMember((prev) => ({ ...prev, memberQuote: e.target.value })) } margin="normal" /> From e1035402668ad5ae0ede72347fabb4bfb52d35fc Mon Sep 17 00:00:00 2001 From: Karthik Sharma <157423278+darkquasar07@users.noreply.github.com> Date: Wed, 12 Mar 2025 12:33:51 +0530 Subject: [PATCH 12/16] Update AdminMemberCard.tsx --- src/components/Admin/AdminMemberCard.tsx | 33 ++++++++++-------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/src/components/Admin/AdminMemberCard.tsx b/src/components/Admin/AdminMemberCard.tsx index 7cff275..14f32ce 100644 --- a/src/components/Admin/AdminMemberCard.tsx +++ b/src/components/Admin/AdminMemberCard.tsx @@ -1,22 +1,22 @@ import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; import { Backdrop, Box, Typography, Button, Modal, TextField, useMediaQuery } from '@mui/material'; import { useState } from 'react'; +import { MemberDatatype } from '@/data/members'; interface AdminMemberCardProps { adminName: string; adminRole: string; - adminThumbnail: string; adminDescription: string; - key: number; + adminThumbnail: string; onDelete: () => void; - onEdit: (updatedAdmin: Partial) => void; + onEdit: (updatedAdmin: Partial) => void; } const AdminMemberCard = ({ adminName, adminRole, - adminThumbnail, adminDescription, + adminThumbnail, onDelete, onEdit, }: AdminMemberCardProps) => { @@ -24,10 +24,12 @@ const AdminMemberCard = ({ const [isClicked, setIsClicked] = useState(false); const [mouseOver, setMouseOver] = useState(false); const [isEditModalOpen, setIsEditModalOpen] = useState(false); + + // Temporary state for editing. These keys are temporary. const [editedAdmin, setEditedAdmin] = useState({ name: adminName, role: adminRole, - thumbnail: adminThumbnail, + thumbnail: '', // This will map to memberImage description: adminDescription, }); @@ -36,11 +38,12 @@ const AdminMemberCard = ({ } function handleEditSave() { + // Map the temporary keys to MemberDatatype keys onEdit({ - adminName: editedAdmin.name, - adminRole: editedAdmin.role, - adminThumbnail: editedAdmin.thumbnail, - adminDescription: editedAdmin.description, + memberName: editedAdmin.name, + memberRole: editedAdmin.role, + memberImage: editedAdmin.thumbnail, // if thumbnail is provided, it updates memberImage + memberQuote: editedAdmin.description, }); setIsEditModalOpen(false); } @@ -97,7 +100,6 @@ const AdminMemberCard = ({ > {adminName} - {adminRole} - - {/* Admin-only Edit and Delete buttons */} - - - - - {/* Edit Modal */} - setIsEditModalOpen(false)}> - - - Edit Member - - - setEditedMember((prev) => ({ ...prev, name: e.target.value })) - } - margin="normal" - /> - - setEditedMember((prev) => ({ ...prev, role: e.target.value })) - } - margin="normal" - /> - - setEditedMember((prev) => ({ ...prev, thumbnail: e.target.value })) - } - margin="normal" - /> - - setEditedMember((prev) => ({ ...prev, description: e.target.value })) - } - margin="normal" - /> - - - - - - ); }; export default MemberCard; - - // import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; -// import { Backdrop, Box, Typography, Button, TextField, useMediaQuery } from '@mui/material'; +// import { Backdrop, Box, Typography, Button, Modal, TextField, useMediaQuery } from '@mui/material'; // import { useState } from 'react'; // interface MemberCardProps { @@ -396,8 +142,6 @@ export default MemberCard; // memberThumbnail: string; // memberDescription: string; // key: number; -// onEdit: (updatedMember: any) => void; -// onDelete: () => void; // } // const MemberCard = ({ @@ -405,54 +149,27 @@ export default MemberCard; // memberRole, // memberThumbnail, // memberDescription, -// onEdit, -// onDelete, // }: MemberCardProps) => { // const breakPoint = useMediaQuery('(min-width:600px)'); // const [isClicked, setIsClicked] = useState(false); // const [mouseOver, setMouseOver] = useState(false); -// const [isEditing, setIsEditing] = useState(false); -// const [editData, setEditData] = useState({ -// memberName, -// memberRole, -// memberThumbnail, -// memberDescription, +// const [isEditModalOpen, setIsEditModalOpen] = useState(false); +// const [editedMember, setEditedMember] = useState({ +// name: memberName, +// role: memberRole, +// thumbnail: memberThumbnail, +// description: memberDescription, // }); -// const handleClick = () => { +// function handleClick() { // setIsClicked(!isClicked); -// }; - -// const handleEditClick = () => { -// setIsEditing(true); -// }; - -// const handleSaveClick = () => { -// onEdit(editData); // Update the member details -// setIsEditing(false); -// }; - -// const handleCancelClick = () => { -// setEditData({ -// memberName, -// memberRole, -// memberThumbnail, -// memberDescription, -// }); -// setIsEditing(false); -// }; - -// const handleInputChange = (e: React.ChangeEvent) => { -// setEditData({ -// ...editData, -// [e.target.name]: e.target.value, -// }); -// }; +// } // return ( // <> // setMouseOver(true)} // onMouseLeave={() => setMouseOver(false)} // > -// -// -// {memberName} -// -// -// {memberRole} -// -// -// -// -// -// -// drone image -// - -// {/* Editable Form Overlay */} -// {isEditing && ( // theme.zIndex.drawer + 2, -// backgroundColor: 'rgba(0, 0, 0, 0.5)', // Blurred background +// backgroundColor: 'black', // display: 'flex', -// justifyContent: 'center', -// alignItems: 'center', +// fontSize: '30px', +// padding: '20px', +// flexDirection: breakPoint ? 'row' : 'column', +// gap: '20px', // }} +// className="closeIconCursor" +// open={isClicked} // > // -// -// Edit Member Information -// - -// -// -// -// +// +// +// {memberName} +// -// -// -// +// {memberDescription} +// // // +// +// drone image +// // -// )} +// +// {memberName} +// +// +// {memberRole} +// + +// {/* Edit and Delete buttons placed at the bottom */} +// +// +// // // ); // }; @@ -626,5 +286,245 @@ export default MemberCard; +// // import { color, h2_, h4, h6, h6_, titleColor } from '@/constants'; +// // import { Backdrop, Box, Typography, Button, TextField, useMediaQuery } from '@mui/material'; +// // import { useState } from 'react'; + +// // interface MemberCardProps { +// // memberName: string; +// // memberRole: string; +// // memberThumbnail: string; +// // memberDescription: string; +// // key: number; +// // onEdit: (updatedMember: any) => void; +// // onDelete: () => void; +// // } + +// // const MemberCard = ({ +// // memberName, +// // memberRole, +// // memberThumbnail, +// // memberDescription, +// // onEdit, +// // onDelete, +// // }: MemberCardProps) => { +// // const breakPoint = useMediaQuery('(min-width:600px)'); +// // const [isClicked, setIsClicked] = useState(false); +// // const [mouseOver, setMouseOver] = useState(false); +// // const [isEditing, setIsEditing] = useState(false); +// // const [editData, setEditData] = useState({ +// // memberName, +// // memberRole, +// // memberThumbnail, +// // memberDescription, +// // }); + +// // const handleClick = () => { +// // setIsClicked(!isClicked); +// // }; + +// // const handleEditClick = () => { +// // setIsEditing(true); +// // }; + +// // const handleSaveClick = () => { +// // onEdit(editData); // Update the member details +// // setIsEditing(false); +// // }; + +// // const handleCancelClick = () => { +// // setEditData({ +// // memberName, +// // memberRole, +// // memberThumbnail, +// // memberDescription, +// // }); +// // setIsEditing(false); +// // }; + +// // const handleInputChange = (e: React.ChangeEvent) => { +// // setEditData({ +// // ...editData, +// // [e.target.name]: e.target.value, +// // }); +// // }; + +// // return ( +// // <> +// // setMouseOver(true)} +// // onMouseLeave={() => setMouseOver(false)} +// // > +// // +// // +// // {memberName} +// // +// // +// // {memberRole} +// // +// // +// // +// // +// // +// // +// // drone image +// // + +// // {/* Editable Form Overlay */} +// // {isEditing && ( +// // theme.zIndex.drawer + 2, +// // backgroundColor: 'rgba(0, 0, 0, 0.5)', // Blurred background +// // display: 'flex', +// // justifyContent: 'center', +// // alignItems: 'center', +// // }} +// // > +// // +// // +// // Edit Member Information +// // + +// // +// // +// // +// // + +// // +// // +// // +// // +// // +// // +// // )} +// // +// // ); +// // }; + +// // export default MemberCard; + + + diff --git a/src/components/Member/members.tsx b/src/components/Member/members.tsx index bf8229a..a2f87fd 100644 --- a/src/components/Member/members.tsx +++ b/src/components/Member/members.tsx @@ -58,29 +58,29 @@ export default function Members() { description: '' }); - function handleDelete(index: number) { - setMembers(members.filter((_, i) => i !== index)); - } + // function handleDelete(index: number) { + // setMembers(members.filter((_, i) => i !== index)); + // } - function handleEdit(index: number, updatedMember: Partial) { - const updatedMembers = [...members]; - updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; - setMembers(updatedMembers); - } + // function handleEdit(index: number, updatedMember: Partial) { + // const updatedMembers = [...members]; + // updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; + // setMembers(updatedMembers); + // } - function handleAddMember() { - setMembers([ - ...members, - { - memberName: newMember.name, - memberRole: newMember.role, - memberThumbnail: newMember.thumbnail, - memberQuote: newMember.description - } - ]); - setIsAddModalOpen(false); - setNewMember({ name: '', role: '', thumbnail: '', description: '' }); - } + // function handleAddMember() { + // setMembers([ + // ...members, + // { + // memberName: newMember.name, + // memberRole: newMember.role, + // memberThumbnail: newMember.thumbnail, + // memberQuote: newMember.description + // } + // ]); + // setIsAddModalOpen(false); + // setNewMember({ name: '', role: '', thumbnail: '', description: '' }); + // } return ( @@ -94,14 +94,14 @@ export default function Members() { {/* Add Member Button */} - + */} handleDelete(index)} - onEdit={(updatedMember) => handleEdit(index, updatedMember)} /> + // onDelete={() => handleDelete(index)} + // onEdit={(updatedMember) => handleEdit(index, updatedMember)} ))} @@ -179,7 +179,7 @@ export default function Members() { margin="normal" /> - + */} From 14001c7378bc74f4a3e25fe05bf84301f8b9df93 Mon Sep 17 00:00:00 2001 From: AbhijeetMankani Date: Wed, 12 Mar 2025 14:39:48 +0530 Subject: [PATCH 14/16] Fetching Member Data from firebase --- src/components/Member/members.tsx | 355 ++++++++++++++++-------------- src/data/members.ts | 1 - src/pages/admin/members/index.tsx | 72 ++++-- 3 files changed, 253 insertions(+), 175 deletions(-) diff --git a/src/components/Member/members.tsx b/src/components/Member/members.tsx index a2f87fd..4e3b1cb 100644 --- a/src/components/Member/members.tsx +++ b/src/components/Member/members.tsx @@ -1,86 +1,44 @@ -// import MemberCard from '@/components/Member/MemberCard'; -// import { color, h4, h5 } from '@/constants'; -// import { Box, Typography, useMediaQuery } from '@mui/material'; -// import MemberData from '@/data/members'; - -// export default function Members() { -// const breakPoint = useMediaQuery('(min-width:600px)'); -// const breakPoint2 = useMediaQuery('(min-width:750px)'); - -// return ( -// -// -// Members -// -// -// {MemberData.map((member, index) => ( -// -// ))} -// -// -// ); -// } -// src/pages/members.tsx - +import { useEffect, useState } from 'react'; import MemberCard from '@/components/Member/MemberCard'; import { color, h4, h5 } from '@/constants'; -import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material'; -import MemberData from '@/data/members'; -import { useState } from 'react'; +import { Box, Typography, useMediaQuery } from '@mui/material'; +import MemberData, { MemberDatatype } from '@/data/members'; +import { getDocs, getDocsFromCache, collection } from 'firebase/firestore'; +import { db } from '@/firebase'; export default function Members() { const breakPoint = useMediaQuery('(min-width:600px)'); const breakPoint2 = useMediaQuery('(min-width:750px)'); - const [members, setMembers] = useState(MemberData); - const [isAddModalOpen, setIsAddModalOpen] = useState(false); - const [newMember, setNewMember] = useState({ - name: '', - role: '', - thumbnail: '', - description: '' - }); - // function handleDelete(index: number) { - // setMembers(members.filter((_, i) => i !== index)); - // } - - // function handleEdit(index: number, updatedMember: Partial) { - // const updatedMembers = [...members]; - // updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; - // setMembers(updatedMembers); - // } + const [members, setMembers] = useState(MemberData); - // function handleAddMember() { - // setMembers([ - // ...members, - // { - // memberName: newMember.name, - // memberRole: newMember.role, - // memberThumbnail: newMember.thumbnail, - // memberQuote: newMember.description - // } - // ]); - // setIsAddModalOpen(false); - // setNewMember({ name: '', role: '', thumbnail: '', description: '' }); - // } + useEffect(() => { + async function fetchMembers() { + const res = await getDocsFromCache(collection(db, 'members')); + if (!res.empty) { + const memberData = res.docs.map((doc) => doc.data() as MemberDatatype); + setMembers(memberData); + } + else { + const res = await getDocs(collection(db, 'members')); + if (!res.empty) { + // const memberData = res.docs.map((doc) => doc.data() as MemberDatatype); + const memberData = res.docs.map((doc) => { + const data = doc.data() + return { + memberName: data.name, + memberRole: data.role, + memberQuote: data.quote, + memberImage: data.image + } as MemberDatatype + }); + // console.log(memberData); + setMembers(memberData); + } + } + } + fetchMembers(); + }, []); return ( @@ -92,17 +50,6 @@ export default function Members() { > Members - - {/* Add Member Button */} - {/* */} - - // onDelete={() => handleDelete(index)} - // onEdit={(updatedMember) => handleEdit(index, updatedMember)} ))} - - {/* Add Member Modal */} - setIsAddModalOpen(false)}> - - - Add New Member - - - setNewMember((prev) => ({ ...prev, name: e.target.value })) - } - margin="normal" - /> - - setNewMember((prev) => ({ ...prev, role: e.target.value })) - } - margin="normal" - /> - - setNewMember((prev) => ({ ...prev, thumbnail: e.target.value })) - } - margin="normal" - /> - - setNewMember((prev) => ({ ...prev, description: e.target.value })) - } - margin="normal" - /> - - {/* - */} - - - ); } +// src/pages/members.tsx + +// import MemberCard from '@/components/Member/MemberCard'; +// import { color, h4, h5 } from '@/constants'; +// import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material'; +// import MemberData from '@/data/members'; +// import { useState } from 'react'; + +// export default function Members() { +// const breakPoint = useMediaQuery('(min-width:600px)'); +// const breakPoint2 = useMediaQuery('(min-width:750px)'); +// const [members, setMembers] = useState(MemberData); +// const [isAddModalOpen, setIsAddModalOpen] = useState(false); +// const [newMember, setNewMember] = useState({ +// name: '', +// role: '', +// thumbnail: '', +// description: '' +// }); + +// // function handleDelete(index: number) { +// // setMembers(members.filter((_, i) => i !== index)); +// // } + +// // function handleEdit(index: number, updatedMember: Partial) { +// // const updatedMembers = [...members]; +// // updatedMembers[index] = { ...updatedMembers[index], ...updatedMember }; +// // setMembers(updatedMembers); +// // } + +// // function handleAddMember() { +// // setMembers([ +// // ...members, +// // { +// // memberName: newMember.name, +// // memberRole: newMember.role, +// // memberThumbnail: newMember.thumbnail, +// // memberQuote: newMember.description +// // } +// // ]); +// // setIsAddModalOpen(false); +// // setNewMember({ name: '', role: '', thumbnail: '', description: '' }); +// // } + +// return ( +// +// +// Members +// + +// {/* Add Member Button */} +// {/* */} + +// +// {members.map((member, index) => ( +// +// // onDelete={() => handleDelete(index)} +// // onEdit={(updatedMember) => handleEdit(index, updatedMember)} +// ))} +// + +// {/* Add Member Modal */} +// setIsAddModalOpen(false)}> +// +// +// Add New Member +// +// +// setNewMember((prev) => ({ ...prev, name: e.target.value })) +// } +// margin="normal" +// /> +// +// setNewMember((prev) => ({ ...prev, role: e.target.value })) +// } +// margin="normal" +// /> +// +// setNewMember((prev) => ({ ...prev, thumbnail: e.target.value })) +// } +// margin="normal" +// /> +// +// setNewMember((prev) => ({ ...prev, description: e.target.value })) +// } +// margin="normal" +// /> +// +// {/* +// */} +// +// +// +// +// ); +// } diff --git a/src/data/members.ts b/src/data/members.ts index 2dd3365..a5f4782 100644 --- a/src/data/members.ts +++ b/src/data/members.ts @@ -2,7 +2,6 @@ export interface MemberDatatype { memberName: string; memberRole: string; memberQuote: string; - memberYear?: string; memberImage?: string; } diff --git a/src/pages/admin/members/index.tsx b/src/pages/admin/members/index.tsx index 4b801b1..3486e58 100644 --- a/src/pages/admin/members/index.tsx +++ b/src/pages/admin/members/index.tsx @@ -1,8 +1,11 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/material'; import { color, h4, h5 } from '@/constants'; import MemberData, { MemberDatatype } from '@/data/members'; import AdminMemberCard from '@/components/Admin/AdminMemberCard'; +import { getDocs, getDocsFromCache, collection, addDoc } from 'firebase/firestore'; +import { db } from '@/firebase'; + export default function Members() { const breakPoint = useMediaQuery('(min-width:600px)'); @@ -10,6 +13,34 @@ export default function Members() { const [members, setMembers] = useState(MemberData); + useEffect(() => { + async function fetchMembers() { + const res = await getDocsFromCache(collection(db, 'members')); + if (!res.empty) { + const memberData = res.docs.map((doc) => doc.data() as MemberDatatype); + setMembers(memberData); + } + else { + const res = await getDocs(collection(db, 'members')); + if (!res.empty) { + // const memberData = res.docs.map((doc) => doc.data() as MemberDatatype); + const memberData = res.docs.map((doc) => { + const data = doc.data() + return { + memberName: data.name, + memberRole: data.role, + memberQuote: data.quote, + memberImage: data.image + } as MemberDatatype + }); + // console.log(memberData); + setMembers(memberData); + } + } + } + fetchMembers(); + }, []); + const [isAddModalOpen, setIsAddModalOpen] = useState(false); const [newMember, setNewMember] = useState({ memberName: '', @@ -30,18 +61,33 @@ export default function Members() { ); } - function handleAddMember() { - setMembers((prevMembers) => [ - ...prevMembers, - { - memberName: newMember.memberName, - memberRole: newMember.memberRole, - memberImage: newMember.memberImage, - memberQuote: newMember.memberQuote - } - ]); - setIsAddModalOpen(false); - setNewMember({ memberName: '', memberRole: '', memberImage: '', memberQuote: '' }); + async function handleAddMember() { + try { + const membersRef = collection(db, 'members'); + await addDoc(membersRef, { + name: newMember.memberName, + role: newMember.memberRole, + quote: newMember.memberQuote, + image: newMember.memberImage + }); + setMembers((prevMembers) => [ + ...prevMembers, + { + memberName: newMember.memberName, + memberRole: newMember.memberRole, + memberImage: newMember.memberImage, + memberQuote: newMember.memberQuote + } + ]); + + // Close the "Add Member" modal + setIsAddModalOpen(false); + + // Reset the newMember form state back to empty values + setNewMember({ memberName: '', memberRole: '', memberImage: '', memberQuote: '' }); + } catch (error) { + console.error('Error adding member:', error); + } } return ( From 53217f37061c43c3515d403097a00d1a74441cd4 Mon Sep 17 00:00:00 2001 From: AbhijeetMankani Date: Wed, 12 Mar 2025 14:52:19 +0530 Subject: [PATCH 15/16] added delete member functionality. Also added docId parameter to member data for efficiency --- src/data/members.ts | 1 + src/pages/admin/members/index.tsx | 40 +++++++++++++++++-------------- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/data/members.ts b/src/data/members.ts index a5f4782..3fae6da 100644 --- a/src/data/members.ts +++ b/src/data/members.ts @@ -1,4 +1,5 @@ export interface MemberDatatype { + docId?: string; memberName: string; memberRole: string; memberQuote: string; diff --git a/src/pages/admin/members/index.tsx b/src/pages/admin/members/index.tsx index 3486e58..041647b 100644 --- a/src/pages/admin/members/index.tsx +++ b/src/pages/admin/members/index.tsx @@ -3,7 +3,7 @@ import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/m import { color, h4, h5 } from '@/constants'; import MemberData, { MemberDatatype } from '@/data/members'; import AdminMemberCard from '@/components/Admin/AdminMemberCard'; -import { getDocs, getDocsFromCache, collection, addDoc } from 'firebase/firestore'; +import { getDocs, getDocsFromCache, collection, addDoc, deleteDoc, doc } from 'firebase/firestore'; import { db } from '@/firebase'; @@ -17,23 +17,25 @@ export default function Members() { async function fetchMembers() { const res = await getDocsFromCache(collection(db, 'members')); if (!res.empty) { - const memberData = res.docs.map((doc) => doc.data() as MemberDatatype); + const memberData = res.docs.map((doc) => ({ + ...doc.data() as MemberDatatype, + docId: doc.id + })); setMembers(memberData); } else { const res = await getDocs(collection(db, 'members')); if (!res.empty) { - // const memberData = res.docs.map((doc) => doc.data() as MemberDatatype); const memberData = res.docs.map((doc) => { const data = doc.data() return { + docId: doc.id, memberName: data.name, memberRole: data.role, memberQuote: data.quote, memberImage: data.image } as MemberDatatype }); - // console.log(memberData); setMembers(memberData); } } @@ -49,14 +51,19 @@ export default function Members() { memberQuote: '' }); - function handleDelete(index: number) { - setMembers(members.filter((_, i) => i !== index)); + async function handleDelete(docId: string) { + try { + await deleteDoc(doc(db, 'members', docId)); + setMembers(members.filter((member) => member.docId !== docId)); + } catch (error) { + console.error('Error deleting member:', error); + } } - function handleEdit(index: number, updatedMember: Partial) { + function handleEdit(docId: string, updatedMember: Partial) { setMembers((prevMembers) => - prevMembers.map((member, i) => - i === index ? { ...member, ...updatedMember } : member + prevMembers.map((member) => + member.docId === docId ? { ...member, ...updatedMember } : member ) ); } @@ -64,7 +71,7 @@ export default function Members() { async function handleAddMember() { try { const membersRef = collection(db, 'members'); - await addDoc(membersRef, { + const docRef = await addDoc(membersRef, { name: newMember.memberName, role: newMember.memberRole, quote: newMember.memberQuote, @@ -73,17 +80,14 @@ export default function Members() { setMembers((prevMembers) => [ ...prevMembers, { + docId: docRef.id, memberName: newMember.memberName, memberRole: newMember.memberRole, memberImage: newMember.memberImage, memberQuote: newMember.memberQuote } ]); - - // Close the "Add Member" modal setIsAddModalOpen(false); - - // Reset the newMember form state back to empty values setNewMember({ memberName: '', memberRole: '', memberImage: '', memberQuote: '' }); } catch (error) { console.error('Error adding member:', error); @@ -115,15 +119,15 @@ export default function Members() { } justifyContent={breakPoint ? 'space-between' : 'center'} > - {members.map((member, index) => ( + {members.map((member) => ( handleDelete(index)} - onEdit={(updatedMember) => handleEdit(index, updatedMember)} + onDelete={() => handleDelete(member.docId!)} + onEdit={(updatedMember) => handleEdit(member.docId!, updatedMember)} /> ))} From e8dcbf3cdd357d19fca1331a3d99aa5b40aaa543 Mon Sep 17 00:00:00 2001 From: AbhijeetMankani Date: Wed, 12 Mar 2025 15:05:03 +0530 Subject: [PATCH 16/16] Added member editing functionality --- src/pages/admin/members/index.tsx | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/pages/admin/members/index.tsx b/src/pages/admin/members/index.tsx index 041647b..0e6f693 100644 --- a/src/pages/admin/members/index.tsx +++ b/src/pages/admin/members/index.tsx @@ -3,7 +3,7 @@ import { Box, Typography, useMediaQuery, Button, Modal, TextField } from '@mui/m import { color, h4, h5 } from '@/constants'; import MemberData, { MemberDatatype } from '@/data/members'; import AdminMemberCard from '@/components/Admin/AdminMemberCard'; -import { getDocs, getDocsFromCache, collection, addDoc, deleteDoc, doc } from 'firebase/firestore'; +import { getDocs, getDocsFromCache, collection, addDoc, deleteDoc, doc, updateDoc } from 'firebase/firestore'; import { db } from '@/firebase'; @@ -60,12 +60,23 @@ export default function Members() { } } - function handleEdit(docId: string, updatedMember: Partial) { - setMembers((prevMembers) => - prevMembers.map((member) => - member.docId === docId ? { ...member, ...updatedMember } : member - ) - ); + async function handleEdit(docId: string, updatedMember: Partial) { + try { + const memberRef = doc(db, 'members', docId); + await updateDoc(memberRef, { + name: updatedMember.memberName, + role: updatedMember.memberRole, + quote: updatedMember.memberQuote, + image: updatedMember.memberImage + }); + setMembers((prevMembers) => + prevMembers.map((member) => + member.docId === docId ? { ...member, ...updatedMember } : member + ) + ); + } catch (error) { + console.error('Error updating member:', error); + } } async function handleAddMember() {