devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extracted the user types

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-11-27 11:35:04 +00:00
parent facac33a89
commit 5f76e430af
5 changed files with 55 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/ProfileCard.tsx
View File

@@ -1,31 +0,0 @@
/* eslint-disable @next/next/no-img-element */
import {User} from "@/interfaces/user";
import clsx from "clsx";
import LevelLabel from "./LevelLabel";
import LevelProgressBar from "./LevelProgressBar";
import {Avatar} from "primereact/avatar";
interface Props {
user: User;
className: string;
}
export default function ProfileCard({user, className}: Props) {
return (
<div className={clsx("bg-white drop-shadow-xl p-4 md:p-8 rounded-xl w-full flex flex-col gap-6", className)}>
<div className="flex w-full items-center gap-8">
<div className="w-16 md:w-24 h-16 md:h-24 rounded-full border-2 md:border-4 border-white drop-shadow-md md:drop-shadow-xl">
{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
{user.profilePicture.length === 0 && (
<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
)}
</div>
<div className="flex flex-col justify-center">
<span className="text-neutral-600 font-bold text-xl lg:text-2xl">{user.name}</span>
<LevelLabel experience={user.experience} />
</div>
</div>
<LevelProgressBar experience={user.experience} progressBarWidth="w-32 md:w-96" />
</div>
);
}

31
src/components/ProfileLevel.tsx
View File

@@ -1,31 +0,0 @@
/* eslint-disable @next/next/no-img-element */
import {User} from "@/interfaces/user";
import {levelCalculator} from "@/resources/level";
import clsx from "clsx";
import LevelLabel from "./LevelLabel";
import LevelProgressBar from "./LevelProgressBar";
import {Avatar} from "primereact/avatar";
interface Props {
user: User;
className?: string;
}
export default function ProfileLevel({user, className}: Props) {
const levelResult = levelCalculator(user.experience);
return (
<div className={clsx("flex flex-col items-center justify-center gap-4", className)}>
<div className="w-16 md:w-24 h-16 md:h-24 rounded-full">
{user.profilePicture.length > 0 && <img src={user.profilePicture} alt="Profile picture" className="rounded-full object-cover" />}
{user.profilePicture.length === 0 && (
<Avatar size="xlarge" style={{width: "100%", height: "100%"}} label={user.name.slice(0, 1)} shape="circle" />
)}
</div>
<div className="flex flex-col gap-1 items-center">
<LevelLabel experience={user.experience} />
<LevelProgressBar experience={user.experience} className="text-black" />
</div>
</div>
);
}

13
src/components/UserCard.tsx
View File

@@ -39,15 +39,16 @@ interface Props {
const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}: Props) => { const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}: Props) => {
const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate); const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
const [type, setType] = useState(user.type); const [type, setType] = useState(user.type);
const [status, setStatus] = useState(user.status); const [status, setStatus] = useState(user.status);
const [companyName, setCompanyName] = useState(user.corporateInformation?.companyInformation.name);
const [userAmount, setUserAmount] = useState(user.corporateInformation?.companyInformation.userAmount);
const [referralAgentLabel, setReferralAgentLabel] = useState<string>(); const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
const [paymentValue, setPaymentValue] = useState(user.corporateInformation?.payment?.value);
const [paymentCurrency, setPaymentCurrency] = useState(user.corporateInformation?.payment?.currency); const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
const [monthlyDuration, setMonthlyDuration] = useState(user.corporateInformation?.monthlyDuration); const [companyName, setCompanyName] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.name : undefined);
const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : undefined);
const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
const {stats} = useStats(user.id); const {stats} = useStats(user.id);
const {users} = useUsers(); const {users} = useUsers();

37
src/interfaces/user.ts
View File

@@ -1,11 +1,12 @@
import {Module} from "."; import {Module} from ".";
export interface User { export type User = StudentUser | TeacherUser | CorporateUser | AgentUser | AdminUser | DeveloperUser;
export interface BasicUser {
email: string; email: string;
name: string; name: string;
profilePicture: string; profilePicture: string;
id: string; id: string;
experience: number;
isFirstLogin: boolean; isFirstLogin: boolean;
focus: "academic" | "general"; focus: "academic" | "general";
levels: {[key in Module]: number}; levels: {[key in Module]: number};
@@ -14,12 +15,37 @@ export interface User {
bio: string; bio: string;
isVerified: boolean; isVerified: boolean;
demographicInformation?: DemographicInformation; demographicInformation?: DemographicInformation;
corporateInformation?: CorporateInformation;
subscriptionExpirationDate?: null | Date; subscriptionExpirationDate?: null | Date;
registrationDate?: Date; registrationDate?: Date;
status: "active" | "disabled" | "paymentDue"; status: "active" | "disabled" | "paymentDue";
} }
export interface StudentUser extends BasicUser {
type: "student";
}
export interface TeacherUser extends BasicUser {
type: "teacher";
}
export interface CorporateUser extends BasicUser {
type: "corporate";
corporateInformation: CorporateInformation;
}
export interface AgentUser extends BasicUser {
type: "agent";
agentInformation: AgentInformation;
}
export interface AdminUser extends BasicUser {
type: "admin";
}
export interface DeveloperUser extends BasicUser {
type: "developer";
}
export interface CorporateInformation { export interface CorporateInformation {
companyInformation: CompanyInformation; companyInformation: CompanyInformation;
monthlyDuration: number; monthlyDuration: number;
@@ -30,6 +56,11 @@ export interface CorporateInformation {
referralAgent?: string; referralAgent?: string;
} }
export interface AgentInformation {
companyName: string;
commercialRegistration: string;
}
export interface CompanyInformation { export interface CompanyInformation {
name: string; name: string;
userAmount: number; userAmount: number;

17
src/pages/(status)/PaymentDue.tsx
View File

@@ -94,7 +94,7 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
</div> </div>
</div> </div>
)} )}
{!isIndividual() && user?.corporateInformation && user?.corporateInformation.payment && ( {!isIndividual() && user.type === "corporate" && user?.corporateInformation.payment && (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span className="max-w-lg"> <span className="max-w-lg">
To add to your use of EnCoach and that of your students and teachers, please pay your designated package below: To add to your use of EnCoach and that of your students and teachers, please pay your designated package below:
@@ -138,14 +138,25 @@ export default function PaymentDue({user, hasExpired = false, clientID, reload}:
</div> </div>
</div> </div>
)} )}
{!isIndividual() && (!user?.corporateInformation || !user?.corporateInformation?.payment) && ( {!isIndividual() && user.type !== "corporate" && (
<div className="flex flex-col items-center">
<span className="max-w-lg">
You are not the person in charge of your time credits, please contact your administrator about this situation.
</span>
<span className="max-w-lg">
If you believe this to be a mistake, please contact the platform&apos;s administration, thank you for your
patience.
</span>
</div>
)}
{!isIndividual() && user.type === "corporate" && !user.corporateInformation.payment && (
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
<span className="max-w-lg"> <span className="max-w-lg">
An admin nor your agent have yet set the price intended to your requirements in terms of the amount of users you An admin nor your agent have yet set the price intended to your requirements in terms of the amount of users you
desire and your expected monthly duration. desire and your expected monthly duration.
</span> </span>
<span className="max-w-lg"> <span className="max-w-lg">
Please try again again later or contact your agent or an admin, thank you for your patience. Please try again later or contact your agent or an admin, thank you for your patience.
</span> </span>
</div> </div>
)} )}