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 ac51302

Browse files
Refactored Lists page and components
1 parent 3e38423 commit ac51302

File tree

22 files changed

+139
-96
lines changed

22 files changed

+139
-96
lines changed

‎frontend/src/pages/Lists/ListsHeader/CreateListsModal/CreateListsModal.tsx‎

Lines changed: 15 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,33 @@
1-
import React, { FC, ReactElement, useState } from "react";
2-
import { useDispatch } from "react-redux";
1+
import React, { FC, ReactElement } from "react";
32
import { Button, Checkbox, Dialog, DialogContent, Typography } from "@material-ui/core";
4-
import { Controller, useForm } from "react-hook-form";
5-
import { yupResolver } from "@hookform/resolvers/yup";
6-
import * as yup from "yup";
3+
import { Controller } from "react-hook-form";
74
import { useTranslation } from "react-i18next";
8-
import { TFunction } from "i18next";
95

106
import { useCreateListsModalStyles } from "./CreateListsModalStyles";
117
import UploadProfileImage from "../../../../components/UploadProfileImage/UploadProfileImage";
12-
import { ImageObj } from "../../../../components/AddTweetForm/AddTweetForm";
13-
import { uploadImage } from "../../../../util/upload-image-helper";
14-
import CreateListsModalInput from "./CreateListsModalInput/CreateListsModalInput";
15-
import { createList } from "../../../../store/ducks/lists/actionCreators";
16-
import { wallpapers } from "../../../../util/wallpapers";
8+
import CreateListsModalInput from "./CreateListsModalInput";
179
import DialogTitleComponent from "../../../../components/DialogTitleComponent/DialogTitleComponent";
1810
import { useGlobalStyles } from "../../../../util/globalClasses";
11+
import { useCreateListsModal } from "./useCreateListsModal";
1912

2013
interface CreateListsModalProps {
2114
visible?: boolean;
2215
onClose: () => void;
2316
}
2417

25-
interface CreateListsModalFormProps {
26-
listName: string;
27-
description: string;
28-
isPrivate: boolean;
29-
wallpaper: string;
30-
}
31-
32-
const createListsModalFormSchema = (t: TFunction<"translation", undefined>) => yup.object().shape({
33-
listName: yup.string().min(1, t("LIST_NAME_ERROR", { defaultValue: "List Name can’t be blank" })).required()
34-
});
35-
3618
const CreateListsModal: FC<CreateListsModalProps> = ({ visible, onClose }): ReactElement | null => {
3719
const globalClasses = useGlobalStyles({ dialogContentHeight: 650 });
3820
const classes = useCreateListsModalStyles();
39-
const dispatch = useDispatch();
4021
const { t } = useTranslation();
41-
const [wallpaper, setWallpaper] = useState<ImageObj>();
42-
const { control, watch, handleSubmit, formState: { errors } } = useForm<CreateListsModalFormProps>({
43-
resolver: yupResolver(createListsModalFormSchema(t)),
44-
mode: "onChange"
45-
});
46-
47-
const onSubmit = async (data: CreateListsModalFormProps): Promise<void> => {
48-
const altWallpaper = Math.floor(Math.random() * wallpapers.length);
49-
let wallpaperResponse: string | undefined = undefined;
50-
51-
if (wallpaper) {
52-
wallpaperResponse = await uploadImage(wallpaper.file);
53-
}
54-
55-
dispatch(createList({
56-
...data,
57-
altWallpaper: wallpapers[altWallpaper],
58-
wallpaper: wallpaperResponse
59-
}));
60-
onClose();
61-
};
22+
const {
23+
wallpaper,
24+
setWallpaper,
25+
control,
26+
watch,
27+
handleSubmit,
28+
errors,
29+
onSubmit
30+
} = useCreateListsModal(onClose);
6231

6332
if (!visible) {
6433
return null;
@@ -141,7 +110,8 @@ const CreateListsModal: FC<CreateListsModalProps> = ({ visible, onClose }): Reac
141110
</div>
142111
<Typography variant="subtitle2" component="div">
143112
{t("MAKE_PRIVATE_DESCRIPTION", {
144-
defaultValue: "When you make a List private, only you can see it." })}
113+
defaultValue: "When you make a List private, only you can see it."
114+
})}
145115
</Typography>
146116
</div>
147117
</div>
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./CreateListsModalInput";

‎frontend/src/pages/Lists/ListsHeader/CreateListsModal/__tests__/CreateListsModal.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { setImmediate } from "timers";
44

55
import { createMockRootState, mockDispatch, mountWithStore } from "../../../../../util/test-utils/test-helper";
66
import CreateListsModal from "../CreateListsModal";
7-
import CreateListsModalInput from "../CreateListsModalInput/CreateListsModalInput";
7+
import CreateListsModalInput from "../CreateListsModalInput";
88
import { ListsActionType } from "../../../../../store/ducks/lists/contracts/actionTypes";
99
import { wallpapers } from "../../../../../util/wallpapers";
1010
import { LoadingStatus } from "../../../../../types/common";
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./CreateListsModal";
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { useState } from "react";
2+
import { useDispatch } from "react-redux";
3+
import { useForm, SubmitHandler } from "react-hook-form";
4+
import { yupResolver } from "@hookform/resolvers/yup";
5+
import * as yup from "yup";
6+
import { TFunction } from "i18next";
7+
8+
import { ImageObj } from "../../../../components/AddTweetForm/AddTweetForm";
9+
import { uploadImage } from "../../../../util/upload-image-helper";
10+
import { createList } from "../../../../store/ducks/lists/actionCreators";
11+
import { wallpapers } from "../../../../util/wallpapers";
12+
import { useTranslation } from "react-i18next";
13+
14+
interface CreateListsModalFormProps {
15+
listName: string;
16+
description: string;
17+
isPrivate: boolean;
18+
wallpaper: string;
19+
}
20+
21+
export const useCreateListsModal = (onClose: () => void) => {
22+
const dispatch = useDispatch();
23+
const { t } = useTranslation();
24+
const [wallpaper, setWallpaper] = useState<ImageObj>();
25+
const createListsModalFormSchema = yup.object().shape({
26+
listName: yup.string().min(1, t("LIST_NAME_ERROR", { defaultValue: "List Name can’t be blank" })).required()
27+
});
28+
const { control, watch, handleSubmit, formState: { errors } } = useForm<CreateListsModalFormProps>({
29+
resolver: yupResolver(createListsModalFormSchema),
30+
mode: "onChange"
31+
});
32+
33+
const onSubmit: SubmitHandler<CreateListsModalFormProps> = async (data) => {
34+
const altWallpaper = Math.floor(Math.random() * wallpapers.length);
35+
let wallpaperResponse: string | undefined = undefined;
36+
37+
if (wallpaper) {
38+
wallpaperResponse = await uploadImage(wallpaper.file);
39+
}
40+
41+
dispatch(createList({
42+
...data,
43+
altWallpaper: wallpapers[altWallpaper],
44+
wallpaper: wallpaperResponse
45+
}));
46+
onClose();
47+
};
48+
49+
return {
50+
wallpaper,
51+
setWallpaper,
52+
control,
53+
watch,
54+
handleSubmit,
55+
errors,
56+
onSubmit
57+
};
58+
};

‎frontend/src/pages/Lists/ListsHeader/ListsHeader.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { LISTS_MEMBERSHIPS } from "../../../constants/path-constants";
1111
import PageHeaderWrapper from "../../../components/PageHeaderWrapper/PageHeaderWrapper";
1212
import { selectIsLoading } from "../../../store/ducks/lists/selectors";
1313
import { selectUserDataId, selectUserProfileUsername } from "../../../store/ducks/user/selectors";
14-
import CreateListsModal from "./CreateListsModal/CreateListsModal";
14+
import CreateListsModal from "./CreateListsModal";
1515
import { useModalWindow } from "../../../hook/useModalWindow";
1616
import { useClickAway } from "../../../hook/useClickAway";
1717

‎frontend/src/pages/Lists/ListsHeader/__tests__/ListsHeader.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React from "react";
2+
import { ClickAwayListener, IconButton } from "@material-ui/core";
23

34
import { createMockRootState, mountWithStore } from "../../../../util/test-utils/test-helper";
45
import { LoadingStatus } from "../../../../types/common";
56
import ListsHeader from "../ListsHeader";
67
import ActionIconButton from "../../../../components/ActionIconButton/ActionIconButton";
7-
import { ClickAwayListener, IconButton } from "@material-ui/core";
8-
import CreateListsModal from "../CreateListsModal/CreateListsModal";
8+
import CreateListsModal from "../CreateListsModal";
99
import CloseButton from "../../../../components/CloseButton/CloseButton";
1010

1111
describe("ListsHeader", () => {
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from "./ListsHeader";

‎frontend/src/pages/Lists/ListsMemberships/ListsMemberships.tsx‎

Lines changed: 4 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,20 @@
1-
import React, { FC, ReactElement, useEffect } from "react";
2-
import { useDispatch, useSelector } from "react-redux";
3-
import { useHistory, useParams } from "react-router-dom";
1+
import React, { FC, ReactElement } from "react";
42
import { Paper } from "@material-ui/core";
53
import { useTranslation } from "react-i18next";
64

7-
import { fetchUserProfile } from "../../../store/ducks/userProfile/actionCreators";
8-
import { selectUserProfile, selectUsersIsSuccessLoaded } from "../../../store/ducks/userProfile/selectors";
9-
import { selectUserDataId } from "../../../store/ducks/user/selectors";
10-
import { fetchUserListsById, resetListsState } from "../../../store/ducks/lists/actionCreators";
11-
import { selectIsLoading, selectUserListsItems } from "../../../store/ducks/lists/selectors";
125
import Spinner from "../../../components/Spinner/Spinner";
13-
import ListsItem from "../ListsItem/ListsItem";
6+
import ListsItem from "../ListsItem";
147
import { useGlobalStyles } from "../../../util/globalClasses";
15-
import { PROFILE } from "../../../constants/path-constants";
168
import { withDocumentTitle } from "../../../hoc/withDocumentTitle";
179
import PageHeaderWrapper from "../../../components/PageHeaderWrapper/PageHeaderWrapper";
1810
import EmptyPageDescription from "../../../components/EmptyPageDescription/EmptyPageDescription";
1911
import PageHeaderTitle from "../../../components/PageHeaderTitle/PageHeaderTitle";
12+
import { useListsMemberships } from "./useListsMemberships";
2013

2114
const ListsMemberships: FC = (): ReactElement => {
2215
const globalClasses = useGlobalStyles({});
23-
const dispatch = useDispatch();
24-
const history = useHistory();
25-
const params = useParams<{ id: string }>();
26-
const myProfileId = useSelector(selectUserDataId);
27-
const userProfile = useSelector(selectUserProfile);
28-
const isUserProfileLoaded = useSelector(selectUsersIsSuccessLoaded);
29-
const lists = useSelector(selectUserListsItems);
30-
const isListsLoading = useSelector(selectIsLoading);
3116
const { t } = useTranslation();
32-
33-
useEffect(() => {
34-
window.scrollTo(0, 0);
35-
dispatch(fetchUserProfile(Number(params.id)));
36-
37-
return () => {
38-
dispatch(resetListsState());
39-
};
40-
}, [params]);
41-
42-
useEffect(() => {
43-
if (isUserProfileLoaded && userProfile) {
44-
if ((userProfile.isPrivateProfile && !userProfile.isFollower) || userProfile.isMyProfileBlocked) {
45-
history.push(`${PROFILE}/${userProfile.id}`);
46-
} else {
47-
dispatch(fetchUserListsById(Number(params.id)));
48-
}
49-
}
50-
}, [isUserProfileLoaded]);
17+
const { lists, isListsLoading, myProfileId, userProfile } = useListsMemberships();
5118

5219
return (
5320
<Paper className={globalClasses.pageContainer} variant="outlined">

‎frontend/src/pages/Lists/ListsMemberships/__tests__/ListsMemberships.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ReactRouter from "react-router";
33

44
import { createMockRootState, mockDispatch, mountWithStore } from "../../../../util/test-utils/test-helper";
55
import { mockUser, mockUserLists, mockUserProfile } from "../../../../util/test-utils/mock-test-data";
6-
import ListsItem from "../../ListsItem/ListsItem";
6+
import ListsItem from "../../ListsItem";
77
import ListsMemberships from "../ListsMemberships";
88
import Spinner from "../../../../components/Spinner/Spinner";
99
import { ListsActionType } from "../../../../store/ducks/lists/contracts/actionTypes";

0 commit comments

Comments
(0)

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