Skip to content

Commit 6b8412e

Browse files
grevicocgrevicoc
authored
Merge pull request #39 from KATITB22/fix/move-render-to-per-component
refactor: not render page as one
2 parents 5c6150d + d208d13 commit 6b8412e

19 files changed

Lines changed: 284 additions & 52194 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,5 @@ dist-ssr
2222
*.ntvs*
2323
*.njsproj
2424
*.sln
25-
*.sw?
25+
*.sw?
26+
.env

‎package-lock.json‎

Lines changed: 0 additions & 51875 deletions
This file was deleted.

‎src/App.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,35 @@
11
import { Suspense } from 'react';
22
import { Route, BrowserRouter, Routes } from 'react-router-dom';
3-
import { AnimatePresence } from 'framer-motion';
43
import { ChakraProvider } from '@chakra-ui/react';
5-
import { Routing } from './routing';
64

7-
import Loading from './pages/Loading';
5+
import BaseLayout from './layout/BaseLayout';
6+
import { Routing } from './routing';
7+
import { Loading } from './pages/Loading';
88

99
function App() {
1010
return (
1111
<ChakraProvider>
12-
<Suspense fallback={<Loading />}>
13-
<BrowserRouter>
14-
<AnimatePresence exitBeforeEnter>
15-
<Routes>
16-
{Routing.map((route) => {
17-
const Component = route.component;
18-
return (
19-
<Route
20-
caseSensitive
21-
path={route.path}
22-
key={route.path}
23-
element={<Component />}
24-
/>
25-
);
26-
})}
27-
</Routes>
28-
</AnimatePresence>
29-
</BrowserRouter>
30-
</Suspense>
12+
<BrowserRouter>
13+
<BaseLayout>
14+
<Routes>
15+
{Routing.map((route) => {
16+
const Component = route.component;
17+
return (
18+
<Route
19+
caseSensitive
20+
path={route.path}
21+
key={route.path}
22+
element={
23+
<Suspense fallback={<Loading />}>
24+
<Component />
25+
</Suspense>
26+
}
27+
/>
28+
);
29+
})}
30+
</Routes>
31+
</BaseLayout>
32+
</BrowserRouter>
3133
</ChakraProvider>
3234
);
3335
}

‎src/components/Navbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useMemo } from 'react';
2-
import { useLocation } from 'react-router-dom';
2+
import { Link, useLocation } from 'react-router-dom';
33
import { NavBarProps } from '@/types/interface';
44

55
const Navbar: React.FC<NavBarProps> = ({ children, to }: NavBarProps) => {
@@ -9,14 +9,14 @@ const Navbar: React.FC<NavBarProps> = ({ children, to }: NavBarProps) => {
99
[location.pathname]
1010
);
1111
return (
12-
<a
13-
href={to}
12+
<Link
13+
to={to}
1414
className={`cursor-pointer no-underline ${
1515
isActive ? 'text-DarkestOrange' : ''
1616
}`}
1717
>
1818
{children}
19-
</a>
19+
</Link>
2020
);
2121
};
2222

‎src/components/Rumpun.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import { RumpunProps } from '@/types/interface';
22

3-
const Rumpun: React.FC<RumpunProps> = ({ id }) => {
4-
return (
5-
<div className="flex flex-col gap-2 justify-center items-center">
6-
<div className="bg-LightBrown w-full aspect-square"></div>
7-
<h2 className="text-xl sm:text-2xl">Rumpun {id + 1}</h2>
8-
</div>
9-
);
10-
};
3+
const Rumpun: React.FC<RumpunProps> = ({ id }: RumpunProps) => (
4+
<div className="flex flex-col gap-2 justify-center items-center">
5+
<div className="bg-LightBrown w-full aspect-square" />
6+
<h2 className="text-xl sm:text-2xl">Rumpun {id + 1}</h2>
7+
</div>
8+
);
119

1210
export default Rumpun;

‎src/layout/Animate.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,20 @@ const Animate: React.FC<BaseProps> = ({ children }) => (
66
<motion.div
77
initial={{ opacity: 0 }}
88
animate={{ opacity: 1 }}
9-
exit={{ opacity: 0 }}
109
transition={{ duration: 0.7 }}
1110
>
1211
{children}
1312
</motion.div>
1413
);
1514

16-
export default Animate;
15+
const AnimateLoading: React.FC<BaseProps> = ({ children }) => (
16+
<motion.div
17+
animate={{
18+
opacity: [1, 0.75, 0.5, 0.25, 0],
19+
}}
20+
>
21+
{children}
22+
</motion.div>
23+
);
24+
25+
export { Animate, AnimateLoading };

‎src/layout/BaseLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import Logo from '@styles/images/oskm-logo.svg';
2424
import { Link, useNavigate } from 'react-router-dom';
2525
import { LAYOUT_TITLE } from '@/types/constant';
2626
import { BaseProps } from '../types/interface';
27-
import Animate from './Animate';
27+
import { Animate } from './Animate';
2828

2929
const links = [
3030
{

‎src/pages/About/About.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import BaseLayout from '@/layout/BaseLayout';
21
import { ABOUT_US_TITLE } from '@/types/constant';
32
import oskmLogo from '@/assets/images/oskm-logo.svg';
43
import { useToggle } from '@/hooks/useToggle';
@@ -10,7 +9,7 @@ const About: React.FC<{}> = () => {
109
'Pemasaran yang dulu dilakukan dengan menggunakan flyer, spanduk, koran, kini beralih ke media digital dan juga internet',
1110
];
1211
return (
13-
<BaseLayout>
12+
<div>
1413
{isOn ? (
1514
<AboutDetail toggle={toggle} />
1615
) : (
@@ -49,7 +48,7 @@ const About: React.FC<{}> = () => {
4948
</div>
5049
</div>
5150
)}
52-
</BaseLayout>
51+
</div>
5352
);
5453
};
5554

‎src/pages/Detailpage/Detailpage.tsx‎

Lines changed: 79 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@ import { useParams } from 'react-router-dom';
66
import { fetchSinglePost } from '@/service/ghostAPI';
77
import { renderHTMLContent } from '@/util/renderHTMLContent';
88
import { MONTHS } from '@/types/constant';
9-
import BaseLayout from '@/layout/BaseLayout';
109
import VistockBackground from '@/components/VistockBackground';
1110
import DefaultImage from '@/assets/images/logo-sementara.jpeg';
1211
import { DetailPost, DetailpageProps } from '@/types/interface';
1312
import useFetch from '@/hooks/useFetch';
1413
import RelatedPosts from './RelatedPosts';
15-
import Loading from '../Loading';
14+
import { LoadingSpecific } from '../Loading';
1615
import ErrorPage from '../ErrorPage';
1716

1817
const Detailpage: React.FC<DetailpageProps> = () => {
@@ -25,11 +24,7 @@ const Detailpage: React.FC<DetailpageProps> = () => {
2524
let published_at: string;
2625

2726
if (isLoading) {
28-
return (
29-
<BaseLayout>
30-
<Loading />
31-
</BaseLayout>
32-
);
27+
return <LoadingSpecific />;
3328
}
3429

3530
if (error) {
@@ -45,92 +40,90 @@ const Detailpage: React.FC<DetailpageProps> = () => {
4540
}
4641

4742
return (
48-
<BaseLayout>
43+
<Flex
44+
background="linear-gradient(180deg, #FF9165 -21.55%, #F9DCB0 100%)"
45+
className="min-h-screen justify-center relative"
46+
>
47+
<VistockBackground />
48+
<Flex width="15%">
49+
<Box width="100%" height="100%" />
50+
</Flex>
4951
<Flex
50-
background="linear-gradient(180deg, #FF9165 -21.55%, #F9DCB0 100%)"
51-
className="min-h-screen justify-center relative"
52+
className="my-12 md:my-20 max-w-screen-lg"
53+
flexDirection="column"
54+
width="70%"
5255
>
53-
<VistockBackground />
54-
<Flex width="15%">
55-
<Box width="100%" height="100%" />
56-
</Flex>
57-
<Flex
58-
className="my-12 md:my-20 max-w-screen-lg"
59-
flexDirection="column"
60-
width="70%"
56+
<div className="font-Body text-overline md:text-body cursor-pointer">
57+
<a className="hover:underline" href="/">
58+
Home
59+
</a>
60+
{post!.primary_tag && (
61+
<span>
62+
{' '}
63+
{'>'}{' '}
64+
<a
65+
className="hover:underline"
66+
href={`/search?${post!.primary_tag.name}`}
67+
>
68+
{post!.primary_tag.name}
69+
</a>
70+
</span>
71+
)}
72+
</div>
73+
<Box
74+
fontFamily="Magilio"
75+
fontSize={{
76+
base: '20px',
77+
md: '35px',
78+
}}
6179
>
62-
<div className="font-Body text-overline md:text-body cursor-pointer">
63-
<a className="hover:underline" href="/">
64-
Home
65-
</a>
66-
{post!.primary_tag && (
67-
<span>
68-
{' '}
69-
{'>'}{' '}
70-
<a
71-
className="hover:underline"
72-
href={`/search?${post!.primary_tag.name}`}
73-
>
74-
{post!.primary_tag.name}
75-
</a>
76-
</span>
77-
)}
78-
</div>
79-
<Box
80-
fontFamily="Magilio"
81-
fontSize={{
82-
base: '20px',
83-
md: '35px',
84-
}}
85-
>
86-
{post!.title}
87-
</Box>
80+
{post!.title}
81+
</Box>
8882

89-
{post!.primary_author && (
90-
<Box>Author: {post!.primary_author.name}</Box>
91-
)}
83+
{post!.primary_author && (
84+
<Box>Author: {post!.primary_author.name}</Box>
85+
)}
9286

93-
<Box
94-
fontFamily="Alegreya"
95-
fontSize={{
96-
base: '12px',
97-
md: '18px',
98-
}}
99-
>
100-
{published_at!}
101-
</Box>
102-
<VStack
103-
spacing={{
104-
base: '12px',
105-
md: '24px',
106-
}}
107-
className="bg-[#D9D9D9] z-30 p-5 bg-opacity-[0.65]"
108-
>
109-
{post!.feature_image ? (
110-
<Box maxWidth="w-full grid place-items-center">
111-
<img
112-
className="w-5/12 md:w-4/12 lg:w-3/12"
113-
src={post!.feature_image}
114-
alt="featured"
115-
/>
116-
</Box>
117-
) : (
118-
<Box className="w-full grid place-items-center">
119-
<img
120-
className="w-5/12 md:w-4/12 lg:w-3/12"
121-
src={DefaultImage}
122-
alt="default-img"
123-
/>
124-
</Box>
125-
)}
87+
<Box
88+
fontFamily="Alegreya"
89+
fontSize={{
90+
base: '12px',
91+
md: '18px',
92+
}}
93+
>
94+
{published_at!}
95+
</Box>
96+
<VStack
97+
spacing={{
98+
base: '12px',
99+
md: '24px',
100+
}}
101+
className="bg-[#D9D9D9] z-30 p-5 bg-opacity-[0.65]"
102+
>
103+
{post!.feature_image ? (
104+
<Box maxWidth="w-full grid place-items-center">
105+
<img
106+
className="w-5/12 md:w-4/12 lg:w-3/12"
107+
src={post!.feature_image}
108+
alt="featured"
109+
/>
110+
</Box>
111+
) : (
112+
<Box className="w-full grid place-items-center">
113+
<img
114+
className="w-5/12 md:w-4/12 lg:w-3/12"
115+
src={DefaultImage}
116+
alt="default-img"
117+
/>
118+
</Box>
119+
)}
126120

127-
{renderHTMLContent(post!)}
128-
</VStack>
129-
<RelatedPosts posts={data.relatedPosts} />
130-
</Flex>
131-
<Flex width="15%" />
121+
{renderHTMLContent(post!)}
122+
</VStack>
123+
<RelatedPosts posts={data.relatedPosts} />
132124
</Flex>
133-
</BaseLayout>
125+
<Flex width="15%" />
126+
</Flex>
134127
);
135128
};
136129

‎src/pages/ErrorPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import Animate from '@/layout/Animate';
2+
import { Animate } from '@/layout/Animate';
33
import { SpinnerProps } from '@/types/interface';
44

55
const ErrorPage: React.FC<SpinnerProps> = ({ message }) => (

0 commit comments

Comments
 (0)