Skip to content
This repository was archived by the owner on Jan 19, 2025. It is now read-only.

Commit b132a92

Browse files
chiciochicio
committed
Finally the app layout works as expected 🚀
1 parent aed382d commit b132a92

File tree

5 files changed

+56
-68
lines changed

5 files changed

+56
-68
lines changed

‎src/components/design-system/organism/blog-header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const ImageContainer = styled.div`
8686
}
8787
`;
8888

89-
export const DesktopContainer = styled.div`
89+
const DesktopContainer = styled.div`
9090
display: none;
9191
9292
${mediaQuery.minWidth.sm} {
@@ -98,7 +98,7 @@ interface MobileContainerProps {
9898
height: string;
9999
}
100100

101-
export const MobileContainer = styled.div<MobileContainerProps>`
101+
const MobileContainer = styled.div<MobileContainerProps>`
102102
display: flex;
103103
height: ${(props) => props.height};
104104

‎src/components/design-system/organism/blog-menu.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ interface MobileBlogHeaderContainerProps {
2424
}
2525

2626
const MobileBlogHeaderContainer = styled(
27-
ContainerFluid
27+
ContainerFluid,
2828
)<MobileBlogHeaderContainerProps>`
2929
height: ${menuHeight};
3030
display: flex;
@@ -76,7 +76,8 @@ const MenuContainer = styled.div<MenuContainerProps>`
7676
top: ${(props) => (props.shouldHide ? `-${menuHeight}` : 0)};
7777
left: 0;
7878
right: 0;
79-
transition: top 0.3s ease 0s,
79+
transition:
80+
top 0.3s ease 0s,
8081
height 0.3s ease ${(props) => `${props.delayOpenCloseMenuAnimation}s`};
8182
width: 100%;
8283
z-index: 300;
@@ -228,19 +229,19 @@ export const BlogMenu: FC<MenuProps> = ({ trackingCategory, pathname }) => {
228229

229230
const onStartAnimation = useCallback(
230231
() => setEnableMenuButton(false),
231-
[setEnableMenuButton]
232+
[setEnableMenuButton],
232233
);
233234
const onFinishAnimation = useCallback(
234235
() => setEnableMenuButton(true),
235-
[setEnableMenuButton]
236+
[setEnableMenuButton],
236237
);
237238
const changeMenuStatus = useCallback(
238239
(enableMenuButton: boolean, shouldOpenMenu: boolean) => {
239240
if (enableMenuButton) {
240241
setShouldOpenMenu(!shouldOpenMenu);
241242
}
242243
},
243-
[setShouldOpenMenu]
244+
[setShouldOpenMenu],
244245
);
245246

246247
return (

‎src/components/design-system/templates/blog-page-template.tsx‎

Lines changed: 26 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import loadable from "@loadable/component";
88
import styled from "styled-components";
99
import { Container } from "../atoms/container";
1010
import { blogPrimaryColor } from "../blog-colors";
11-
import { FC, ReactNode } from "react";
11+
import { FC, ReactNode, useEffect, useState } from "react";
1212
import { pageOpenedInApp } from "../../../logic/app";
1313

1414
const Footer = loadable(() => import(`../organism/footer`));
@@ -22,28 +22,6 @@ const ContentContainerApp = styled(Container)`
2222
flex: 1 0 auto;
2323
`;
2424

25-
const StandardLayout: FC<{
26-
location: CurrentLocation;
27-
trackingCategory: string;
28-
children?: ReactNode;
29-
big: boolean;
30-
author: string;
31-
}> = ({ location, trackingCategory, big, author, children }) => {
32-
return (
33-
<div>
34-
<BlogMenu
35-
trackingCategory={trackingCategory}
36-
pathname={location.pathname}
37-
/>
38-
<ContentContainer>
39-
<DesktopBlogHeader big={big} />
40-
{children}
41-
</ContentContainer>
42-
<Footer author={author} trackingCategory={trackingCategory} />
43-
</div>
44-
);
45-
};
46-
4725
export interface BlogPageProps {
4826
location: CurrentLocation;
4927
author: string;
@@ -69,8 +47,14 @@ export const BlogPageTemplate: FC<BlogPageProps> = ({
6947
date,
7048
big = false,
7149
}) => {
50+
const [isFromApp, setIsFromApp] = useState(false);
51+
52+
useEffect(() => {
53+
setIsFromApp(pageOpenedInApp(location));
54+
}, []);
55+
7256
return (
73-
<BlogThemePage>
57+
<>
7458
<Head
7559
url={location.url}
7660
pageType={ogPageType}
@@ -80,18 +64,23 @@ export const BlogPageTemplate: FC<BlogPageProps> = ({
8064
date={date}
8165
cookieConsentColor={blogPrimaryColor}
8266
/>
83-
{!pageOpenedInApp(location) ? (
84-
<StandardLayout
85-
location={location}
86-
big={big}
87-
trackingCategory={trackingCategory}
88-
author={author}
89-
>
90-
{children}
91-
</StandardLayout>
92-
) : (
93-
<ContentContainerApp>{children}</ContentContainerApp>
94-
)}
95-
</BlogThemePage>
67+
<BlogThemePage>
68+
{isFromApp ? (
69+
<ContentContainerApp>{children}</ContentContainerApp>
70+
) : (
71+
<>
72+
<BlogMenu
73+
trackingCategory={trackingCategory}
74+
pathname={location.pathname}
75+
/>
76+
<ContentContainer>
77+
<DesktopBlogHeader big={big} />
78+
{children}
79+
</ContentContainer>
80+
<Footer author={author} trackingCategory={trackingCategory} />
81+
</>
82+
)}
83+
</BlogThemePage>
84+
</>
9685
);
9786
};

‎src/components/design-system/utils-css/media-query.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ const media: (content: string) => string = (content) => `@media ${content}`;
3939
const dark = media(content("prefers-color-scheme: dark"));
4040

4141
const mouse = media(
42-
`${content("hover: hover")} and ${content("pointer: fine")}`
42+
`${content("hover: hover")} and ${content("pointer: fine")}`,
4343
);
4444

4545
const width: (
4646
width: "max-width" | "min-width",
47-
breakpoint: BreakPoint
47+
breakpoint: BreakPoint,
4848
) => string = (width: "max-width" | "min-width", breakpoint: BreakPoint) =>
4949
media(content(`${width}: ${breakpoints[breakpoint]}`));
5050

‎src/components/head.tsx‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -59,30 +59,28 @@ export const Head: FC<HeadProps> = ({
5959
description,
6060
cookieConsentColor,
6161
}) => {
62-
const data = useStaticQuery<Queries.HeadQuery>(
63-
graphql`
64-
query Head {
65-
site {
66-
siteMetadata {
67-
author
68-
title
69-
siteUrl
70-
contacts {
71-
links {
72-
twitter
73-
facebook
74-
linkedin
75-
github
76-
medium
77-
devto
78-
instagram
79-
}
62+
const data = useStaticQuery<Queries.HeadQuery>(graphql`
63+
query Head {
64+
site {
65+
siteMetadata {
66+
author
67+
title
68+
siteUrl
69+
contacts {
70+
links {
71+
twitter
72+
facebook
73+
linkedin
74+
github
75+
medium
76+
devto
77+
instagram
8078
}
8179
}
8280
}
8381
}
84-
`
85-
);
82+
}
83+
`);
8684

8785
const siteMetadata = data.site!.siteMetadata!;
8886
const title = customTitle ? customTitle : siteMetadata.title!;
@@ -99,7 +97,7 @@ export const Head: FC<HeadProps> = ({
9997
title,
10098
url,
10199
`${siteUrl}${imageUrl}`,
102-
pageType
100+
pageType,
103101
)}
104102
>
105103
<link rel="canonical" href={url} />
@@ -129,7 +127,7 @@ export const Head: FC<HeadProps> = ({
129127
title,
130128
links,
131129
description,
132-
date
130+
date,
133131
)}
134132
</script>
135133
</Helmet>

0 commit comments

Comments
 (0)