Skip to content

Commit 28bd0a7

Browse files
dananjohnsondananjohnson
committed
[WIP] Remove react-collapse
1 parent 2c7abce commit 28bd0a7

File tree

3 files changed

+161
-147
lines changed

3 files changed

+161
-147
lines changed

‎client/src/frontend/components/reading-group/Settings/index.js‎

Lines changed: 19 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import React, { useState } from "react";
1+
import React from "react";
22
import PropTypes from "prop-types";
33
import { useDispatch } from "react-redux";
44
import { useHistory } from "react-router-dom";
5-
import { useTranslation } from "react-i18next";
6-
import { UnmountClosed as Collapse } from "react-collapse";
7-
import Layout from "backend/components/layout";
5+
import Collapse from "global/components/Collapse";
86
import { GroupSettingsForm } from "frontend/components/reading-group/forms";
9-
import { useArchiveOrActivateGroup } from "frontend/components/reading-group/hooks";
107
import withConfirmation from "hoc/withConfirmation";
11-
import { readingGroupsAPI, requests } from "api";
8+
import { requests } from "api";
129
import { entityStoreActions } from "actions";
1310
import lh from "helpers/linkHandler";
1411
import { DuplicatePanel } from "./panels";
12+
import DrawerHeader from "./panels/parts/DrawerHeader";
1513

1614
const { request } = entityStoreActions;
1715

@@ -21,32 +19,9 @@ function ReadingGroupSettings({
2119
confirm,
2220
onArchive
2321
}) {
24-
const { t } = useTranslation();
2522
const history = useHistory();
2623
const dispatch = useDispatch();
2724

28-
const membership =
29-
readingGroup.relationships.currentUserReadingGroupMembership;
30-
const {
31-
onClick: onArchiveClick,
32-
label: archiveLabel
33-
} = useArchiveOrActivateGroup({
34-
membership,
35-
confirm,
36-
callback: onArchive
37-
});
38-
const [showActionPanel, setShowActionPanel] = useState(null);
39-
40-
function handleDrawerToggle(action) {
41-
showActionPanel === action
42-
? setShowActionPanel(null)
43-
: setShowActionPanel(action);
44-
}
45-
46-
function cancelAction() {
47-
setShowActionPanel(null);
48-
}
49-
5025
function doDuplicate({ name, copyAnnotations, archive, openOnProceed }) {
5126
const options = {
5227
body: JSON.stringify({
@@ -79,79 +54,22 @@ function ReadingGroupSettings({
7954
});
8055
}
8156

82-
function handleDelete() {
83-
const heading = t("messages.reading_group.destroy_heading");
84-
const message = t("messages.reading_group.destroy_message");
85-
confirm(heading, message, () => {
86-
const call = readingGroupsAPI.destroy(readingGroup.id);
87-
const options = { removes: readingGroup };
88-
const readingGroupRequest = request(
89-
call,
90-
requests.feReadingGroupDestroy,
91-
options
92-
);
93-
dispatch(readingGroupRequest).promise.then(() => {
94-
history.push(lh.link("frontendMyReadingGroups"));
95-
});
96-
});
97-
}
98-
99-
const buttons = [
100-
...(readingGroup.links?.clone
101-
? [
102-
{
103-
onClick: () => handleDrawerToggle("duplicate"),
104-
icon: "duplicate24",
105-
label: t("actions.duplicate"),
106-
className: "utility-button__icon",
107-
ariaProps: {
108-
"aria-expanded": showActionPanel === "duplicate",
109-
"aria-controls": "group-settings-duplicate-region"
110-
}
111-
}
112-
]
113-
: []),
114-
...(membership
115-
? [
116-
{
117-
onClick: onArchiveClick,
118-
icon: "archive24",
119-
label: archiveLabel,
120-
className: "utility-button__icon"
121-
}
122-
]
123-
: []),
124-
{
125-
onClick: handleDelete,
126-
icon: "delete24",
127-
label: t("actions.delete"),
128-
className: "utility-button__icon utility-button__icon--notice"
129-
}
130-
];
131-
13257
return (
133-
<section>
134-
<Layout.DrawerHeader
135-
title={t("forms.edit_group.title")}
136-
buttons={buttons}
137-
buttonLayout="inline"
138-
small
139-
/>
140-
<div role="region" id="group-settings-duplicate-region">
141-
<Collapse isOpened={showActionPanel === "duplicate"}>
142-
<DuplicatePanel
143-
readingGroup={readingGroup}
144-
onProceed={doDuplicate}
145-
onCancel={cancelAction}
146-
/>
147-
</Collapse>
148-
</div>
149-
<GroupSettingsForm
150-
mode="edit"
151-
group={readingGroup}
152-
onSuccess={closeDrawer}
153-
/>
154-
</section>
58+
<Collapse>
59+
<section>
60+
<DrawerHeader
61+
readingGroup={readingGroup}
62+
confirm={confirm}
63+
onArchive={onArchive}
64+
/>
65+
<DuplicatePanel readingGroup={readingGroup} onProceed={doDuplicate} />
66+
<GroupSettingsForm
67+
mode="edit"
68+
group={readingGroup}
69+
onSuccess={closeDrawer}
70+
/>
71+
</section>
72+
</Collapse>
15573
);
15674
}
15775

‎client/src/frontend/components/reading-group/Settings/panels/composed/Duplicate.js‎

Lines changed: 52 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import React, { useState } from "react";
22
import PropTypes from "prop-types";
33
import { useUIDSeed } from "react-uid";
44
import { useTranslation } from "react-i18next";
5+
import Collapse from "global/components/Collapse";
6+
import useCollapseContext from "global/components/Collapse/useCollapseContext";
57
import Panel from "../parts/Panel";
68
import Checkbox from "../parts/Checkbox";
79
import Form from "global/components/form";
810
import * as Styled from "./styles";
911

10-
function DuplicatePanel({ readingGroup, onProceed, onCancel }) {
12+
function DuplicatePanel({ readingGroup, onProceed }) {
1113
const uidSeed = useUIDSeed();
1214
const { t } = useTranslation();
1315
const [name, setName] = useState(readingGroup.attributes.name);
@@ -20,52 +22,56 @@ function DuplicatePanel({ readingGroup, onProceed, onCancel }) {
2022
onProceed({ name, copyAnnotations, archive, openOnProceed });
2123
}
2224

25+
const { toggleVisible } = useCollapseContext();
26+
2327
return (
24-
<Panel
25-
label={t("forms.edit_group.duplicate.label")}
26-
heading={t("forms.edit_group.duplicate.heading", {
27-
group: readingGroup.attributes.name
28-
})}
29-
instructions={t("forms.edit_group.duplicate.instructions")}
30-
onProceed={handleProceed}
31-
onCancel={onCancel}
32-
>
33-
<Styled.Inputs className="form-secondary">
34-
<div>
35-
<Form.Label
36-
id={uidSeed("name")}
37-
label={t("forms.edit_group.duplicate.group_name")}
38-
styleType="tertiary"
39-
/>
40-
<Styled.Input
41-
id={uidSeed("name")}
42-
type="text"
43-
value={name}
44-
onChange={event => setName(event.target.value)}
45-
/>
46-
</div>
47-
<div>
48-
<Checkbox
49-
id={uidSeed("copyAnnotations")}
50-
label={t("forms.edit_group.duplicate.copy_annotations")}
51-
checked={copyAnnotations}
52-
onChange={event => setCopyAnnotations(event.target.checked)}
53-
/>
54-
<Checkbox
55-
id={uidSeed("archive")}
56-
label={t("forms.edit_group.duplicate.archive")}
57-
checked={archive}
58-
onChange={event => setArchive(event.target.checked)}
59-
/>
60-
<Checkbox
61-
id={uidSeed("openOnProceed")}
62-
label={t("forms.edit_group.duplicate.open_after")}
63-
checked={openOnProceed}
64-
onChange={event => setOpenOnProceed(event.target.checked)}
65-
/>
66-
</div>
67-
</Styled.Inputs>
68-
</Panel>
28+
<Collapse.Content>
29+
<Panel
30+
label={t("forms.edit_group.duplicate.label")}
31+
heading={t("forms.edit_group.duplicate.heading", {
32+
group: readingGroup.attributes.name
33+
})}
34+
instructions={t("forms.edit_group.duplicate.instructions")}
35+
onProceed={handleProceed}
36+
onCancel={toggleVisible}
37+
>
38+
<Styled.Inputs className="form-secondary">
39+
<div>
40+
<Form.Label
41+
id={uidSeed("name")}
42+
label={t("forms.edit_group.duplicate.group_name")}
43+
styleType="tertiary"
44+
/>
45+
<Styled.Input
46+
id={uidSeed("name")}
47+
type="text"
48+
value={name}
49+
onChange={event => setName(event.target.value)}
50+
/>
51+
</div>
52+
<div>
53+
<Checkbox
54+
id={uidSeed("copyAnnotations")}
55+
label={t("forms.edit_group.duplicate.copy_annotations")}
56+
checked={copyAnnotations}
57+
onChange={event => setCopyAnnotations(event.target.checked)}
58+
/>
59+
<Checkbox
60+
id={uidSeed("archive")}
61+
label={t("forms.edit_group.duplicate.archive")}
62+
checked={archive}
63+
onChange={event => setArchive(event.target.checked)}
64+
/>
65+
<Checkbox
66+
id={uidSeed("openOnProceed")}
67+
label={t("forms.edit_group.duplicate.open_after")}
68+
checked={openOnProceed}
69+
onChange={event => setOpenOnProceed(event.target.checked)}
70+
/>
71+
</div>
72+
</Styled.Inputs>
73+
</Panel>
74+
</Collapse.Content>
6975
);
7076
}
7177

‎client/src/frontend/components/reading-group/Settings/panels/parts/DrawerHeader.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from "react";
2+
import PropTypes from "prop-types";
3+
import { useTranslation } from "react-i18next";
4+
import Layout from "backend/components/layout";
5+
import { useArchiveOrActivateGroup } from "frontend/components/reading-group/hooks";
6+
import useCollapseContext from "global/components/Collapse/useCollapseContext";
7+
import { readingGroupsAPI, requests } from "api";
8+
import { entityStoreActions } from "actions";
9+
10+
const { request } = entityStoreActions;
11+
12+
export default function DrawerHeader({ readingGroup, confirm, onArchive }) {
13+
const { t } = useTranslation();
14+
15+
const membership =
16+
readingGroup.relationships.currentUserReadingGroupMembership;
17+
const {
18+
onClick: onArchiveClick,
19+
label: archiveLabel
20+
} = useArchiveOrActivateGroup({
21+
membership,
22+
confirm,
23+
callback: onArchive
24+
});
25+
26+
function handleDelete() {
27+
const heading = t("messages.reading_group.destroy_heading");
28+
const message = t("messages.reading_group.destroy_message");
29+
confirm(heading, message, () => {
30+
const call = readingGroupsAPI.destroy(readingGroup.id);
31+
const options = { removes: readingGroup };
32+
const readingGroupRequest = request(
33+
call,
34+
requests.feReadingGroupDestroy,
35+
options
36+
);
37+
dispatch(readingGroupRequest).promise.then(() => {
38+
history.push(lh.link("frontendMyReadingGroups"));
39+
});
40+
});
41+
}
42+
43+
const { toggleProps } = useCollapseContext();
44+
45+
const buttons = [
46+
...(readingGroup.links?.clone
47+
? [
48+
{
49+
icon: "duplicate24",
50+
label: t("actions.duplicate"),
51+
className: "utility-button__icon",
52+
...toggleProps
53+
}
54+
]
55+
: []),
56+
...(membership
57+
? [
58+
{
59+
onClick: onArchiveClick,
60+
icon: "archive24",
61+
label: archiveLabel,
62+
className: "utility-button__icon"
63+
}
64+
]
65+
: []),
66+
{
67+
onClick: handleDelete,
68+
icon: "delete24",
69+
label: t("actions.delete"),
70+
className: "utility-button__icon utility-button__icon--notice"
71+
}
72+
];
73+
74+
return (
75+
<Layout.DrawerHeader
76+
title={t("forms.edit_group.title")}
77+
buttons={buttons}
78+
buttonLayout="inline"
79+
small
80+
/>
81+
);
82+
}
83+
84+
DrawerHeader.displayName = "ReadingGroup.Settings.DrawerHeader";
85+
86+
DrawerHeader.propTypes = {
87+
readingGroup: PropTypes.object.isRequired,
88+
confirm: PropTypes.func.isRequired,
89+
onArchive: PropTypes.func
90+
};

0 commit comments

Comments
 (0)