From 3c9af29efc9dce844b391c0a7880057553536741 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Tue, 16 Aug 2022 15:49:51 +0300 Subject: [PATCH 1/2] fix: profile menu alignment, lazy load comments section, remove log from trimFunc --- src/Components/Navbar/NavDesktop.tsx | 2 ++ src/Components/Navbar/NavMobile.tsx | 2 ++ src/Components/Navbar/Navbar.tsx | 1 + src/features/Posts/Components/Comments/index.tsx | 2 +- .../QuestionPageContent/QuestionPageContent.tsx | 3 ++- .../Posts/pages/PostDetailsPage/PostDetailsPage.tsx | 13 +++++++++---- src/utils/helperFunctions.tsx | 2 -- 7 files changed, 17 insertions(+), 8 deletions(-) diff --git a/src/Components/Navbar/NavDesktop.tsx b/src/Components/Navbar/NavDesktop.tsx index 2b2d625..5bbc318 100644 --- a/src/Components/Navbar/NavDesktop.tsx +++ b/src/Components/Navbar/NavDesktop.tsx @@ -166,6 +166,8 @@ export default function NavDesktop() { {curUser !== undefined && (curUser ? }> }> import("src/features/Posts/Components/Comments")) interface Props { question: Question diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx index 06c9417..a8875ee 100644 --- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx +++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx @@ -4,15 +4,17 @@ import { useParams } from 'react-router-dom' import NotFoundPage from 'src/features/Shared/pages/NotFoundPage/NotFoundPage' import { Post_Type, usePostDetailsQuery } from 'src/graphql' import { capitalize } from 'src/utils/helperFunctions' -import { CommentsSection } from '../../Components/Comments' import ScrollToTop from 'src/utils/routing/scrollToTop' -import TrendingCard from '../../Components/TrendingCard/TrendingCard' +import TrendingCard from 'src/features/Posts/Components/TrendingCard/TrendingCard' import AuthorCard from './Components/AuthorCard/AuthorCard' import PageContent from './Components/PageContent/PageContent' import PostActions from './Components/PostActions/PostActions' import PostDetailsPageSkeleton from './PostDetailsPage.skeleton' import styles from './styles.module.scss' +import { lazy, Suspense } from 'react' +import { RotatingLines } from 'react-loader-spinner' +const CommentsSection = lazy(() => import("src/features/Posts/Components/Comments")) export default function PostDetailsPage() { const { type: _type, id } = useParams(); @@ -60,8 +62,11 @@ export default function PostDetailsPage() {
- - +
+ }> + +
diff --git a/src/utils/helperFunctions.tsx b/src/utils/helperFunctions.tsx index 1703ba0..f842ac8 100644 --- a/src/utils/helperFunctions.tsx +++ b/src/utils/helperFunctions.tsx @@ -62,8 +62,6 @@ export function lazyModal> } export function trimText(text: string | undefined | null, length: number) { - console.log(text); - if (!text) return ''; return text.slice(0, length) + (text.length > length ? "..." : "") } From 5bcd0892b710f2dfde097e95438f29f2297c9778 Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Tue, 16 Aug 2022 17:07:18 +0300 Subject: [PATCH 2/2] update: added chunkNames to lazyloaded chunks --- src/App.tsx | 24 +++++++++---------- .../pages/PostDetailsPage/PostDetailsPage.tsx | 2 +- src/index.tsx | 2 +- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f94279c..74b7d24 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,21 +15,21 @@ import { Loadable, PAGES_ROUTES } from "./utils/routing"; // Pages -const FeedPage = Loadable(React.lazy(() => import("./features/Posts/pages/FeedPage/FeedPage"))) -const PostDetailsPage = Loadable(React.lazy(() => import("./features/Posts/pages/PostDetailsPage/PostDetailsPage"))) -const CreatePostPage = Loadable(React.lazy(() => import("./features/Posts/pages/CreatePostPage/CreatePostPage"))) +const FeedPage = Loadable(React.lazy(() => import( /* webpackChunkName: "feed_page" */ "./features/Posts/pages/FeedPage/FeedPage"))) +const PostDetailsPage = Loadable(React.lazy(() => import( /* webpackChunkName: "post_details_page" */ "./features/Posts/pages/PostDetailsPage/PostDetailsPage"))) +const CreatePostPage = Loadable(React.lazy(() => import( /* webpackChunkName: "create_post_page" */ "./features/Posts/pages/CreatePostPage/CreatePostPage"))) -const HottestPage = Loadable(React.lazy(() => import("src/features/Projects/pages/HottestPage/HottestPage"))) -const CategoryPage = Loadable(React.lazy(() => import("src/features/Projects/pages/CategoryPage/CategoryPage"))) -const ExplorePage = Loadable(React.lazy(() => import("src/features/Projects/pages/ExplorePage"))) +const HottestPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hottest_page" */ "src/features/Projects/pages/HottestPage/HottestPage"))) +const CategoryPage = Loadable(React.lazy(() => import( /* webpackChunkName: "category_page" */ "src/features/Projects/pages/CategoryPage/CategoryPage"))) +const ExplorePage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ExplorePage"))) -const HackathonsPage = Loadable(React.lazy(() => import("./features/Hackathons/pages/HackathonsPage/HackathonsPage"))) +const HackathonsPage = Loadable(React.lazy(() => import( /* webpackChunkName: "hackathons_page" */ "./features/Hackathons/pages/HackathonsPage/HackathonsPage"))) -const DonatePage = Loadable(React.lazy(() => import("./features/Donations/pages/DonatePage/DonatePage"))) -const LoginPage = Loadable(React.lazy(() => import("./features/Auth/pages/LoginPage/LoginPage"))) -const LogoutPage = Loadable(React.lazy(() => import("./features/Auth/pages/LogoutPage/LogoutPage"))) -const ProfilePage = Loadable(React.lazy(() => import("./features/Profiles/pages/ProfilePage/ProfilePage"))) -const EditProfilePage = Loadable(React.lazy(() => import("./features/Profiles/pages/EditProfilePage/EditProfilePage"))) +const DonatePage = Loadable(React.lazy(() => import( /* webpackChunkName: "donate_page" */ "./features/Donations/pages/DonatePage/DonatePage"))) +const LoginPage = Loadable(React.lazy(() => import( /* webpackChunkName: "login_page" */ "./features/Auth/pages/LoginPage/LoginPage"))) +const LogoutPage = Loadable(React.lazy(() => import( /* webpackChunkName: "logout_page" */ "./features/Auth/pages/LogoutPage/LogoutPage"))) +const ProfilePage = Loadable(React.lazy(() => import( /* webpackChunkName: "profile_page" */ "./features/Profiles/pages/ProfilePage/ProfilePage"))) +const EditProfilePage = Loadable(React.lazy(() => import( /* webpackChunkName: "edit_profile_page" */ "./features/Profiles/pages/EditProfilePage/EditProfilePage"))) diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx index a8875ee..345774f 100644 --- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx +++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx @@ -14,7 +14,7 @@ import styles from './styles.module.scss' import { lazy, Suspense } from 'react' import { RotatingLines } from 'react-loader-spinner' -const CommentsSection = lazy(() => import("src/features/Posts/Components/Comments")) +const CommentsSection = lazy(() => import( /* webpackChunkName: "comments_section" */ "src/features/Posts/Components/Comments")) export default function PostDetailsPage() { const { type: _type, id } = useParams(); diff --git a/src/index.tsx b/src/index.tsx index eef1fbf..9e930bc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,7 +6,7 @@ import App from './App'; if (process.env.REACT_APP_ENABLE_MOCKS) { - import('./mocks/browser') + import(/* webpackChunkName: "mocks_server" */ './mocks/browser') .then(({ worker }) => { worker.start({ onUnhandledRequest: 'bypass'