Merge pull request #21 from Andres-Fernandez-Caballero/dev

Dev

src/constants/firebaseFolders.ts

@@ -1,6 +1,7 @@
 export const firebaseFolders = {
 	CLASSES: 'classes',
-	PROGRAMING_LEANGUAJES: 'programingLeanguajes',
+	PROGRAMING_LANGUAGES: 'programingLanguages',
 	STUDENTS: 'students',
 	TICKETS: 'tickets',
+	USERS_DATA: 'usersData',
 };

src/constants/routes.ts

@@ -5,6 +5,7 @@ const root = '/';
 export const PATH_NAME = {
 	ROOT: root,
 	HOME: 'Home',
+	PROFILE: 'Profile',
 	ABOUT: 'About',
 	STUDENT: 'Alumnos',
 	CLASS: 'Clases',
@@ -19,6 +20,8 @@ export const PATH_NAME = {
 export const URL = {
 	ROOT: root,
 	HOME: root,
+
+	PROFILE: root + PATH_NAME.PROFILE,
 	ABOUT: root + PATH_NAME.ABOUT,
 
 	STUDENT: root + PATH_NAME.STUDENT,
@@ -35,9 +38,10 @@ export const URL = {
 
 export const navBarLinks: ILink[] = [
 	{ name: PATH_NAME.HOME, url: URL.HOME },
-	{ name: PATH_NAME.ABOUT, url: URL.ABOUT },
+	{ name: PATH_NAME.PROFILE, url: URL.PROFILE },
 	{ name: PATH_NAME.STUDENT, url: URL.STUDENT },
 	{ name: PATH_NAME.CREATE_STUDENT, url: URL.STUDENT_CREATE },
 	{ name: PATH_NAME.CREATE_CLASS, url: URL.CLASS_CREATE },
 	{ name: PATH_NAME.TICKET, url: URL.TICKET },
+	{ name: PATH_NAME.ABOUT, url: URL.ABOUT },
 ];

src/interfaces/FirebaseEntitys.ts

@@ -5,6 +5,12 @@ export interface IFirebaseEntity {
 	created?: string;
 }
 
+export interface IUserDataFirebaseEntity extends IFirebaseEntity {
+	pricePerHour: number;
+	CBU: string;
+	MpAlias: string;
+}
+
 export interface IClassFirebaseEntity extends IFirebaseEntity, IClass {}
 
 export interface IStudentFirebaseEntity extends IFirebaseEntity, IStudent {}

src/interfaces/firebaseAuth.ts

@@ -1,8 +1,11 @@
+import { IUserDataFirebaseEntity } from '@interfaces/FirebaseEntitys';
+
 export interface IUserCredential {
 	accessToken: string | null;
 	displayName: string | null;
 	email: string | null;
 	phoneNumber: string | null;
 	photoURL: string | null;
 	uid: string;
+	userData: IUserDataFirebaseEntity | null;
 }

src/pages/Login/index.tsx

@@ -1,29 +1,27 @@
 import { Login } from './Login';
 import React from 'react';
-import { login, selectAuth } from '@slyces/auth.slyce';
+import { login } from '@slyces/auth.slyce';
 import { useDtoLogin } from '@pages/Login/dtoLogin.hook';
-import { useAppDispatch, useAppSelector } from '@store/hooks/hook';
+import { useAppDispatch } from '@store/hooks/hook';
+import { toast } from 'react-toastify';
+import { URL } from '@constants/routes';
+import { useNavigate } from 'react-router-dom';
 
 export default function LoginComponent(): React.ReactElement {
 	const { handleChange, dtoLogin, clearDtoLogin } = useDtoLogin();
 	const dispatch = useAppDispatch();
-	const auth = useAppSelector(selectAuth);
+	const navigate = useNavigate();
 	const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
 		e.preventDefault();
-		try {
-			dispatch(login(dtoLogin))
-				.then()
-				.catch(() => {
-					alert(auth.error);
-				})
-				.finally(() => {
-					console.log('finally');
-				});
-		} catch (err) {
-			alert('error al login');
-		} finally {
-			clearDtoLogin();
-		}
+
+		dispatch(login(dtoLogin))
+			.then(() => navigate(URL.ROOT))
+			.catch((err: { message: string }) => {
+				toast.error('ERROR: '.concat(err.message));
+			})
+			.finally(() => {
+				clearDtoLogin();
+			});
 	};
 
 	return <Login onSubmit={handleSubmit} onChange={handleChange} />;

src/pages/Profile/Profile.tsx

@@ -0,0 +1,25 @@
+import { selectAuth } from '@slyces/auth.slyce';
+import { useAppSelector } from '@store/hooks/hook';
+
+export const Profile = () => {
+	const { user } = useAppSelector(selectAuth);
+	return (
+		<div>
+			{user !== null && (
+				<>
+					<h1>Profile</h1>
+
+					<section>
+						<h2>User Data</h2>
+						<p>Username: {user.displayName}</p>
+
+						<section>
+							<h2>Pagos y factuacion</h2>
+							<p>Valor de la clase: {user.userData?.pricePerHour}</p>
+						</section>
+					</section>
+				</>
+			)}
+		</div>
+	);
+};

src/pages/Profile/index.tsx

@@ -0,0 +1,3 @@
+import { Profile } from './Profile';
+
+export default Profile;

src/pages/class/ClassCreate/index.tsx

@@ -11,19 +11,22 @@ import { OnChangeSelectorDatetime } from '@pages/class/ClassCreate/ClassCreate.i
 import { useOpenCloseDialogTicket } from '@pages/class/ClassCreate/DialogTicket/DialogTicket.hooks';
 import DialogTicket from '@pages/class/ClassCreate/DialogTicket';
 import { CLASS_PRICE } from '@constants/price';
-import { useAppDispatch } from '@store/hooks/hook';
+import { useAppDispatch, useAppSelector } from '@store/hooks/hook';
 import { addTicket } from '@slyces/ticket.slice';
 import { URL } from '@constants/routes';
 import { useNavigate } from 'react-router-dom';
 import { sendEmail } from '@/intercept/emailSender.interceptor';
 import ReactDomServer from 'react-dom/server';
 import { TicketDetail } from '@pages/class/ClassCreate/DialogTicket/TicketDetail';
+import { selectAuth } from '@slyces/auth.slyce';
 
 const INIT_DURATION_CLASS = 1;
 const DURATION_CLASS_RANGE = 0.5;
 const MAX_DURATION_CLASS = 5;
 
 const Component: FC = (): ReactElement => {
+	const { user } = useAppSelector(selectAuth);
+
 	const {
 		selectProgramingLanguageById,
 		selectStudentById,
@@ -34,7 +37,10 @@ const Component: FC = (): ReactElement => {
 		updatePrice,
 		price,
 		programingLanguageSelected,
-	} = useClassCreateForm(INIT_DURATION_CLASS, CLASS_PRICE);
+	} = useClassCreateForm(
+		INIT_DURATION_CLASS,
+		user?.userData?.pricePerHour ?? CLASS_PRICE
+	);
 
 	const { openDialogTicket, isOpen, closeDialogTicket } =
 		useOpenCloseDialogTicket();

src/pages/student/StudentCreate/StudentCreate.hook.ts

@@ -14,6 +14,14 @@ export const useDtoStudentCreate = () => {
 	const [studentState, setStudentState] = useState(initState);
 
 	const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const targetName = event.target.name;
+		if (targetName === 'firstName' || targetName === 'lastName') {
+			// capitalize first letter
+			event.target.value =
+				event.target.value.charAt(0).toUpperCase() +
+				event.target.value.slice(1);
+		}
+
 		setStudentState({
 			...studentState,
 			[event.target.name]: event.target.value,

src/pages/student/StudentCreate/index.tsx

@@ -15,30 +15,49 @@ const ComponentStudentCreate = () => {
 
 	const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
 		event.preventDefault();
+		if (studentState.firstName === '')
+			toast.error('Ingrese el nombre del estudiante');
+		if (studentState.lastName === '')
+			toast.error('Ingrese el apellido del estudiante');
+		if (studentState.email === '')
+			toast.error('Ingrese el email del estudiante');
+		if (studentState.phone === '')
+			toast.error('Ingrese el telefono del estudiante');
+		if (studentState.birthDate === '')
+			toast.error('Ingrese la fecha de nacimiento del estudiante');
 
-		const messageToast = toast.loading('Creando estudiante...');
-		dispatch(addStudent(studentState))
-			.then(() => {
-				toast.update(messageToast, {
-					render: 'Estudiante creado',
-					type: 'success',
-					isLoading: false,
-					autoClose: 1500,
+		// if are all fields filled then create student
+		if (
+			studentState.email !== '' &&
+			studentState.firstName !== '' &&
+			studentState.lastName !== '' &&
+			studentState.phone !== '' &&
+			studentState.birthDate !== ''
+		) {
+			const messageToast = toast.loading('Creando estudiante...');
+			dispatch(addStudent(studentState))
+				.then(() => {
+					toast.update(messageToast, {
+						render: 'Estudiante creado',
+						type: 'success',
+						isLoading: false,
+						autoClose: 1500,
+					});
+					navigate(URL.STUDENT);
+				})
+				.catch(error => {
+					toast.update(messageToast, {
+						render: 'No se pudo crear el estudiante',
+						type: 'error',
+						isLoading: false,
+						autoClose: 1500,
+					});
+					console.error(error);
+				})
+				.finally(() => {
+					resetForm();
 				});
-				navigate(URL.STUDENT);
-			})
-			.catch(error => {
-				toast.update(messageToast, {
-					render: 'No se pudo crear el estudiante',
-					type: 'error',
-					isLoading: false,
-					autoClose: 1500,
-				});
-				console.error(error);
-			})
-			.finally(() => {
-				resetForm();
-			});
+		}
 	};
 	return (
 		<FormLayout>

src/routes/MainRouter.tsx

@@ -1,55 +1,12 @@
-import { Navigate, Outlet, Route, Routes } from 'react-router-dom';
-import NavigableLayour from '@components/layers/NavigableLayout';
-import { navBarLinks, PATH_NAME, URL } from '@constants/routes';
-
-import ClassCreate from '@pages/class/ClassCreate';
-import Home from '@pages/Home';
-import StudentCreate from '@pages/student/StudentCreate';
 import { useSelector } from 'react-redux';
 import { selectAuth } from '@/store/slyces/auth.slyce';
-import Login from '@/pages/Login';
-import Tikets from '@/pages/Tikets';
-import StudentList from '@pages/student/StudentList';
+import PrivateRoutes from '@routes/private';
+import PublicRoutes from '@routes/public';
 
 const MainRouter = () => {
 	const auth = useSelector(selectAuth);
-	console.log(auth);
-
-	return (
-		<Routes>
-			<Route
-				path={PATH_NAME.ROOT}
-				element={
-					auth.isAuthenticate ? (
-						<NavigableLayour navBarLinks={navBarLinks} />
-					) : (
-						<Navigate to={URL.LOGIN} />
-					)
-				}
-			>
-				<Route index element={<Home />} />
-				<Route path={PATH_NAME.ABOUT} element={<h1>About</h1>} />
-				<Route path={PATH_NAME.CLASS} element={<ClassCreate />}>
-					<Route path={PATH_NAME.CREATE} element={<ClassCreate />} />
-				</Route>
-
-				<Route path={PATH_NAME.TICKET} element={<Tikets />} />
-				<Route path={PATH_NAME.STUDENT}>
-					<Route path={PATH_NAME.CREATE} element={<StudentCreate />} />
-					<Route index element={<StudentList />} />
-				</Route>
-			</Route>
-
-			<Route
-				path={PATH_NAME.AUTH}
-				element={auth.isAuthenticate ? <Navigate to={URL.HOME} /> : <Outlet />}
-			>
-				<Route path={PATH_NAME.LOGIN} index element={<Login />} />
-			</Route>
 
-			<Route path='*' element={<div>404 NOT FOUND</div>} />
-		</Routes>
-	);
+	return <>{auth.isAuthenticate ? <PrivateRoutes /> : <PublicRoutes />}</>;
 };
 
 export default MainRouter;

src/routes/private/index.tsx

@@ -0,0 +1,34 @@
+import { Route, Routes } from 'react-router-dom';
+import Home from '@pages/Home';
+import { navBarLinks, PATH_NAME } from '@constants/routes';
+import ClassCreate from '@pages/class/ClassCreate';
+import StudentList from '@pages/student/StudentList';
+import Tickets from '@pages/Tikets';
+import StudentCreate from '@pages/student/StudentCreate';
+import NavigableLayour from '@components/layers/NavigableLayout';
+import Profile from '@pages/Profile';
+
+const PrivateRoutes = () => {
+	return (
+		<Routes>
+			<Route
+				path={PATH_NAME.ROOT}
+				element={<NavigableLayour navBarLinks={navBarLinks} />}
+			>
+				<Route index element={<Home />} />
+				<Route path={PATH_NAME.PROFILE} element={<Profile />} />
+				<Route path={PATH_NAME.CLASS} element={<ClassCreate />}>
+					<Route path={PATH_NAME.CREATE} element={<ClassCreate />} />
+				</Route>
+				<Route path={PATH_NAME.STUDENT}>
+					<Route path={PATH_NAME.CREATE} element={<StudentCreate />} />
+					<Route index element={<StudentList />} />
+				</Route>
+				<Route path={PATH_NAME.TICKET} element={<Tickets />} />
+				<Route path='*' element={<div>404 NOT FOUND</div>} />
+			</Route>
+		</Routes>
+	);
+};
+
+export default PrivateRoutes;

src/routes/public/InstitutionalPages.tsx

@@ -0,0 +1,8 @@
+import { PATH_NAME } from '@constants/routes';
+import { Route, Routes } from 'react-router-dom';
+
+export const InstitutionalPages = () => (
+	<Routes>
+		<Route path={PATH_NAME.ABOUT} element={<h1>About</h1>} />
+	</Routes>
+);

src/routes/public/index.tsx

@@ -0,0 +1,12 @@
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { PATH_NAME } from '@constants/routes';
+import Login from '@/pages/Login';
+
+const PublicRoutes = () => (
+	<Routes>
+		<Route path={PATH_NAME.LOGIN} index element={<Login />} />
+		<Route path={'/*'} element={<Navigate to={PATH_NAME.LOGIN} />} />
+	</Routes>
+);
+
+export default PublicRoutes;