From 7a30e68099faef77a667ac9c48d3d17ba0ef7a74 Mon Sep 17 00:00:00 2001
From: MARGO06 <118379169+MARGO06@users.noreply.github.com>
Date: Fri, 7 Jun 2024 17:36:11 +0300
Subject: [PATCH 01/44] implement the about us link in the header (#92)
---
src/components/header/Header.module.scss | 20 ++++++++------------
src/components/header/Header.tsx | 8 +++++++-
src/logic/aboutPage/AboutPage.tsx | 5 +++++
3 files changed, 20 insertions(+), 13 deletions(-)
create mode 100644 src/logic/aboutPage/AboutPage.tsx
diff --git a/src/components/header/Header.module.scss b/src/components/header/Header.module.scss
index b1cff48..969dec1 100644
--- a/src/components/header/Header.module.scss
+++ b/src/components/header/Header.module.scss
@@ -25,37 +25,33 @@
margin: 0 auto;
justify-content: space-between;
- @include media-600 {
+ @include media-800 {
flex-direction: column;
}
}
.navigation {
- width: 27%;
+ width: 35%;
align-items: end;
@include media-1200 {
- width: 32%;
+ width: 42%;
}
@include media-1000 {
- width: 40%;
+ width: 52%;
}
@include media-800 {
- width: 55%;
+ width: 69%;
}
@include media-600 {
- width: 63%;
+ width: 83%;
}
@include media-500 {
- width: 80%;
- }
-
- @include media-400 {
- width: 90%;
+ width: 100%;
}
}
@@ -86,7 +82,7 @@
cursor: auto;
color: $secondaryTextColor;
}
- @include media-600 {
+ @include media-800 {
margin-left: 5px;
}
}
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
index 94b9a35..8ffd087 100644
--- a/src/components/header/Header.tsx
+++ b/src/components/header/Header.tsx
@@ -55,7 +55,8 @@ export const Header: React.FC = () => {
location !== '/login' &&
location !== '/register' &&
location !== '/catalog' &&
- location !== '/profile';
+ location !== '/profile' &&
+ location !== '/about_us';
const isHeaderInactive = location === '/';
const isToken = localStorage.getItem('userTokens');
return (
@@ -72,6 +73,11 @@ export const Header: React.FC = () => {
title="CATALOG"
className={`${styles.link} ${activeLink === '/catalog' ? styles.active : ''}`}
/>
+
{!isLoggedIn ? (
{links.map((link) => (
diff --git a/src/logic/aboutPage/AboutPage.tsx b/src/logic/aboutPage/AboutPage.tsx
new file mode 100644
index 0000000..5b0681b
--- /dev/null
+++ b/src/logic/aboutPage/AboutPage.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const About: React.FC = () => {
+ return
About us
;
+};
From b65a2667e004c5aaf1d81a6dab16403182799ae5 Mon Sep 17 00:00:00 2001
From: MARGO06 <118379169+MARGO06@users.noreply.github.com>
Date: Fri, 7 Jun 2024 17:42:08 +0300
Subject: [PATCH 02/44] DT-226_22-ImplementRoutingAboutPage (#93)
* implement routing for about page
* rename about to aboutPage
---
src/components/router/Router.tsx | 2 ++
src/logic/aboutPage/AboutPage.tsx | 2 +-
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/components/router/Router.tsx b/src/components/router/Router.tsx
index 2b39801..8d4d5c3 100644
--- a/src/components/router/Router.tsx
+++ b/src/components/router/Router.tsx
@@ -6,6 +6,7 @@ import { Catalog } from 'src/logic/catalogPage/CatalogPage.tsx';
import { UserProfilePage } from 'src/logic/userProfilePage/UserProfilePage.tsx';
import { Product } from 'src/logic/productPage/Product.tsx';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { AboutPage } from 'src/logic/aboutPage/AboutPage.tsx';
import { Header } from 'src/components/header/Header.tsx';
export const Router = () => {
@@ -18,6 +19,7 @@ export const Router = () => {
} />
} />
} />
+
} />
} />
} />
diff --git a/src/logic/aboutPage/AboutPage.tsx b/src/logic/aboutPage/AboutPage.tsx
index 5b0681b..a8e74dc 100644
--- a/src/logic/aboutPage/AboutPage.tsx
+++ b/src/logic/aboutPage/AboutPage.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-export const About: React.FC = () => {
+export const AboutPage: React.FC = () => {
return
About us
;
};
From 70726de75baf378886054ac70a538b6db410ceb8 Mon Sep 17 00:00:00 2001
From: Maria <99416741+maria-akulova@users.noreply.github.com>
Date: Sun, 9 Jun 2024 12:54:49 +0200
Subject: [PATCH 03/44] DT-229_DynamicallyLoadedRarelyUsedPages (#95)
* DT-229 add dynamic import for rarally used Pages
* DT-229 added dynamic import and lasy loading for rarelly used pages
---
.../form/aboutUS/AboutUSForm.module.scss | 0
src/components/form/aboutUS/AboutUSForm.tsx | 3 ++
src/components/router/Router.tsx | 36 +++++++++++--------
src/logic/aboutPage/AboutPage.tsx | 11 ++++--
.../registrationPage/registrationPage.tsx | 11 ++++--
src/logic/userProfilePage/UserProfilePage.tsx | 11 ++++--
6 files changed, 51 insertions(+), 21 deletions(-)
create mode 100644 src/components/form/aboutUS/AboutUSForm.module.scss
create mode 100644 src/components/form/aboutUS/AboutUSForm.tsx
diff --git a/src/components/form/aboutUS/AboutUSForm.module.scss b/src/components/form/aboutUS/AboutUSForm.module.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/form/aboutUS/AboutUSForm.tsx b/src/components/form/aboutUS/AboutUSForm.tsx
new file mode 100644
index 0000000..7d49d1f
--- /dev/null
+++ b/src/components/form/aboutUS/AboutUSForm.tsx
@@ -0,0 +1,3 @@
+export const AboutUS: React.FC = () => {
+ return
About US
;
+};
diff --git a/src/components/router/Router.tsx b/src/components/router/Router.tsx
index 8d4d5c3..6fc16ea 100644
--- a/src/components/router/Router.tsx
+++ b/src/components/router/Router.tsx
@@ -1,28 +1,34 @@
-import { RegistrationPage } from 'src/logic/registrationPage/registrationPage.tsx';
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Main } from 'src/logic/mainPage/MainPage.tsx';
import { Login } from 'src/logic/loginPage/LoginPage.tsx';
import { Error } from 'src/logic/errorPage/ErrorPage.tsx';
import { Catalog } from 'src/logic/catalogPage/CatalogPage.tsx';
-import { UserProfilePage } from 'src/logic/userProfilePage/UserProfilePage.tsx';
import { Product } from 'src/logic/productPage/Product.tsx';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { AboutPage } from 'src/logic/aboutPage/AboutPage.tsx';
import { Header } from 'src/components/header/Header.tsx';
-export const Router = () => {
+export const Router: React.FC = () => {
+ const RegistrationPage = React.lazy(
+ () => import('src/logic/registrationPage/registrationPage.tsx'),
+ );
+ const AboutPage = React.lazy(() => import('src/logic/aboutPage/AboutPage.tsx'));
+ const UserProfilePage = React.lazy(() => import('src/logic/userProfilePage/UserProfilePage.tsx'));
+
return (
-
- } />
- } />
- } />
- } />
- } />
- } />
- } />
- } />
-
+ Loading... }>
+