Skip to content

Commit

Permalink
feat: add people in workspace
Browse files Browse the repository at this point in the history
  • Loading branch information
@yp969803
yp969803 committed Jan 21, 2024
1 parent 48d0c87 commit 8b83694
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 132 deletions.
2 changes: 2 additions & 0 deletions src/app/routes/BasicRoutes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Workspace from 'features/workspace';
import EditWorkspace from 'features/EditWorkspace';
import EditProject from 'features/EditProject';
import WorkspaceMembers from 'features/workspace-members ';
import WorkspaceAddMember from 'features/WorkspaceAddMember';

const BasicRoutes = () => {
return (
Expand All @@ -24,6 +25,7 @@ const BasicRoutes = () => {
<Route path={'/editWorkspace/:spaceName'} element ={<EditWorkspace/>} />
<Route path={'/editProject/:spaceName/:projectName'} element={<EditProject/>}/>
<Route path={'/workspaceMembers/:spaceName'} element={<WorkspaceMembers/>}/>
<Route path={"/workspaceAddMembers/:spaceName"} element={<WorkspaceAddMember/>} />
<Route path={'/*'} element={<Error />} />
{/* <Route path={'/testing'} element={<ProjectMembers />} /> */}
</Routes>
Expand Down
150 changes: 22 additions & 128 deletions src/features/WorkspaceAddMember/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { getAllUser, getUser } from 'app/api/user';
import React, { ChangeEvent, useContext, useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';
import { useQuery } from 'react-query';
import toast from 'react-hot-toast';
import { addOrg, addOrgMembers, getAllOrgs } from 'app/api/organization';
import { addOrg, addOrgMembers, getAllOrgs, getOrgMembers } from 'app/api/organization';
import { uploadIcon } from 'app/api/file';

import './index.scss';
Expand All @@ -14,35 +14,27 @@ const WorkspaceAddMember = () => {
const token = localStorage.getItem('token');
const userContext = useContext(UserContext);

const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [name, SetName] = useState<string | null>(null);
const [description, setDiscription] = useState<string | null>(null);
const [validDescription, setValidDescription] = useState<boolean>(true);
const [validName, setValidName] = useState<boolean>(false);
const [uniqueName, setUniqueName] = useState<boolean>(false);
const [members, setMembers] = useState<string[]>([]);
const [memberName, setMemberName] = useState<string | null>(null);

const [orgMembers, setOrgMembers] = useState<string[]>([])
const [users, setUsers] = useState<string[]>([]);
const [orgs, setOrgs] = useState<string[]>([]);
const {spaceName} = useParams()

const dataFetch = async () => {
try {
if (token) {
if (token&&spaceName) {
const users_aray: string[] = [];
const org_aray: string[] = [];

const allUser = await getAllUser(token);
const allOrgs = await getAllOrgs(token);
const orgMembers = await getOrgMembers(token,spaceName)
allUser.data.users.forEach((user) => {
users_aray.push(user.username);
});
setOrgMembers(Object.keys(orgMembers.data.members))

allOrgs.data.organizations.forEach((org) => {
org_aray.push(org.name);
});

setUsers(users_aray);
setOrgs(org_aray);

}
} catch (e) {}
};
Expand All @@ -51,52 +43,17 @@ const WorkspaceAddMember = () => {
dataFetch();
}, []);

const allowedFieTypes = ['image/jpeg', 'image/jpg', 'image/png'];

const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];

if (file) {
if (allowedFieTypes.includes(file.type)) {
setSelectedFile(file);
} else {
setSelectedFile(null);
toast.error('Invalid file type');
}
}
};

function valid_name(str: string): boolean {
// Define a regular expression for special characters (excluding letters, digits, and spaces)
const specialCharacters = /^[a-zA-Z0-9_-]+$/;

// Check if the string contains any special characters
return specialCharacters.test(str) && !str.endsWith('-userspace');
}

function isUniqueName(str: string): boolean {
return !orgs.includes(str);
}

const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => {
SetName(event.target.value);
setUniqueName(() => isUniqueName(event.target.value));
setValidName(() => valid_name(event.target.value));
};

const handleDesriptionChange = (event: ChangeEvent<HTMLInputElement>) => {
setDiscription(event.target.value);
if (description?.length) {
setValidDescription(description.length < 200);
}
};

const addMembers = () => {
if (memberName) {
if (
users.includes(memberName) &&
memberName != userContext?.username &&
!members.includes(memberName)
!members.includes(memberName)&&
!orgMembers.includes(memberName)
) {
setMembers([...members, memberName]);
setMemberName(null);
Expand All @@ -120,36 +77,23 @@ const WorkspaceAddMember = () => {
};
const SubmitHandler = async (): Promise<void> => {
if (
description &&
token &&
name &&
validName &&
uniqueName &&
validDescription

token

) {
const func = async (): Promise<void> => {
const dataRes = await addOrg(token, {
name: name,
description: description,
});

try {
if (selectedFile != null) {
const fileRes = uploadIcon(token, name, selectedFile);
}
} catch (e) {}
if (members.length > 0) {
if (members.length > 0&&spaceName) {
try {
const addMmebersRes = await addOrgMembers(token, name, members);
const addMmebersRes = await addOrgMembers(token, spaceName, members);
} catch (e) {}
}
navigate('/');
};

toast.promise(func(), {
loading: 'Saving Workspace',
success: <b>Workspace saved</b>,
error: <b>Could not save</b>,
loading: 'On Progress',
success: <b>Members added</b>,
error: <b>Could not add</b>,
});
} else {
toast.error('Invalid inputs');
Expand All @@ -159,60 +103,10 @@ const WorkspaceAddMember = () => {
return (
<div className='main_aworkspace_container'>
<div className='addworkspace-form-container'>


<div className='single-form-element-container'>
<label className='label'>Add Icon</label>
<div className='file-input-container'>
<label htmlFor='icon-file' className='file-label'>
Choose image files here
</label>
<input
type='file'
id='icon-file'
className='custom-file-input'
onChange={handleFileChange}
/>
<p>Supported formats: JPEG, JPG, PNG</p>
<p>Selected File: {selectedFile?.name}</p>
</div>
</div>
<div className='single-form-element-container'>
<label className='label' htmlFor='workspace-name'>
Name
</label>
<input
type='text'
className='custom-input'
id='workspace-name'
value={name ? name : ''}
onChange={handleNameChange}
placeholder='workspace name'
/>
{!name ? <p>Name feild should not be empty</p> : <></>}
{!validName && name ? <p>Not a valid name</p> : <></>}
{!uniqueName && name ? (
<p>Name already taken. Try another name</p>
) : (
<></>
)}
</div>
<div className='single-form-element-container'>
<label className='label' htmlFor='workspace-description'>
Description
</label>
<input
id='workspace-description'
type='text'
className='custom-input'
value={description ? description : ''}
onChange={handleDesriptionChange}
placeholder='workspace description'
/>
{!description ? <p>Description feild should not be empty</p> : <></>}
{!validDescription ? (
<p>Characters length should be less than 200</p>
) : (
<></>
)}

<div className='add-member-container'>
<input
type='text'
Expand Down
5 changes: 1 addition & 4 deletions src/features/workspace-members /components/MemberCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,8 @@ const MemberCard = ({
const HandleRoleChange= async(event:ChangeEvent<HTMLSelectElement>)=>{

const new_role= event.target.value
console.log("helo")
if(token&&spaceName&&orgMembers&&new_role!=role){
console.log("chu")
console.log({[name]:new_role})



const func= async()=>{
console.log({[name]:new_role})
Expand Down

0 comments on commit 8b83694

Please sign in to comment.