Skip to content

Commit

Permalink
Invite member (#47)
Browse files Browse the repository at this point in the history 
* Windows working

* Please enter the commit message for your changes

* added invite members dropdown and also the ability to send emails:
  • Loading branch information
@bilalmohib
bilalmohib authored Apr 22, 2023
1 parent ef5b211 commit a0d7cb3
Show file tree
Hide file tree
Showing 8 changed files with 310 additions and 150 deletions.
24 changes: 24 additions & 0 deletions check.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
var nodemailer = require('nodemailer');

var transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: '[email protected]',
pass: '123321123BiLaL'
}
});

var mailOptions = {
from: '[email protected]',
to: '[email protected]',
subject: 'Sending Email using Node.js',
text: 'That was easy!'
};

transporter.sendMail(mailOptions, function(error, info){
if (error) {
console.log(error);
} else {
console.log('Email sent: ' + info.response);
}
});
186 changes: 74 additions & 112 deletions components/CustomModal/InviteMembers/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, { useEffect } from 'react'
import {
Box,
Button,
Expand Down Expand Up @@ -59,136 +59,104 @@ const InviteMembers: React.FC<InviteMembersProps> = (
}
}

// const projectMembers = [
// "[email protected]",
// "[email protected]",
// "[email protected]",
// "[email protected]"
// ];

const [selectedMembers, setSelectedMembers] = React.useState<string[]>([]);

const [selectedProjects, setSelectedProjects] = React.useState<string[]>([]);

// For popover
const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);

// const computerScienceProjects = [
// {
// title: "Daraz Shopping App",
// // Remove spaces from title and make it lowercase
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "darazshoppingapp"
// },
// {
// title: "Ecommerce Shopping App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "ecommerceshoppingapp"
// },
// {
// title: "Covid-19 Tracker App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "covid19trackerapp"
// },
// {
// title: "Social Media App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "socialmediaapp"
// },
// {
// title: "Food Delivery App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "fooddeliveryapp"
// },
// {
// title: "Uber Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "ubercloneapp"
// },
// {
// title: "Netflix Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "netflixcloneapp"
// },
// {
// title: "Tinder Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "tindercloneapp"
// },
// {
// title: "Instagram Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "instagramcloneapp"
// },
// {
// title: "Facebook Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "facebookcloneapp"
// },
// {
// title: "Twitter Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "twittercloneapp"
// },
// {
// title: "Whatsapp Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "whatsappcloneapp"
// },
// {
// title: "Youtube Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "youtubecloneapp"

// },
// {
// title: "Google Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "googlecloneapp"
// },
// {
// title: "Amazon Clone App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "amazoncloneapp"
// },
// {
// title: "Computer Vision App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "computervisionapp"
// },
// {
// title: "Attendance Management App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "attendancemanagementapp"
// },
// {
// title: "Ball Tracking App",
// // value: title.replace(/\s+/g, '').toLowerCase()
// value: "balltrackingapp"
// }
// ];
// To get the value of the selected member
useEffect(() => {
console.log("selectedMembers", selectedMembers);
}, [selectedMembers]);

const [modifiedProjectMembers, setModifiedProjectMembers] = React.useState<any>([]);

// Modify the projectMembers array and make it an array of objects such that it contains the name
// and the email of the member and extract first and last name first letter and make it the avatar
useEffect(() => {
const localModifiedProjectMembers = projectMembers.map((member: string) => {
const name = member.split("@")[0];
const email = member;
const firstName = email.split(".")[0];
const lastName = email.split(".")[1];
// Extract first and last name first letter and make it the avatar
const avatar = firstName.charAt(0) + lastName.charAt(0);
return {
id: member,
name: member,
email: email,
avatar: avatar
}
});
console.log("localModifiedProjectMembers", localModifiedProjectMembers);

setModifiedProjectMembers(localModifiedProjectMembers);

}, [projectMembers]);

async function sendInvite(name: string, email: string) {
// name, email, link, projectName, senderName
const sendData = {
"name": "BILAL",
"email": "[email protected]",
"link": "https://www.google.com",
"projectName": "FYP",
"senderName": "M. Bilal"
}
const response = await fetch('/api/send-invite', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(sendData),
});

if (!response.ok) {
const error = await response.json();
throw new Error(error.message);
}

return await response.json();
}

async function sendInvites() {
sendInvite('John Doe', '[email protected]')
.then((response) => {
console.log(response.message);
alert(response.message);
})
.catch((error) => {
console.error(error.message)
alert(error.message);
});
}

return (
<Box>
<Typography sx={styles.label} variant="h6" component="h2">
Email addresses
</Typography>
<Box sx={{ mt: "8px" }}>
{/* <MultiSelectDropDown
{/* <MultiSelectChipDropDown
placeholder="[email protected] , [email protected]"
options={projectMembers}
selectedArrayList={selectedMembers}
setSelectedArrayList={setSelectedMembers}
styles={styles.input}
dropDownStyles={styles.dropDownStyles}
/> */}
<MultiSelectChipDropDown

<MultiSelectCustomAutoComplete
placeholder="[email protected] , [email protected]"
options={projectMembers}
options={modifiedProjectMembers}
selectedArrayList={selectedMembers}
setSelectedArrayList={setSelectedMembers}
styles={styles.input}
dropDownStyles={styles.dropDownStyles}
type="members"
/>
</Box>
<Typography sx={styles.inputInfo} variant="h6" component="h2">
Expand All @@ -207,21 +175,14 @@ const InviteMembers: React.FC<InviteMembersProps> = (
</Typography>

<Box sx={{ mt: "15px" }}>
{/* <MultiSelectChipDropDown
placeholder="Start typing to add projects"
options={projectMembers}
selectedArrayList={selectedMembers}
setSelectedArrayList={setSelectedMembers}
styles={styles.input}
dropDownStyles={styles.dropDownStyles}
/> */}
<MultiSelectCustomAutoComplete
placeholder="Start typing to add projects"
options={projects}
selectedArrayList={selectedProjects}
setSelectedArrayList={setSelectedProjects}
styles={styles.input}
dropDownStyles={styles.dropDownStyles}
type="projects"
/>
</Box>

Expand Down Expand Up @@ -251,6 +212,7 @@ const InviteMembers: React.FC<InviteMembersProps> = (
color: "#fff",
}
}}
onClick={sendInvites}
>
Send
</Button>
Expand Down
Loading

1 comment on commit a0d7cb3

@vercel
Copy link

@vercel vercel bot commented on a0d7cb3 Apr 22, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

fyp-project-management-software – ./

fyp-project-management-software.vercel.app
fyp-project-management-software-git-main-topideas.vercel.app
taskencher.com
www.taskencher.com
fyp-project-management-software-topideas.vercel.app

Please sign in to comment.