|
| 1 | +import { getAllUser, getUser } from 'app/api/user'; |
| 2 | +import React, { ChangeEvent, useState } from 'react'; |
| 3 | +import { useNavigate } from 'react-router-dom'; |
| 4 | +import { useQuery } from 'react-query'; |
| 5 | +import toast from 'react-hot-toast'; |
| 6 | +import { addOrg, getAllOrgs } from 'app/api/organization'; |
| 7 | +import { uploadIcon } from 'app/api/file'; |
| 8 | + |
| 9 | +const AddWorkspace = () => { |
| 10 | + const navigate = useNavigate(); |
| 11 | + const token = localStorage.getItem('token'); |
| 12 | + |
| 13 | + const [selectedFile, setSelectedFile] = useState<File | null>(null); |
| 14 | + const [name, SetName] = useState<string | null>(null); |
| 15 | + const [description, setDiscription] = useState<string | null>(null); |
| 16 | + const [validName, setValidName] = useState<boolean>(false); |
| 17 | + |
| 18 | + const [members, setMembers] = useState<string[]>([]); |
| 19 | + const [memberName, setMemberName]=useState<string| null>(null); |
| 20 | + |
| 21 | + const [users, setUsers] = useState<string[]>([]); |
| 22 | + const [orgs, setOrgs] = useState<string[]>([]); |
| 23 | + |
| 24 | + const dataFetch = async () => { |
| 25 | + try { |
| 26 | + if (token) { |
| 27 | + const users_aray: string[] = []; |
| 28 | + const org_aray: string[] = []; |
| 29 | + const allUser = await getAllUser(token); |
| 30 | + const allOrgs = await getAllOrgs(token); |
| 31 | + allUser.data.users.forEach((user) => { |
| 32 | + users_aray.push(user.username); |
| 33 | + }); |
| 34 | + |
| 35 | + allOrgs.data.organizations.forEach((org) => { |
| 36 | + org_aray.push(org.name); |
| 37 | + }); |
| 38 | + |
| 39 | + setUsers(users_aray); |
| 40 | + setOrgs(org_aray); |
| 41 | + } |
| 42 | + } catch (e) {} |
| 43 | + }; |
| 44 | + |
| 45 | + const checklogin = async () => { |
| 46 | + if (token != null) { |
| 47 | + const userData = await getUser(token); |
| 48 | + return userData.data |
| 49 | + } else { |
| 50 | + toast.error("Session expired") |
| 51 | + navigate('/login'); |
| 52 | + } |
| 53 | + }; |
| 54 | + |
| 55 | + const { data,isError } = useQuery({ |
| 56 | + queryFn: () => checklogin(), |
| 57 | + queryKey: 'checkLogin', |
| 58 | + }); |
| 59 | + |
| 60 | + if (isError) { |
| 61 | + toast.error("Session expired") |
| 62 | + navigate('/login'); |
| 63 | + } |
| 64 | + |
| 65 | + const {} = useQuery({ |
| 66 | + queryFn: () => dataFetch(), |
| 67 | + queryKey: 'allUsersAndAllOrgs', |
| 68 | + }); |
| 69 | + |
| 70 | + const allowedFieTypes = ['image/jpeg', 'image/jpg', 'image/png']; |
| 71 | + |
| 72 | + const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => { |
| 73 | + const file = event.target.files?.[0]; |
| 74 | + |
| 75 | + if (file) { |
| 76 | + if (allowedFieTypes.includes(file.type)) { |
| 77 | + setSelectedFile(file); |
| 78 | + } else { |
| 79 | + setSelectedFile(null); |
| 80 | + toast.error('Invalid file type'); |
| 81 | + } |
| 82 | + } |
| 83 | + }; |
| 84 | + |
| 85 | + function valid_name(str: string): boolean { |
| 86 | + // Define a regular expression for special characters (excluding letters, digits, and spaces) |
| 87 | + const specialCharacters = /[^a-zA-Z0-9\s]/; |
| 88 | + |
| 89 | + // Check if the string contains any special characters |
| 90 | + return ( |
| 91 | + specialCharacters.test(str) && |
| 92 | + !str.endsWith('/userspace') && |
| 93 | + !orgs.includes(str) |
| 94 | + ); |
| 95 | + } |
| 96 | + |
| 97 | + const handleNameChange = (event: ChangeEvent<HTMLInputElement>) => { |
| 98 | + SetName(event.target.value); |
| 99 | + |
| 100 | + setValidName(() => valid_name(event.target.value)); |
| 101 | + }; |
| 102 | + |
| 103 | + const handleDesriptionChange = (event: ChangeEvent<HTMLInputElement>) => { |
| 104 | + setDiscription(event.target.value); |
| 105 | + }; |
| 106 | + |
| 107 | + const addMembers= ()=>{ |
| 108 | + if(memberName){ |
| 109 | + if(users.includes(memberName)&& memberName!=data?.message){ |
| 110 | + setMembers([...members,memberName]) |
| 111 | + setMemberName(null) |
| 112 | + } |
| 113 | + } |
| 114 | + } |
| 115 | + |
| 116 | + |
| 117 | + const SubmitHandler=async():Promise<void>=>{ |
| 118 | + |
| 119 | + |
| 120 | + if(validName&&description&&token&&name){ |
| 121 | + try{ |
| 122 | + const dataRes= await addOrg(token,{ |
| 123 | + name:name, |
| 124 | + description:description |
| 125 | + }) |
| 126 | + |
| 127 | + }catch(e){ |
| 128 | + toast.error('Try again!') |
| 129 | + return |
| 130 | + } |
| 131 | + try{ |
| 132 | + if(selectedFile!=null){ |
| 133 | + const fileRes= uploadIcon(token, name, selectedFile) |
| 134 | + } |
| 135 | + navigate("/workspace-view") |
| 136 | + |
| 137 | + }catch(e){ |
| 138 | + navigate("/workspace-view") |
| 139 | + } |
| 140 | + }else{ |
| 141 | + toast.error('Invalid inputs') |
| 142 | + } |
| 143 | + |
| 144 | + |
| 145 | + } |
| 146 | + |
| 147 | + toast.promise( |
| 148 | + SubmitHandler(), |
| 149 | + { |
| 150 | + loading: 'Saving Workspace', |
| 151 | + success: <b>Workspace saved</b>, |
| 152 | + error: <b>Could not save</b>, |
| 153 | + } |
| 154 | + ); |
| 155 | + |
| 156 | + |
| 157 | + return ( |
| 158 | + <div> |
| 159 | + <input type='file' onChange={handleFileChange} /> |
| 160 | + |
| 161 | + <p>Selected File: {selectedFile?.name}</p> |
| 162 | + <input |
| 163 | + type='text' |
| 164 | + value={name ? name : ''} |
| 165 | + onChange={handleNameChange} |
| 166 | + placeholder='Enter name' |
| 167 | + /> |
| 168 | + <input |
| 169 | + type='text' |
| 170 | + value={description ? description : ''} |
| 171 | + onChange={handleDesriptionChange} |
| 172 | + placeholder='Enter Description' |
| 173 | + /> |
| 174 | + |
| 175 | + <input |
| 176 | + type='text' |
| 177 | + value={memberName ? memberName : ''} |
| 178 | + onChange={(e:ChangeEvent<HTMLInputElement>)=>{setMemberName(e.target.value)}} |
| 179 | + placeholder='Enter membername' |
| 180 | + /> |
| 181 | + <button onClick={addMembers} disabled={memberName?!users.includes(memberName)&& memberName==data?.message:true}>Add Memeber</button> |
| 182 | + <p>{members}</p> |
| 183 | + <button onClick={SubmitHandler}>Submit</button> |
| 184 | + </div> |
| 185 | + ); |
| 186 | +}; |
| 187 | + |
| 188 | +export default AddWorkspace; |
0 commit comments