Merged in bug-fixing-271223 (pull request #14)

Bug fixing 271223

Approved-by: Tiago Ribeiro

src/hooks/useListSearch.tsx

@@ -0,0 +1,48 @@
+import {useState, useMemo} from 'react';
+import Input from "@/components/Low/Input";
+
+/*fields example = [
+    ['id'],
+    ['companyInformation', 'companyInformation', 'name']
+]*/
+
+
+const getFieldValue = (fields: string[], data: any): string => {
+    if(fields.length === 0) return data;
+    const [key, ...otherFields] = fields;
+
+    if(data[key]) return getFieldValue(otherFields, data[key]);
+    return data;
+}
+
+export const useListSearch = (fields: string[][], rows: any[]) => {
+    const [text, setText] = useState('');
+
+    const renderSearch = () => (
+        <Input
+            label="Search"
+            type="text"
+            name="search"
+            onChange={setText}
+            placeholder="Enter search text"
+            value={text}
+        />
+    )
+
+    const updatedRows = useMemo(() => {
+        const searchText = text.toLowerCase();
+        return rows.filter((row) => {
+            return fields.some((fieldsKeys) => {
+                const value = getFieldValue(fieldsKeys, row);
+                if(typeof value === 'string') {
+                    return value.toLowerCase().includes(searchText);
+                }
+            })
+        })
+    }, [fields, rows, text])
+
+    return {
+        rows: updatedRows,
+        renderSearch,
+    }
+}

src/pages/(admin)/Lists/UserList.tsx

@@ -2,7 +2,7 @@ import Button from "@/components/Low/Button";
 import {PERMISSIONS} from "@/constants/userPermissions";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
-import {Type, User, userTypes} from "@/interfaces/user";
+import {Type, User, userTypes, CorporateUser} from "@/interfaces/user";
 import {Popover, Transition} from "@headlessui/react";
 import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import axios from "axios";
@@ -19,9 +19,15 @@ import UserCard from "@/components/UserCard";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import useFilterStore from "@/stores/listFilterStore";
 import {useRouter} from "next/router";
+import {isCorporateUser} from '@/resources/user';
+import { useListSearch } from "@/hooks/useListSearch";
 
 const columnHelper = createColumnHelper<User>();
-
+const searchFields = [
+	['name'],
+	['email'],
+	['corporateInformation', 'companyInformation', 'name'],
+];
 export default function UserList({user, filters = []}: {user: User; filters?: ((user: User) => boolean)[]}) {
 	const [showDemographicInformation, setShowDemographicInformation] = useState(false);
 	const [sorter, setSorter] = useState<string>();
@@ -325,6 +331,15 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 			) as any,
 			cell: (info) => USER_TYPE_LABELS[info.getValue()],
 		}),
+		columnHelper.accessor('corporateInformation.companyInformation.name', {
+			header: (
+				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "companyName"))}>
+					<span>Company Name</span>
+					<SorterArrow name="companyName" />
+				</button>
+			) as any,
+			cell: (info) => getCorporateName(info.row.original),
+		}),
 		columnHelper.accessor("subscriptionExpirationDate", {
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "expiryDate"))}>
@@ -378,6 +393,14 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 		return undefined;
 	};
 
+	const getCorporateName = (user: User) => {
+		if(isCorporateUser(user)) {
+			return user.corporateInformation?.companyInformation?.name
+		}
+
+		return '';
+	}
+
 	const sortFunction = (a: User, b: User) => {
 		if (sorter === "name" || sorter === reverseString("name"))
 			return sorter === "name" ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
@@ -445,11 +468,28 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 				: b.demographicInformation!.gender.localeCompare(a.demographicInformation!.gender);
 		}
 
+		if(sorter === 'companyName' || sorter === reverseString('companyName')) {
+			const aCorporateName = getCorporateName(a);
+			const bCorporateName = getCorporateName(b);
+			if (!aCorporateName && bCorporateName) return sorter === "companyName" ? -1 : 1;
+			if (aCorporateName && !bCorporateName) return sorter === "companyName" ? 1 : -1;
+			if (!aCorporateName && !bCorporateName) return 0;
+
+			return sorter === "companyName"
+				? aCorporateName.localeCompare(bCorporateName)
+				: bCorporateName.localeCompare(aCorporateName);			
+		}
+
 		return a.id.localeCompare(b.id);
 	};
 
+	const { rows: filteredRows, renderSearch } = useListSearch(
+		searchFields,
+		displayUsers,
+	)
+
 	const table = useReactTable({
-		data: displayUsers,
+		data: filteredRows,
 		columns: (!showDemographicInformation ? defaultColumns : demographicColumns) as any,
 		getCoreRowModel: getCoreRowModel(),
 	});
@@ -532,6 +572,8 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 					)}
 				</>
 			</Modal>
+			<div className="w-full flex flex-col gap-2">
+				{renderSearch()}
 				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
 					<thead>
 						{table.getHeaderGroups().map((headerGroup) => (
@@ -557,5 +599,6 @@ export default function UserList({user, filters = []}: {user: User; filters?: ((
 					</tbody>
 				</table>
 			</div>
+		</div>
 	);
 }

src/pages/payment-record.tsx

@@ -62,28 +62,21 @@ const columnHelper = createColumnHelper<Payment>();
 
 const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () => void; reload: () => void; showComission: boolean}) => {
 	const [corporate, setCorporate] = useState<CorporateUser>();
-	const [price, setPrice] = useState<number>(0);
-	const [currency, setCurrency] = useState<string>("EUR");
-	const [commission, setCommission] = useState<number>(0);
-	const [referralAgent, setReferralAgent] = useState<AgentUser>();
 	const [date, setDate] = useState<Date>(new Date());
 
 	const {users} = useUsers();
 
-	useEffect(() => {
+	const price = corporate?.corporateInformation?.payment?.value || 0;
-		if (!corporate) return setReferralAgent(undefined);
+	const commission = corporate?.corporateInformation?.payment?.commission || 0;
-		if (!corporate.corporateInformation?.referralAgent) return setReferralAgent(undefined);
+	const currency = corporate?.corporateInformation?.payment?.currency || 'EUR';
 
-		const referralAgent = users.find((u) => u.id === corporate.corporateInformation.referralAgent);
+	const referralAgent = useMemo(() => {
-		setReferralAgent(referralAgent as AgentUser | undefined);
+		if(corporate?.corporateInformation?.referralAgent) {
-	}, [corporate, users]);
+			return users.find((u) => u.id === corporate.corporateInformation.referralAgent);
+		}
 
-	useEffect(() => {
+		return undefined;
-		const payment = corporate?.corporateInformation?.payment;
+	}, [corporate?.corporateInformation?.referralAgent, users]);
-
-		setPrice(payment?.value || 0);
-		setCurrency(payment?.currency || "EUR");
-	}, [corporate]);
 
 	const submit = () => {
 		axios
@@ -91,7 +84,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 				corporate: corporate?.id,
 				agent: referralAgent?.id,
 				agentCommission: commission,
-				agentValue: toFixedNumber((commission / 100) * price, 2),
+				agentValue: toFixedNumber((commission! / 100) * price!, 2),
 				currency,
 				value: price,
 				isPaid: false,
@@ -146,16 +139,18 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 					<div className="w-full grid grid-cols-5 gap-2">
 						<Input
 							name="paymentValue"
-							onChange={(e) => setPrice(e ? parseInt(e) : 0)}
+							onChange={() => {}}
 							type="number"
 							value={price}
+							defaultValue={0}
 							className="col-span-3"
+							disabled
 						/>
 						<Select
 							className="px-4 col-span-2 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
 							options={CURRENCIES.map(({label, currency}) => ({value: currency, label}))}
 							defaultValue={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
-							onChange={(value) => setCurrency(value?.value || "EUR")}
+							onChange={() => {}}
 							value={{value: currency || "EUR", label: CURRENCIES.find((c) => c.currency === currency)?.label || "Euro"}}
 							styles={{
 								control: (styles) => ({
@@ -173,6 +168,7 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 									color: state.isFocused ? "black" : styles.color,
 								}),
 							}}
+							isDisabled
 						/>
 					</div>
 				</div>
@@ -180,13 +176,20 @@ const PaymentCreator = ({onClose, reload, showComission = false}: {onClose: () =
 					<div className="flex gap-4 w-full">
 						<div className="flex flex-col w-full gap-3">
 							<label className="font-normal text-base text-mti-gray-dim">Commission *</label>
-							<Input name="commission" onChange={(e) => setCommission(e ? parseInt(e) : 0)} type="number" defaultValue={0} />
+							<Input
+								name="commission"
+								onChange={() => {}}
+								type="number"
+								defaultValue={0}
+								value={commission}
+								disabled
+							/>
 						</div>
 						<div className="flex flex-col w-full gap-3">
 							<label className="font-normal text-base text-mti-gray-dim">Commission Value*</label>
 							<Input
 								name="commissionValue"
-								value={`${(commission / 100) * price} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
+								value={`${(commission! / 100) * price!} ${CURRENCIES.find((c) => c.currency === currency)?.label}`}
 								onChange={() => null}
 								type="text"
 								defaultValue={0}

src/pages/profile.tsx

@@ -50,27 +50,32 @@ export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	};
 }, sessionOptions);
 
-export default function Home() {
+interface Props {
-	const [bio, setBio] = useState("");
+	user: User;
-	const [name, setName] = useState("");
+	mutateUser: Function,
-	const [email, setEmail] = useState("");
+}
+
+function UserProfile({
+	user,
+	mutateUser,
+}: Props) {
+	const [bio, setBio] = useState(user.bio || '');
+	const [name, setName] = useState(user.name || '');
+	const [email, setEmail] = useState(user.email || '');
 	const [password, setPassword] = useState("");
 	const [newPassword, setNewPassword] = useState("");
 	const [isLoading, setIsLoading] = useState(false);
-	const [profilePicture, setProfilePicture] = useState("");
+	const [profilePicture, setProfilePicture] = useState(user.profilePicture);
 
-	const [country, setCountry] = useState<string>();
+	const [country, setCountry] = useState<string>(user.demographicInformation?.country || '');
-	const [phone, setPhone] = useState<string>();
+	const [phone, setPhone] = useState<string>(user.demographicInformation?.phone || '');
-	const [gender, setGender] = useState<Gender>();
+	const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender || undefined);
-	const [employment, setEmployment] = useState<EmploymentStatus>();
+	const [employment, setEmployment] = useState<EmploymentStatus | undefined>(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
-	const [position, setPosition] = useState<string>();
+	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
-	const [companyName, setCompanyName] = useState<string>("");
+	const [companyName, setCompanyName] = useState<string | undefined>(user.type === 'agent' ? user.agentInformation?.companyName : undefined);
-	const [commercialRegistration, setCommercialRegistration] = useState<string>("");
+	const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(user.type === 'agent' ? user.agentInformation?.commercialRegistration : undefined);
 
 	const profilePictureInput = useRef(null);
-
-	const {user, mutateUser} = useUser({redirectTo: "/login"});
-
 	const expirationDateColor = (date: Date) => {
 		const momentDate = moment(date);
 		const today = moment(new Date());
@@ -80,24 +85,6 @@ export default function Home() {
 		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 	};
 
-	useEffect(() => {
-		if (user) {
-			setName(user.name);
-			setEmail(user.email);
-			setBio(user.bio);
-			setProfilePicture(user.profilePicture);
-			setCountry(user.demographicInformation?.country);
-			setPhone(user.demographicInformation?.phone);
-			setGender(user.demographicInformation?.gender);
-			setEmployment(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
-			setPosition(user.type === "corporate" ? user.demographicInformation?.position : undefined);
-			if(user.type === 'agent') {
-				setCompanyName(user.agentInformation?.companyName)
-				setCommercialRegistration(user.agentInformation?.commercialRegistration)
-			}
-		}
-	}, [user]);
-
 	const convertBase64 = (file: File) => {
 		return new Promise((resolve, reject) => {
 			const fileReader = new FileReader();
@@ -160,18 +147,6 @@ export default function Home() {
 	};
 
 	return (
-		<>
-			<Head>
-				<title>Profile | EnCoach</title>
-				<meta
-					name="description"
-					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
-				/>
-				<meta name="viewport" content="width=device-width, initial-scale=1" />
-				<link rel="icon" href="/favicon.ico" />
-			</Head>
-			<ToastContainer />
-			{user && (
 		<Layout user={user}>
 			<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
 				<h1 className="text-4xl font-bold mb-6 md:hidden">Edit Profile</h1>
@@ -416,7 +391,28 @@ export default function Home() {
 				</div>
 			</section>
 		</Layout>
-			)}
-		</>
 	);
 }
+
+
+export default function Home() {
+	const {user, mutateUser } = useUser({redirectTo: "/login"});
+
+	return (
+		<>
+			<Head>
+				<title>Profile | EnCoach</title>
+				<meta
+					name="description"
+					content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+				/>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<link rel="icon" href="/favicon.ico" />
+			</Head>
+			<ToastContainer />
+			{user && <UserProfile user={user} mutateUser={mutateUser} /> }
+		</>
+	);
+				
+
+}

src/resources/user.ts

@@ -1,4 +1,4 @@
-import {Type} from "@/interfaces/user";
+import {Type, User, CorporateUser} from "@/interfaces/user";
 
 export const USER_TYPE_LABELS: {[key in Type]: string} = {
 	student: "Student",
@@ -8,3 +8,7 @@ export const USER_TYPE_LABELS: {[key in Type]: string} = {
 	admin: "Admin",
 	developer: "Developer",
 };
+
+export function isCorporateUser(user: User): user is CorporateUser {
+	return (user as CorporateUser).corporateInformation !== undefined;
+  }