Skip to content

Commit 2a42fc7

Browse files
kemurukemuru
committed
chore(web): abstract more code
1 parent 1ab08e2 commit 2a42fc7

File tree

9 files changed

+161
-224
lines changed

9 files changed

+161
-224
lines changed

‎web/src/components/Popup/MiniGuides/Appeal/index.tsx‎

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { useState } from "react";
1+
import React from "react";
22
import CrowdfundAppeal from "./CrowdfundAppeal";
33
import PayoffSimulator from "./PayoffSimulator";
44
import StageOne from "./StageOne";
55
import StageTwo from "./StageTwo";
6-
import Template, { Title, ParagraphsContainer, LeftContentContainer } from "../Template";
6+
import PageContentsTemplate from "../PageContentsTemplate";
77

88
const leftPageContents = [
99
{
@@ -37,50 +37,18 @@ const leftPageContents = [
3737
},
3838
];
3939

40-
const rightPageComponents = [
41-
() => <CrowdfundAppeal />,
42-
() => <StageOne />,
43-
() => <StageTwo />,
44-
() => <PayoffSimulator />,
45-
];
46-
47-
const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
48-
const { title, paragraphs } = leftPageContents[currentPage - 1];
49-
50-
return (
51-
<LeftContentContainer>
52-
<Title>{title}</Title>
53-
<ParagraphsContainer>
54-
{paragraphs.map((paragraph, index) => (
55-
<label key={index}>{paragraph}</label>
56-
))}
57-
</ParagraphsContainer>
58-
</LeftContentContainer>
59-
);
60-
};
61-
62-
const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
63-
const RightPageComponent = rightPageComponents[currentPage - 1];
64-
65-
return <RightPageComponent />;
66-
};
40+
const rightPageComponents = [CrowdfundAppeal, StageOne, StageTwo, PayoffSimulator];
6741

6842
interface IAppeal {
6943
toggleMiniGuide: () => void;
7044
}
7145

7246
const Appeal: React.FC<IAppeal> = ({ toggleMiniGuide }) => {
73-
const [currentPage, setCurrentPage] = useState(1);
74-
7547
return (
76-
<Template
77-
LeftContent={<LeftContent currentPage={currentPage} />}
78-
RightContent={<RightContent currentPage={currentPage} />}
79-
onClose={toggleMiniGuide}
80-
currentPage={currentPage}
81-
setCurrentPage={setCurrentPage}
82-
numPages={leftPageContents.length}
83-
isOnboarding={false}
48+
<PageContentsTemplate
49+
toggleMiniGuide={toggleMiniGuide}
50+
leftPageContents={leftPageContents}
51+
rightPageComponents={rightPageComponents}
8452
canClose={true}
8553
isVisible={true}
8654
/>

‎web/src/components/Popup/MiniGuides/BinaryVoting/index.tsx‎

Lines changed: 7 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import React, { useState } from "react";
1+
import React from "react";
2+
import PageContentsTemplate from "../PageContentsTemplate";
23
import JurorRewards from "../Staking/JurorRewards";
3-
import Template, { Title, ParagraphsContainer, LeftContentContainer } from "../Template";
44
import VotingModule from "./VotingModule";
55

66
const leftPageContents = [
@@ -23,45 +23,18 @@ const leftPageContents = [
2323
},
2424
];
2525

26-
const rightPageComponents = [() => <VotingModule />, () => <JurorRewards />];
27-
28-
const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
29-
const { title, paragraphs } = leftPageContents[currentPage - 1];
30-
31-
return (
32-
<LeftContentContainer>
33-
<Title>{title}</Title>
34-
<ParagraphsContainer>
35-
{paragraphs.map((paragraph, index) => (
36-
<label key={index}>{paragraph}</label>
37-
))}
38-
</ParagraphsContainer>
39-
</LeftContentContainer>
40-
);
41-
};
42-
43-
const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
44-
const RightPageComponent = rightPageComponents[currentPage - 1];
45-
46-
return <RightPageComponent />;
47-
};
26+
const rightPageComponents = [VotingModule, JurorRewards];
4827

4928
interface IBinaryVoting {
5029
toggleMiniGuide: () => void;
5130
}
5231

5332
const BinaryVoting: React.FC<IBinaryVoting> = ({ toggleMiniGuide }) => {
54-
const [currentPage, setCurrentPage] = useState(1);
55-
5633
return (
57-
<Template
58-
LeftContent={<LeftContent currentPage={currentPage} />}
59-
RightContent={<RightContent currentPage={currentPage} />}
60-
onClose={toggleMiniGuide}
61-
currentPage={currentPage}
62-
setCurrentPage={setCurrentPage}
63-
numPages={leftPageContents.length}
64-
isOnboarding={false}
34+
<PageContentsTemplate
35+
toggleMiniGuide={toggleMiniGuide}
36+
leftPageContents={leftPageContents}
37+
rightPageComponents={rightPageComponents}
6538
canClose={true}
6639
isVisible={true}
6740
/>

‎web/src/components/Popup/MiniGuides/JurorLevels.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { landscapeStyle } from "styles/landscapeStyle";
44
import { Card as _Card } from "@kleros/ui-components-library";
55
import PixelArt from "pages/Dashboard/JurorInfo/PixelArt";
66
import Coherency from "pages/Dashboard/JurorInfo/Coherency";
7-
import Template, { Title, ParagraphsContainer, LeftContentContainer } from "./Template";
7+
import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate";
8+
import Template from "./MainStructureTemplate";
89

910
const Card = styled(_Card)`
1011
display: flex;

‎web/src/components/Popup/MiniGuides/Template.tsx‎ renamed to ‎web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -136,22 +136,6 @@ const RightContainer = styled.div`
136136
)}
137137
`;
138138

139-
export const ParagraphsContainer = styled.div`
140-
display: flex;
141-
gap: 18px;
142-
flex-direction: column;
143-
`;
144-
145-
export const Title = styled.h1`
146-
margin-bottom: 0;
147-
`;
148-
149-
export const LeftContentContainer = styled.div`
150-
display: flex;
151-
gap: 18px;
152-
flex-direction: column;
153-
`;
154-
155139
interface ITemplate {
156140
onClose: () => void;
157141
LeftContent: React.ReactNode;

‎web/src/components/Popup/MiniGuides/Onboarding/index.tsx‎

Lines changed: 11 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React, { useState } from "react";
2-
import styled from "styled-components";
1+
import React from "react";
32
import { useToggle } from "react-use";
43
import HowItWorks from "./HowItWorks";
54
import PnkLogoAndTitle from "./PnkLogoAndTitle";
@@ -9,18 +8,7 @@ import BinaryVoting from "../BinaryVoting";
98
import RankedVoting from "../RankedVoting";
109
import Appeal from "../Appeal";
1110
import JurorLevels from "../JurorLevels";
12-
import Template, { Title, ParagraphsContainer, LeftContentContainer } from "../Template";
13-
14-
const StyledLabel = styled.label`
15-
color: ${({ theme }) => theme.primaryBlue};
16-
margin: 0;
17-
cursor: pointer;
18-
`;
19-
20-
const LinksContainer = styled.div`
21-
display: flex;
22-
flex-direction: column;
23-
`;
11+
import PageContentsTemplate from "../PageContentsTemplate";
2412

2513
const leftPageContents = [
2614
{
@@ -48,47 +36,13 @@ const leftPageContents = [
4836
},
4937
];
5038

51-
const rightPageComponents = [() => <PnkLogoAndTitle />, () => <WhatDoINeed />, () => <HowItWorks />];
52-
53-
const extractGuideName = (linkText) => linkText.split(". ")[1];
54-
55-
const LeftContent: React.FC<{ currentPage: number; toggleMiniGuide: (guideName: string) => void }> = ({
56-
currentPage,
57-
toggleMiniGuide,
58-
}) => {
59-
const { title, paragraphs, links } = leftPageContents[currentPage - 1];
60-
61-
return (
62-
<LeftContentContainer>
63-
<Title>{title}</Title>
64-
<ParagraphsContainer>
65-
{paragraphs.map((paragraph, index) => (
66-
<label key={index}>{paragraph}</label>
67-
))}
68-
</ParagraphsContainer>
69-
<LinksContainer>
70-
{links.map((link, index) => (
71-
<StyledLabel key={index} onClick={() => toggleMiniGuide(extractGuideName(link))}>
72-
{link}
73-
</StyledLabel>
74-
))}
75-
</LinksContainer>
76-
</LeftContentContainer>
77-
);
78-
};
79-
80-
const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
81-
const RightPageComponent = rightPageComponents[currentPage - 1];
82-
83-
return <RightPageComponent />;
84-
};
39+
const rightPageComponents = [PnkLogoAndTitle, WhatDoINeed, HowItWorks];
8540

8641
interface IOnboarding {
87-
toggleIsOnboardingMiniGuidesOpen: () => void;
42+
toggleMiniGuide: () => void;
8843
}
8944

90-
const Onboarding: React.FC<IOnboarding> = ({ toggleIsOnboardingMiniGuidesOpen }) => {
91-
const [currentPage, setCurrentPage] = useState(1);
45+
const Onboarding: React.FC<IOnboarding> = ({ toggleMiniGuide }) => {
9246
const [isStakingMiniGuideOpen, toggleStakingMiniGuide] = useToggle(false);
9347
const [isBinaryVotingMiniGuideOpen, toggleBinaryVotingMiniGuide] = useToggle(false);
9448
const [isRankedVotingMiniGuideOpen, toggleRankedVotingMiniGuide] = useToggle(false);
@@ -109,7 +63,7 @@ const Onboarding: React.FC<IOnboarding> = ({ toggleIsOnboardingMiniGuidesOpen })
10963
!isAppealMiniGuideOpen &&
11064
!isJurorLevelsMiniGuideOpen;
11165

112-
const toggleMiniGuide = (guideName: string) => {
66+
const toggleSubMiniGuide = (guideName: string) => {
11367
if (guideName === "Staking") {
11468
toggleStakingMiniGuide();
11569
} else if (guideName === "Binary Voting") {
@@ -125,16 +79,13 @@ const Onboarding: React.FC<IOnboarding> = ({ toggleIsOnboardingMiniGuidesOpen })
12579

12680
return (
12781
<>
128-
<Template
129-
LeftContent={<LeftContent currentPage={currentPage} toggleMiniGuide={toggleMiniGuide} />}
130-
RightContent={<RightContent currentPage={currentPage} />}
131-
onClose={toggleIsOnboardingMiniGuidesOpen}
132-
currentPage={currentPage}
133-
setCurrentPage={setCurrentPage}
134-
numPages={leftPageContents.length}
135-
isOnboarding={true}
82+
<PageContentsTemplate
83+
toggleMiniGuide={toggleMiniGuide}
84+
leftPageContents={leftPageContents}
85+
rightPageComponents={rightPageComponents}
13686
canClose={canCloseOnboarding}
13787
isVisible={!isAnyMiniGuideOpen}
88+
toggleSubMiniGuide={toggleSubMiniGuide}
13889
/>
13990

14091
{isStakingMiniGuideOpen && <Staking toggleMiniGuide={toggleStakingMiniGuide} />}

‎web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React, { useState } from "react";
2+
import styled from "styled-components";
3+
import MainStructureTemplate from "./MainStructureTemplate";
4+
5+
export const ParagraphsContainer = styled.div`
6+
display: flex;
7+
gap: 18px;
8+
flex-direction: column;
9+
`;
10+
11+
export const Title = styled.h1`
12+
margin-bottom: 0;
13+
`;
14+
15+
export const LeftContentContainer = styled.div`
16+
display: flex;
17+
gap: 18px;
18+
flex-direction: column;
19+
`;
20+
21+
const LinksContainer = styled.div`
22+
display: flex;
23+
flex-direction: column;
24+
`;
25+
26+
const StyledLabel = styled.label`
27+
color: ${({ theme }) => theme.primaryBlue};
28+
margin: 0;
29+
cursor: pointer;
30+
`;
31+
32+
const extractGuideName = (linkText) => linkText.split(". ")[1];
33+
34+
const LeftContent: React.FC<{
35+
currentPage: number;
36+
leftPageContents: {
37+
title: string;
38+
paragraphs: string[];
39+
links?: string[];
40+
}[];
41+
toggleSubMiniGuide?: (guideName: string) => void;
42+
}> = ({ currentPage, leftPageContents, toggleSubMiniGuide }) => {
43+
const { title, paragraphs, links } = leftPageContents[currentPage - 1];
44+
45+
return (
46+
<LeftContentContainer>
47+
<Title>{title}</Title>
48+
<ParagraphsContainer>
49+
{paragraphs.map((paragraph, index) => (
50+
<label key={index}>{paragraph}</label>
51+
))}
52+
</ParagraphsContainer>
53+
{links && links.length > 0 && toggleSubMiniGuide ? (
54+
<LinksContainer>
55+
{links.map((link, index) => (
56+
<StyledLabel key={index} onClick={() => toggleSubMiniGuide(extractGuideName(link))}>
57+
{link}
58+
</StyledLabel>
59+
))}
60+
</LinksContainer>
61+
) : null}
62+
</LeftContentContainer>
63+
);
64+
};
65+
66+
const RightContent: React.FC<{ currentPage: number; rightPageComponents: () => React.ReactNode[] }> = ({
67+
currentPage,
68+
rightPageComponents,
69+
}) => {
70+
const RightPageComponent = rightPageComponents[currentPage - 1];
71+
72+
return <RightPageComponent />;
73+
};
74+
75+
interface IPageContentsTemplate {
76+
toggleMiniGuide: () => void;
77+
toggleSubMiniGuide?: (guideName: string) => void;
78+
leftPageContents: {
79+
title: string;
80+
paragraphs: string[];
81+
links?: string[];
82+
}[];
83+
rightPageComponents: () => React.ReactNode[];
84+
canClose: boolean;
85+
isVisible: boolean;
86+
}
87+
88+
const PageContentsTemplate: React.FC<IPageContentsTemplate> = ({
89+
toggleMiniGuide,
90+
toggleSubMiniGuide,
91+
leftPageContents,
92+
rightPageComponents,
93+
canClose,
94+
isVisible,
95+
}) => {
96+
const [currentPage, setCurrentPage] = useState(1);
97+
98+
return (
99+
<MainStructureTemplate
100+
LeftContent={
101+
<LeftContent
102+
currentPage={currentPage}
103+
leftPageContents={leftPageContents}
104+
toggleSubMiniGuide={toggleSubMiniGuide}
105+
/>
106+
}
107+
RightContent={<RightContent currentPage={currentPage} rightPageComponents={rightPageComponents} />}
108+
onClose={toggleMiniGuide}
109+
currentPage={currentPage}
110+
setCurrentPage={setCurrentPage}
111+
numPages={leftPageContents.length}
112+
isOnboarding={false}
113+
canClose={canClose}
114+
isVisible={isVisible}
115+
/>
116+
);
117+
};
118+
119+
export default PageContentsTemplate;

0 commit comments

Comments
 (0)