Merge pull request #14 from ViniR07/develop

Add Static Generation on HOC

README.md

@@ -16,6 +16,7 @@
 
 - [Typescript](https://www.typescriptlang.org)
 - [NextJs](https://nextjs.org)
+- [Recoil](https://recoiljs.org)
 
 ## Features :hammer:
 

src/components/ManageProfileContainer/ProfileImages/index.tsx

@@ -1,7 +1,8 @@
 import * as S from './styles';
 import React from 'react';
 import { convertImage } from '@utils';
-import { IImageData, ISession } from '@types';
+import { IImageData, IProfile } from '@types';
+import { useSession } from '@hooks';
 
 const ProfileImages: React.FC<{
 	setImageData: React.Dispatch<
@@ -10,21 +11,21 @@ const ProfileImages: React.FC<{
 			data: string;
 		}>
 	>;
-	session: ISession;
 	images: IImageData[];
-}> = ({ setImageData, session, images }) => {
-	const filteredImages = (imgs: IImageData[]) => {
+}> = ({ setImageData, images }) => {
+	const filteredImages = (imgs: IImageData[], profiles: IProfile[]) => {
 		return imgs.filter(img => {
-			const exists = session?.profiles.find(prof => {
+			const exists = profiles.find(prof => {
 				return prof.image._id === img._id;
 			});
 			return exists ? false : true;
 		});
 	};
 
+	const { session } = useSession();
 	return (
 		<S.ImageContainer>
-			{filteredImages(images).map(image => (
+			{filteredImages(images, session.profiles).map(image => (
 				<div
 					key={image._id}
 					id={image._id}

src/components/ManageProfileContainer/index.tsx

@@ -16,19 +16,19 @@ import { CustomButton, CustomTextField } from 'src/styles/GlobalComponents';
 import { toSlug } from '@utils';
 import { useRouter } from 'next/router';
 import Link from 'next/link';
-import { useAlert } from '@hooks';
+import { useAlert, useSession } from '@hooks';
 import ProfileImages from './ProfileImages';
 
 const ManageProfileContainer: React.FC<{
 	editProfile: string;
-	session: ISession;
 	images: IImageData[];
-}> = ({ editProfile, session, images }) => {
+}> = ({ editProfile, images }) => {
 	const [preferences, setPreferences] = useState<string[]>([]);
 	const [profileName, setProfileName] = useState('');
 	const [imageData, setImageData] = useState({ id: '', data: '' });
 	const [loading, setLoading] = useState(false);
 
+	const { session } = useSession();
 	const alertActions = useAlert();
 	const router = useRouter();
 
@@ -126,11 +126,7 @@ const ManageProfileContainer: React.FC<{
 						<div className="profile__edit-session">
 							<div>
 								<h3>Escolha sua imagem</h3>
-								<ProfileImages
-									setImageData={setImageData}
-									session={session}
-									images={images}
-								/>
+								<ProfileImages setImageData={setImageData} images={images} />
 							</div>
 							<div className="inputs-wrapper">
 								<CustomTextField

src/components/Register/index.tsx

@@ -1,5 +1,7 @@
 import { MuiCustomInputProps, regExp } from '@constants';
+import { useAlert } from '@hooks';
 import { userService } from '@services';
+import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React, {
@@ -24,7 +26,9 @@ const Register: React.FC = () => {
 	const [confirmPassword, setConfirmPassword] = useState('');
 	const [email, setEmail] = useState('');
 	const [name, setName] = useState('');
+	const [loading, setLoading] = useState(false);
 	const router = useRouter();
+	const alertActions = useAlert();
 
 	const fieldValidation = (type: string, value: string) => {
 		const typeName = type === 'text' ? 'name' : type;
@@ -38,15 +42,21 @@ const Register: React.FC = () => {
 
 	const handleSubmit: FormEventHandler = e => {
 		e.preventDefault();
+		setLoading(true);
 		userService.registerUser(email, name, password).then(res => {
+			console.log(res);
 			if (res.status === 201) {
 				setConfirmPassword('');
 				setEmail('');
 				setName('');
 				setPassword('');
 
+				alertActions.success('Conta criada com sucesso!');
 				router.push('/email-confirmation');
+			} else {
+				alertActions.error(res.body.error);
 			}
+			setLoading(false);
 		});
 	};
 
@@ -200,7 +210,15 @@ const Register: React.FC = () => {
 					width="100%"
 					data-testid="Entrar"
 				>
-					Cadastrar
+					{loading && (
+						<Image
+							width="30px"
+							height="30px"
+							src="/loading-white.svg"
+							alt="Animação de carregamento"
+						/>
+					)}
+					{!loading && 'Cadastrar'}
 				</S.CustomButton>
 
 				<Link href="/login" passHref>

src/components/SelectProfile/index.tsx

@@ -10,6 +10,7 @@ import * as S from './styles';
 
 const SelectProfile: React.FC<{ session: ISession }> = ({ session }) => {
 	const [profileHovered, setProfileHovered] = useState('');
+	const [profiles, setProfiles] = useState(session.profiles);
 	const { width } = useWindowDimensions();
 	const { setProfile } = useProfile();
 	const alertActions = useAlert();
@@ -23,7 +24,8 @@ const SelectProfile: React.FC<{ session: ISession }> = ({ session }) => {
 				if (res.ok) {
 					alertActions.success('Perfil deletado com sucesso');
 				}
-				router.push('/select-profile');
+				const currentProfiles = profiles.filter(p => p.slug !== prof.slug);
+				setProfiles(currentProfiles);
 			})
 			.catch(() => {
 				alertActions.error('Erro ao deletar o perfil');
@@ -39,7 +41,7 @@ const SelectProfile: React.FC<{ session: ISession }> = ({ session }) => {
 		<S.ProfileWrapper>
 			<h1>Quem está assistindo?</h1>
 			<div data-testid="profile-container">
-				{session.profiles?.length < 4 && (
+				{profiles.length < 4 && (
 					<div className="create-profile__container">
 						<div
 							onClick={() => {
@@ -59,8 +61,8 @@ const SelectProfile: React.FC<{ session: ISession }> = ({ session }) => {
 					</div>
 				)}
 
-				{session.profiles.length > 0 &&
-					session.profiles.map((prof, index) => (
+				{profiles.length > 0 &&
+					profiles.map((prof, index) => (
 						<div
 							className="profile-image__box"
 							title="Entre com o perfil"

src/components/SelectProfile/styles.ts

@@ -104,6 +104,7 @@ export const ProfileWrapper = styled.div`
 			}
 			& > .profile-image__box {
 				margin: 12px 0;
+				border-color: var(--white);
 
 				h2 {
 					color: var(--white);

src/pages/manage-profile.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { IImageData, ISession } from '@types';
 import { useRouter } from 'next/router';
-import { withSession } from '../services/auth/session';
+import { withSessionHOC } from '../services/auth/session';
 import { HttpClient } from '../infra/HttpClient/HttpClient';
 
 import ManageProfileContainer from '../components/ManageProfileContainer';
@@ -13,7 +13,6 @@ interface CreateManageProfilesProps {
 }
 
 const ManageProfilesPage: React.FC<CreateManageProfilesProps> = ({
-	session,
 	images,
 }) => {
 	const [editProfile, setEditProfile] = useState('');
@@ -30,26 +29,20 @@ const ManageProfilesPage: React.FC<CreateManageProfilesProps> = ({
 
 	return (
 		<Layout title="Netflix - Manage Profile">
-			<ManageProfileContainer
-				session={session}
-				images={images}
-				editProfile={editProfile}
-			/>
+			<ManageProfileContainer images={images} editProfile={editProfile} />
 		</Layout>
 	);
 };
 
-export const getServerSideProps = withSession(async ctx => {
+export async function getStaticProps() {
 	const res = await HttpClient(`${process.env.NEXT_PUBLIC_BACKEND_URL}/image`, {
 		method: 'GET',
 	});
-
 	return {
 		props: {
 			images: res.body,
-			session: ctx.req.session,
 		},
 	};
-});
+}
 
-export default ManageProfilesPage;
+export default withSessionHOC(ManageProfilesPage);

src/pages/select-profile.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { withSession } from '../services/auth/session';
+import { withSessionHOC } from '../services/auth/session';
 import { ISession } from '@types';
 import FirstHeader from '../components/FirstHeader';
 import Layout from 'src/components/Layout';
@@ -16,12 +16,4 @@ const SelectProfilePage: React.FC<{
 	);
 };
 
-export const getServerSideProps = withSession(async ctx => {
-	return {
-		props: {
-			session: ctx.req.session,
-		},
-	};
-});
-
-export default SelectProfilePage;
+export default withSessionHOC(SelectProfilePage);

src/services/auth/session.tsx

@@ -1,4 +1,8 @@
+import { useRouter } from 'next/router';
+import React from 'react';
+import Loading from 'src/components/Loading';
 import { authService } from './authService';
+import { useSession } from '@hooks';
 
 export function withSession(funcao: (ctx) => any) {
 	return async ctx => {
@@ -16,9 +20,56 @@ export function withSession(funcao: (ctx) => any) {
 			return {
 				redirect: {
 					permanent: false,
-					destination: '/login/',
+					destination: '/login',
 				},
 			};
 		}
 	};
 }
+
+// Static pages
+export function useStaticSession() {
+	const { session, setSession } = useSession();
+	const [loading, setLoading] = React.useState(true);
+	const [error, setError] = React.useState(null);
+
+	React.useEffect(() => {
+		authService
+			.getSession()
+			.then(session => {
+				setSession(session);
+			})
+			.catch(err => setError(err))
+			.finally(() => {
+				setLoading(false);
+			});
+	}, []);
+
+	return {
+		data: {
+			session,
+		},
+		error,
+		loading,
+	};
+}
+
+// Componente de Ordem Superior Static-pages
+export function withSessionHOC(Component: React.ComponentType) {
+	return function Wrapper(props) {
+		const router = useRouter();
+		const session = useStaticSession();
+
+		if (session.loading) return <Loading />;
+
+		if (!session.loading && session.error) {
+			router.push('/login');
+		}
+
+		const modifiedProps = {
+			...props,
+			session: session.data.session,
+		};
+		return <Component {...modifiedProps} />;
+	};
+}

src/state/atoms/user.ts

@@ -1,4 +1,4 @@
-import { IProfile } from '@types';
+import { IImageData, IProfile, ISession } from '@types';
 import { atom } from 'recoil';
 
 const localStorage = typeof window !== 'undefined' ? window.localStorage : null;
@@ -24,3 +24,13 @@ export const profileAtom = atom<IProfile>({
 	default: localStorage ? JSON.parse(localStorage.getItem('usuario')) : {},
 	effects: [localStorageEffect('usuario')],
 });
+
+export const sessionAtom = atom<ISession>({
+	key: 'sessionAtom',
+	default: {} as ISession,
+});
+
+export const imagesAtom = atom<IImageData[]>({
+	key: 'imagesAtom',
+	default: [{}] as IImageData[],
+});

src/state/hooks/index.ts

@@ -3,3 +3,4 @@ export * from './useHeroData';
 export * from './useHomeMovieList';
 export * from './useProfile';
 export * from './useWindowDimensions';
+export * from './useSession';

src/state/hooks/useSession.ts

@@ -0,0 +1,9 @@
+import { ISession } from '@types';
+import { useRecoilState } from 'recoil';
+import { sessionAtom } from '../atoms';
+
+export const useSession = () => {
+	const [session, setSession] = useRecoilState<ISession>(sessionAtom);
+
+	return { session, setSession };
+};