Skip to content

Commit 8fffe4a

Browse files
su-usu-u
committed
Fix: pageとクライアント処理の分離
1 parent 8d27c92 commit 8fffe4a

File tree

32 files changed

+1151
-1054
lines changed

32 files changed

+1151
-1054
lines changed

‎src/Layout/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22
import styled from '@emotion/styled';
3-
import React from 'react';
3+
import React, { FC } from 'react';
44
import { Container, Content } from 'rsuite';
55
import { Provider } from '@/app/Provider';
66
import { SideNavBar } from '@/components/SideNavBar';
@@ -9,7 +9,7 @@ type Props = {
99
children?: React.ReactNode;
1010
};
1111

12-
export const AppLayout: React.FC<Props> = ({ children }) => {
12+
export const AppLayout: FC<Props> = ({ children }) => {
1313
return (
1414
<Provider>
1515
<StyledContainer>

‎src/app/base64/Base64.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client';
2-
import React from 'react';
2+
import React, { FC } from 'react';
33
import { FormProvider, Controller } from 'react-hook-form';
44
import { Grid, Row, Col, Panel, ButtonToolbar } from 'rsuite';
55
import { AppLayout } from '@/Layout/App';
@@ -10,7 +10,7 @@ import { ClearButton } from '@/components/common/Form/ClearButton';
1010
import { PageTitle } from '@/components/common/PageTitle';
1111
import { PanelHeader } from '@/components/common/PanelHeader';
1212

13-
const Base64: React.FC = () => {
13+
export const Base64: FC = () => {
1414
const title = 'base64エンコード';
1515
const { methods, output } = useBase64();
1616

@@ -64,5 +64,3 @@ const Base64: React.FC = () => {
6464
</FormProvider>
6565
);
6666
};
67-
68-
export default Base64;

‎src/app/base64/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React from 'react';
2-
import Base64 from '@/app/base64/Base64';
1+
import React, { FC } from 'react';
2+
import { Base64 } from '@/app/base64/Base64';
33

44
export const metadata = {
55
title: 'Dev Toolkit - base64エンコード',
66
};
77

8-
const Base64Page: React.FC = () => {
8+
const Base64Page: FC = () => {
99
return <Base64 />;
1010
};
1111

‎src/app/character_count/CharacterCount.tsx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
'use client';
2+
import styled from '@emotion/styled';
3+
import React, { FC } from 'react';
4+
import { Controller, FormProvider } from 'react-hook-form';
5+
import { Col, Form, Grid, Panel, Row, ButtonToolbar } from 'rsuite';
6+
import { AppLayout } from '@/Layout/App';
7+
import {
8+
characterCountWithoutSpace,
9+
characterCountWithSpace,
10+
fullWidthCharacterCount,
11+
halfWidthCharacterCount,
12+
linesCount,
13+
spaceCount,
14+
} from '@/app/character_count/CharacterCountLib';
15+
import { Editor } from '@/components/common/Editor';
16+
import { ClearButton } from '@/components/common/Form/ClearButton';
17+
import { LabelInput } from '@/components/common/Form/LabelInput';
18+
import { useCustomForm } from '@/components/common/Form/useCustomForm';
19+
import { PageTitle } from '@/components/common/PageTitle';
20+
import { PanelHeader } from '@/components/common/PanelHeader';
21+
22+
type characterCountForm = {
23+
input: string;
24+
};
25+
26+
export const CharacterCount: FC = () => {
27+
const methods = useCustomForm<characterCountForm>({
28+
defaultValues: {
29+
input: '',
30+
},
31+
});
32+
const { control, watch } = methods;
33+
34+
const title = '文字数カウント';
35+
const input = watch('input', '');
36+
37+
const characterCountValue = characterCountWithSpace(input).toString();
38+
const characterCountWithoutSpaceValue = characterCountWithoutSpace(input).toString();
39+
const spaceCharacterCountValue = spaceCount(input).toString();
40+
const fullWidthCharacterCountValue = fullWidthCharacterCount(input).toString();
41+
const halfWidthCharacterCountValue = halfWidthCharacterCount(input).toString();
42+
const linesCountValue = linesCount(input).toString();
43+
44+
return (
45+
<FormProvider {...methods}>
46+
<AppLayout>
47+
<Grid fluid>
48+
<PageTitle title={title} />
49+
<Row gutter={5}>
50+
<Col xs={24} md={12}>
51+
<Panel
52+
bordered
53+
header={
54+
<PanelHeader
55+
title="カウントする文字列"
56+
right={
57+
<ButtonToolbar>
58+
<ClearButton name="input" />
59+
</ButtonToolbar>
60+
}
61+
/>
62+
}
63+
>
64+
<Controller
65+
render={({ field }) => <Editor {...field} ref={null} />}
66+
name="input"
67+
control={control}
68+
/>
69+
</Panel>
70+
</Col>
71+
<Col xs={24} md={12}>
72+
<Panel bordered header={<PanelHeader title="文字数" />}>
73+
<ConvertedForm layout="horizontal">
74+
<LabelInput label="文字数(スペース込み)" value={characterCountValue} />
75+
<LabelInput label="文字数(スペース除)" value={characterCountWithoutSpaceValue} />
76+
<LabelInput label="スペースの数" value={spaceCharacterCountValue} />
77+
<LabelInput label="全角文字数" value={fullWidthCharacterCountValue} />
78+
<LabelInput label="半角文字数" value={halfWidthCharacterCountValue} />
79+
<LabelInput label="行数" value={linesCountValue} />
80+
</ConvertedForm>
81+
</Panel>
82+
</Col>
83+
</Row>
84+
</Grid>
85+
</AppLayout>
86+
</FormProvider>
87+
);
88+
};
89+
90+
const ConvertedForm = styled(Form)`
91+
> div:not(:last-child) {
92+
margin-bottom: 12px !important;
93+
}
94+
`;

‎src/app/character_count/page.tsx‎

Lines changed: 6 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,12 @@
1-
'use client';
2-
import styled from '@emotion/styled';
3-
import React, { useCallback } from 'react';
4-
import { Controller, FormProvider } from 'react-hook-form';
5-
import { Col, Form, Grid, Panel, Row, ButtonToolbar } from 'rsuite';
6-
import { AppLayout } from '@/Layout/App';
7-
import {
8-
characterCountWithoutSpace,
9-
characterCountWithSpace,
10-
fullWidthCharacterCount,
11-
halfWidthCharacterCount,
12-
linesCount,
13-
spaceCount,
14-
} from '@/app/character_count/CharacterCountLib';
15-
import { Editor } from '@/components/common/Editor';
16-
import { ClearButton } from '@/components/common/Form/ClearButton';
17-
import { LabelInput } from '@/components/common/Form/LabelInput';
18-
import { useCustomForm } from '@/components/common/Form/useCustomForm';
19-
import { PageTitle } from '@/components/common/PageTitle';
20-
import { PanelHeader } from '@/components/common/PanelHeader';
1+
import React, { FC } from 'react';
2+
import { CharacterCount } from '@/app/character_count/CharacterCount';
213

22-
type characterCountForm = {
23-
input: string;
4+
export const metadata = {
5+
title: 'Dev Toolkit - 文字数カウント',
246
};
257

26-
const CharacterCountPage: React.FC = () => {
27-
const methods = useCustomForm<characterCountForm>({
28-
defaultValues: {
29-
input: '',
30-
},
31-
});
32-
const { control, watch } = methods;
33-
34-
const title = '文字数カウント';
35-
const input = watch('input', '');
36-
37-
const characterCountValue = characterCountWithSpace(input).toString();
38-
const characterCountWithoutSpaceValue = characterCountWithoutSpace(input).toString();
39-
const spaceCharacterCountValue = spaceCount(input).toString();
40-
const fullWidthCharacterCountValue = fullWidthCharacterCount(input).toString();
41-
const halfWidthCharacterCountValue = halfWidthCharacterCount(input).toString();
42-
const linesCountValue = linesCount(input).toString();
43-
44-
return (
45-
<FormProvider {...methods}>
46-
<AppLayout title={title}>
47-
<Grid fluid>
48-
<PageTitle title={title} />
49-
<Row gutter={5}>
50-
<Col xs={24} md={12}>
51-
<Panel
52-
bordered
53-
header={
54-
<PanelHeader
55-
title="カウントする文字列"
56-
right={
57-
<ButtonToolbar>
58-
<ClearButton name="input" />
59-
</ButtonToolbar>
60-
}
61-
/>
62-
}
63-
>
64-
<Controller
65-
render={({ field }) => <Editor {...field} ref={null} />}
66-
name="input"
67-
control={control}
68-
/>
69-
</Panel>
70-
</Col>
71-
<Col xs={24} md={12}>
72-
<Panel bordered header={<PanelHeader title="文字数" />}>
73-
<ConvertedForm layout="horizontal">
74-
<LabelInput label="文字数(スペース込み)" value={characterCountValue} />
75-
<LabelInput label="文字数(スペース除)" value={characterCountWithoutSpaceValue} />
76-
<LabelInput label="スペースの数" value={spaceCharacterCountValue} />
77-
<LabelInput label="全角文字数" value={fullWidthCharacterCountValue} />
78-
<LabelInput label="半角文字数" value={halfWidthCharacterCountValue} />
79-
<LabelInput label="行数" value={linesCountValue} />
80-
</ConvertedForm>
81-
</Panel>
82-
</Col>
83-
</Row>
84-
</Grid>
85-
</AppLayout>
86-
</FormProvider>
87-
);
8+
const CharacterCountPage: FC = () => {
9+
return <CharacterCount />;
8810
};
8911

90-
const ConvertedForm = styled(Form)`
91-
> div:not(:last-child) {
92-
margin-bottom: 12px !important;
93-
}
94-
`;
95-
9612
export default CharacterCountPage;

‎src/app/character_replace/CharacterReplace.tsx‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
'use client';
2+
import styled from '@emotion/styled';
3+
import React, { FC } from 'react';
4+
import { Controller, FormProvider } from 'react-hook-form';
5+
import { ButtonToolbar, Col, Form, Grid, IconButton, Panel, PanelGroup, Row } from 'rsuite';
6+
import { AppLayout } from '@/Layout/App';
7+
import { AddButton } from '@/app/character_replace/AddButton';
8+
import { DeleteButton } from '@/app/character_replace/DeleteButton';
9+
import { useCharacterReplace } from '@/app/character_replace/useCharacterReplace';
10+
import { CopyButton } from '@/components/common/CopyButton';
11+
import { Editor } from '@/components/common/Editor';
12+
import { ClearButton } from '@/components/common/Form/ClearButton';
13+
import { Input } from '@/components/common/Form/Input';
14+
import { PageTitle } from '@/components/common/PageTitle';
15+
import { PanelHeader } from '@/components/common/PanelHeader';
16+
17+
export const CharacterReplace: FC = () => {
18+
const title = '文字列置換';
19+
const { methods, output, countUp, countDown, countDownDisabled, countUpDisabled, numberArray } =
20+
useCharacterReplace();
21+
22+
return (
23+
<FormProvider {...methods}>
24+
<AppLayout>
25+
<Grid fluid>
26+
<PageTitle title={title} />
27+
<Row gutter={5}>
28+
<Col xs={24} md={12}>
29+
<PanelGroup bordered>
30+
<Panel
31+
bordered
32+
header={
33+
<PanelHeader
34+
title="入力文字"
35+
right={
36+
<ButtonToolbar>
37+
<ClearButton name="input" />
38+
</ButtonToolbar>
39+
}
40+
/>
41+
}
42+
>
43+
<Controller
44+
render={({ field }) => <Editor {...field} ref={null} />}
45+
name="input"
46+
control={methods.control}
47+
/>
48+
</Panel>
49+
<Panel
50+
bordered
51+
header={
52+
<PanelHeader
53+
title="置換する文字"
54+
right={
55+
<ButtonToolbar>
56+
<DeleteButton disabled={countDownDisabled} onClick={countDown} />
57+
<AddButton disabled={countUpDisabled} onClick={countUp} />
58+
</ButtonToolbar>
59+
}
60+
/>
61+
}
62+
>
63+
<InputForm layout="inline" autoComplete="off">
64+
{numberArray.map((i) => (
65+
<ReplaceLine key={i} label={`${i}`} control={methods.control} />
66+
))}
67+
</InputForm>
68+
</Panel>
69+
</PanelGroup>
70+
</Col>
71+
<Col xs={24} md={12}>
72+
<Panel
73+
bordered
74+
header={
75+
<PanelHeader
76+
title="置換後"
77+
right={
78+
<ButtonToolbar>
79+
<CopyButton copyText={output} />
80+
</ButtonToolbar>
81+
}
82+
/>
83+
}
84+
>
85+
<Editor value={output} />
86+
</Panel>
87+
</Col>
88+
</Row>
89+
</Grid>
90+
</AppLayout>
91+
</FormProvider>
92+
);
93+
};
94+
95+
const ReplaceLine: FC<{
96+
label: string;
97+
control: any;
98+
}> = ({ label, control }) => {
99+
return (
100+
<Grid fluid>
101+
<Row>
102+
<Col xs={2} md={1}>
103+
<Label>{label}</Label>
104+
</Col>
105+
<Col xs={10}>
106+
<Controller
107+
name={`target_${label}`}
108+
control={control}
109+
defaultValue=""
110+
render={({ field }) => <Input {...field} ref={null} />}
111+
/>
112+
</Col>
113+
<Col xs={2} md={1}>
114+
<Mark>→</Mark>
115+
</Col>
116+
<Col xs={10}>
117+
<Controller
118+
name={`replace_${label}`}
119+
control={control}
120+
defaultValue=""
121+
render={({ field }) => <Input {...field} ref={null} />}
122+
/>
123+
</Col>
124+
</Row>
125+
</Grid>
126+
);
127+
};
128+
129+
const InputForm = styled(Form)`
130+
> div:last-child {
131+
margin-bottom: 0 !important;
132+
}
133+
`;
134+
135+
const Label = styled(Form.ControlLabel)`
136+
width: 15px !important;
137+
`;
138+
139+
const Mark = styled.div`
140+
margin-bottom: auto;
141+
margin-top: 8px;
142+
text-align: center;
143+
vertical-align: top;
144+
`;

0 commit comments

Comments
 (0)