ui fixes, redirect loading

package.json

@@ -25,6 +25,7 @@
     "lodash": "^4.17.21",
     "next": "13.2.3",
     "next-redux-wrapper": "^8.1.0",
+    "nextjs-progressbar": "^0.0.16",
     "react": "18.2.0",
     "react-content-loader": "^6.2.1",
     "react-dom": "18.2.0",

src/components/layout/Layout.tsx

@@ -4,6 +4,9 @@ import Header from './header/Header';
 import DrawCategory from '../ui/drawer/DrawCategory';
 import { CategoryService } from '@/services/Server/ServerCategory';
 import styled from 'styled-components';
+import { Spin } from 'antd';
+
+import NextProgress from 'nextjs-progressbar';
 
 interface ILayout {
 	children?: React.ReactNode;
@@ -17,11 +20,17 @@ const Section = styled.section`
 	display: flex;
 `;
 
-// TODO: change categories variable to object like {data, changeData, loading, error} or set 'em to redux storage
+const LoaderWrapper = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100vw;
+	height: 100vh;
+`;
 
 const Layout: React.FC<ILayout> = ({ children }) => {
 	const [categories, setCategories] = useState<any>(null);
-	const [loading, setLoading] = useState(false);
+	const [loading, setLoading] = useState(true);
 
 	useEffect(() => {
 		setLoading(true);
@@ -30,16 +39,31 @@ const Layout: React.FC<ILayout> = ({ children }) => {
 			if (response) {
 				setCategories(response);
 			} else setCategories([]);
-			setLoading(false);
 		})();
 	}, []);
 
-	if (loading) return <div>Loading...</div>;
+	useEffect(() => {
+		if (categories) setLoading(false);
+	}, [categories]);
 
-	// TODO: create recurcive function for fetching data
+	if (loading)
+		return (
+			<LoaderWrapper>
+				<Spin size="large" />
+			</LoaderWrapper>
+		);
 
 	return (
 		<Main>
+			<NextProgress
+				color="#a29fff"
+				startPosition={0.3}
+				stopDelayMs={200}
+				height={3}
+				options={{
+					showSpinner: false,
+				}}
+			/>
 			<Header />
 			<DrawCategory categories={categories} />
 			<Section>{children}</Section>

src/components/layout/auth/AuthModal.tsx

@@ -13,7 +13,7 @@ const AuthModal: React.FC<IAuthModal> = ({ shouldShow, setShouldShow }) => {
 
 	return (
 		<Modal
-			title="Authorization"
+			title="Авторизація"
 			centered
 			open={shouldShow}
 			onCancel={() => setShouldShow(false)}
@@ -22,13 +22,13 @@ const AuthModal: React.FC<IAuthModal> = ({ shouldShow, setShouldShow }) => {
 			{authType === 'login' ? (
 				<LoginForm>
 					<Button type="link" onClick={() => setAuthType('register')}>
-						Register instead
+						Зареєструватись
 					</Button>
 				</LoginForm>
 			) : (
 				<RegisterForm>
 					<Button type="link" onClick={() => setAuthType('login')}>
-						Login instead
+						Увійти
 					</Button>
 				</RegisterForm>
 			)}

src/components/layout/auth/LoginForm.tsx

@@ -47,9 +47,7 @@ const LoginForm: React.FC<ILoginForm> = ({ children }) => {
 			setStatus('');
 		}, 3000);
 
-		return (
-			<Result icon={<SmileOutlined />} title="Great, we successfuly logged!" />
-		);
+		return <Result icon={<SmileOutlined />} title="Авторизовано!" />;
 	}
 
 	if (status === 'error') {
@@ -60,31 +58,31 @@ const LoginForm: React.FC<ILoginForm> = ({ children }) => {
 		return (
 			<Result
 				status="error"
-				title="Submission Failed"
-				subTitle="Something goes wrong."
+				title="Помилка авторизації"
+				subTitle="Щось пішло не так."
 			/>
 		);
 	}
 
 	return (
 		<Form style={{ display: 'grid', gap: '10px' }}>
 			<Input
-				placeholder="email"
+				placeholder="Email"
 				type="email"
 				value={email}
 				onChange={(e) => setEmail(e.target.value)}
 			/>
 
 			<Input
-				placeholder="password"
+				placeholder="Password"
 				type="password"
 				value={password}
 				onChange={(e) => setPassword(e.target.value)}
 			/>
 
 			<Controls>
 				{children}
-				<Button onClick={signin()}>Login</Button>
+				<Button onClick={signin()}>Вхід</Button>
 			</Controls>
 		</Form>
 	);

src/components/layout/auth/RegisterForm.tsx

@@ -81,12 +81,7 @@ const RegisterForm: React.FC<IRegisterForm> = ({ children }) => {
 			setStatus('');
 		}, 3000);
 
-		return (
-			<Result
-				icon={<SmileOutlined />}
-				title="Great, we successfuly register!"
-			/>
-		);
+		return <Result icon={<SmileOutlined />} title="Вас зареєстровано!" />;
 	}
 
 	if (status === 'error') {
@@ -97,8 +92,8 @@ const RegisterForm: React.FC<IRegisterForm> = ({ children }) => {
 		return (
 			<Result
 				status="error"
-				title="Submission Failed"
-				subTitle="Something goes wrong."
+				title="Помилка реєстрації"
+				subTitle="Щось пішло не так."
 			/>
 		);
 	}
@@ -107,13 +102,13 @@ const RegisterForm: React.FC<IRegisterForm> = ({ children }) => {
 		<Form style={{ display: 'grid', gap: '10px' }}>
 			<Input
 				required
-				placeholder="firstname"
+				placeholder="Ім'я"
 				value={data.firstname}
 				onChange={(e) => setData({ ...data, firstname: e.target.value })}
 			/>
 			<Input
 				required
-				placeholder="lastname"
+				placeholder="Прізвище"
 				value={data.lastname}
 				onChange={(e) => setData({ ...data, lastname: e.target.value })}
 			/>
@@ -122,21 +117,21 @@ const RegisterForm: React.FC<IRegisterForm> = ({ children }) => {
 
 			<Input
 				required
-				placeholder="phone number"
+				placeholder="Номер телефону"
 				type="phonenumber"
 				value={data.phone}
 				onChange={(e) => setData({ ...data, phone: e.target.value })}
 			/>
 			<Input
 				required
-				placeholder="email"
+				placeholder="Email"
 				type="email"
 				value={data.email}
 				onChange={(e) => setData({ ...data, email: e.target.value })}
 			/>
 
 			<DatePicker
-				placeholder="birthdate"
+				placeholder="Дата народження"
 				onChange={(_, dateString: string) => {
 					setData({ ...data, birthdate: new Date(dateString) });
 				}}
@@ -146,28 +141,28 @@ const RegisterForm: React.FC<IRegisterForm> = ({ children }) => {
 
 			<Input
 				required
-				placeholder="password"
+				placeholder="Password"
 				type="password"
 				value={data.password}
 				onChange={(e) => setData({ ...data, password: e.target.value })}
 			/>
 			<Input
 				required
 				type="password"
-				placeholder="repeat password"
+				placeholder="Repeat password"
 				value={data.repeatPassword}
 				onChange={(e) => setData({ ...data, repeatPassword: e.target.value })}
 			/>
 
 			{!validePassword && data.password ? (
-				<ValidP>Passwords do not match</ValidP>
+				<ValidP>Паролі не співпадають</ValidP>
 			) : (
 				<></>
 			)}
 
 			<Controls>
 				{children}
-				<Button onClick={signup()}>Register</Button>
+				<Button onClick={signup()}>Зареєструватись</Button>
 			</Controls>
 		</Form>
 	);

src/components/screen/category/Category.tsx

@@ -77,7 +77,7 @@ const sortVariables = [
 const Category: React.FC<ICategory> = ({ data, categoryId }) => {
 	const [categoryResults, setCategoryResults] = useState(data);
 	const [loading, setLoading] = useState(false);
-	const [refinements, setRefinements] = useState({});
+	const [refinements, setRefinements] = useState<any>(null);
 	const filter = useTypedSelector((state) => state.product.filter);
 
 	useEffect(() => {

src/components/screen/user/Favourites.tsx

@@ -58,14 +58,11 @@ const Favourites: React.FC<IFavourites> = ({ user }) => {
 				<HeartOutlined /> Список бажань
 			</Title>
 			<FavouritesWrapper>
-				{loading ? (
-					user.favourites?.map((fav) => <CardLoader key={fav} />)
-				) : (
-					<></>
-				)}
-				{products.map((product) => (
-					<Card key={product._id} product={product} />
-				))}
+				{loading
+					? user.favourites?.map((fav) => <CardLoader key={fav} />)
+					: products.map((product) => (
+							<Card key={product?._id} product={product} />
+					  ))}
 			</FavouritesWrapper>
 		</>
 	);

src/components/screen/user/Orders.tsx

@@ -164,7 +164,7 @@ const Orders: React.FC<IOrders> = ({ user }) => {
 									key={product.id}
 									alt="ordered-product"
 									src={`https://diploma-server.vercel.app/${
-										products.find((item) => item._id === product?.id)?.picture
+										products.find((item) => item?._id === product?.id)?.picture
 									}`}
 								/>
 							))}