Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 418d56b

Browse files
Refactored Topics page and components
1 parent 9252d0e commit 418d56b

File tree

9 files changed

+75
-34
lines changed

9 files changed

+75
-34
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./FollowTopicButton";

‎frontend/src/pages/Topics/TopicItem/TopicItem.tsx‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,31 @@
11
import React, { FC, ReactElement } from "react";
22
import { Typography } from "@material-ui/core";
3-
import { useDispatch } from "react-redux";
43

54
import { useTopicItemStyles } from "./TopicItemStyles";
65
import { TopicIconContained } from "../../../icons";
7-
import { processFollowTopic } from "../../../store/ducks/topics/actionCreators";
86
import { TopicResponse } from "../../../types/topic";
9-
import UnfollowTopicButton from "./UnfollowTopicButton/UnfollowTopicButton";
10-
import FollowTopicButton from "./FollowTopicButton/FollowTopicButton";
11-
import { capitalize } from "../../../util/text-formatter";
7+
import UnfollowTopicButton from "./UnfollowTopicButton";
8+
import FollowTopicButton from "./FollowTopicButton";
9+
import { useTopicItem } from "./useTopicItem";
1210

1311
interface TopicItemProps {
1412
topic: TopicResponse;
1513
}
1614

1715
const TopicItem: FC<TopicItemProps> = ({ topic }): ReactElement => {
1816
const classes = useTopicItemStyles();
19-
const dispatch = useDispatch();
20-
21-
const onClickFollowTopic = (): void => {
22-
dispatch(processFollowTopic({ topicsId: topic.id, topicCategory: topic.topicCategory }));
23-
};
24-
25-
const converterCategory = (category: string): string | null => {
26-
if (!category) {
27-
return null;
28-
} else {
29-
const categoryString = category.replace(/_/g, " ").toLowerCase();
30-
return capitalize(categoryString);
31-
}
32-
};
17+
const { onClickFollowTopic, converterCategory } = useTopicItem(topic);
3318

3419
return (
3520
<div className={classes.container}>
3621
<div className={classes.iconCircle}>
3722
{TopicIconContained}
3823
</div>
3924
<div className={classes.topicInfo}>
40-
<Typography variant={"h6"} component={"div"}>
25+
<Typography variant="h6" component="div">
4126
{topic.topicName}
4227
</Typography>
43-
<Typography variant={"subtitle1"} component={"div"}>
28+
<Typography variant="subtitle1" component="div">
4429
{converterCategory(topic.topicCategory)}
4530
</Typography>
4631
</div>

‎frontend/src/pages/Topics/TopicItem/UnfollowTopicButton/UnfollowTopicButton.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React, { FC, ReactElement,useState } from "react";
1+
import React, { FC, ReactElement } from "react";
22
import Button from "@material-ui/core/Button/Button";
3-
import { useTranslation } from "react-i18next";
43

54
import { useUnfollowTopicButtonStyles } from "./UnfollowTopicButtonStyles";
65
import UnfollowModal from "../../../../components/UnfollowModal/UnfollowModal";
6+
import { useUnfollowTopicButton } from "./useUnfollowTopicButton";
77
import { useModalWindow } from "../../../../hook/useModalWindow";
88

99
interface UnfollowTopicButtonProps {
@@ -13,22 +13,21 @@ interface UnfollowTopicButtonProps {
1313

1414
const UnfollowTopicButton: FC<UnfollowTopicButtonProps> = ({ topicName, onClickFollowTopic }): ReactElement => {
1515
const classes = useUnfollowTopicButtonStyles();
16-
const { t } = useTranslation();
17-
const [btnText, setBtnText] = useState<string>(t("FOLLOWING", { defaultValue: "Following" }));
1816
const { visibleModalWindow, onOpenModalWindow, onCloseModalWindow } = useModalWindow();
19-
20-
const handleClickOpenUnfollowModal = (event: React.MouseEvent<HTMLButtonElement>): void => {
21-
event.preventDefault();
22-
onOpenModalWindow();
23-
};
17+
const {
18+
btnText,
19+
handleMouseOver,
20+
handleMouseLeave,
21+
handleClickOpenUnfollowModal,
22+
} = useUnfollowTopicButton(onClickFollowTopic, onOpenModalWindow);
2423

2524
return (
2625
<>
2726
<Button
2827
className={classes.containedButton}
2928
onClick={handleClickOpenUnfollowModal}
30-
onMouseOver={()=>setBtnText(t("UNFOLLOW",{defaultValue: "Unfollow"}))}
31-
onMouseLeave={()=>setBtnText(t("FOLLOWING",{defaultValue: "Following"}))}
29+
onMouseOver={handleMouseOver}
30+
onMouseLeave={handleMouseLeave}
3231
color="primary"
3332
variant="contained"
3433
size="small"
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./UnfollowTopicButton";
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { MouseEvent, useState } from "react";
2+
import { useTranslation } from "react-i18next";
3+
4+
export const useUnfollowTopicButton = (onClickFollowTopic: () => void, onOpenModalWindow: () => void) => {
5+
const { t } = useTranslation();
6+
const [btnText, setBtnText] = useState(t("FOLLOWING", { defaultValue: "Following" }));
7+
8+
const handleMouseOver = (): void => {
9+
setBtnText(t("UNFOLLOW", { defaultValue: "Unfollow" }));
10+
};
11+
12+
const handleMouseLeave = (): void => {
13+
setBtnText(t("FOLLOWING", { defaultValue: "Following" }));
14+
};
15+
16+
const handleClickOpenUnfollowModal = (event: MouseEvent<HTMLButtonElement>): void => {
17+
event.preventDefault();
18+
onOpenModalWindow();
19+
};
20+
21+
return {
22+
btnText,
23+
onClickFollowTopic,
24+
handleMouseOver,
25+
handleMouseLeave,
26+
handleClickOpenUnfollowModal
27+
};
28+
};

‎frontend/src/pages/Topics/TopicItem/__tests__/TopicItem.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Button } from "@material-ui/core";
33

44
import { createMockRootState, mockDispatch, mountWithStore } from "../../../../util/test-utils/test-helper";
55
import { mockTopics } from "../../../../util/test-utils/mock-test-data";
6-
import FollowTopicButton from "../FollowTopicButton/FollowTopicButton";
7-
import UnfollowTopicButton from "../UnfollowTopicButton/UnfollowTopicButton";
6+
import FollowTopicButton from "../FollowTopicButton";
7+
import UnfollowTopicButton from "../UnfollowTopicButton";
88
import { TopicsActionsType } from "../../../../store/ducks/topics/contracts/actionTypes";
99
import TopicItem from "../TopicItem";
1010

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./TopicItem";
Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { useCallback } from "react";
2+
import { useDispatch } from "react-redux";
3+
4+
import { processFollowTopic } from "../../../store/ducks/topics/actionCreators";
5+
import { capitalize } from "../../../util/text-formatter";
6+
import { TopicResponse } from "../../../types/topic";
7+
8+
export const useTopicItem = (topic: TopicResponse) => {
9+
const dispatch = useDispatch();
10+
11+
const onClickFollowTopic = useCallback((): void => {
12+
dispatch(processFollowTopic({ topicsId: topic.id, topicCategory: topic.topicCategory }));
13+
}, [dispatch, topic]);
14+
15+
const converterCategory = useCallback((category: string): string | null => {
16+
if (!category) {
17+
return null;
18+
} else {
19+
const categoryString = category.replace(/_/g, " ").toLowerCase();
20+
return capitalize(categoryString);
21+
}
22+
}, []);
23+
24+
return { onClickFollowTopic, converterCategory };
25+
};
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./TopicsCarousel";

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /