yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Convert GroupListItem, AddGroupsToCollection, AddPeopleToCollection, Drafts to functional components

Browse Source
This commit is contained in:
Tom Moor
2023-01-02 11:26:51 -05:00
parent 8c54f6330f
commit 4ccff8cb29
6 changed files with 226 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
app/components/GroupListItem.tsx
View File

@@ -1,10 +1,9 @@
import { observable } from "mobx";
import { observer } from "mobx-react";
import { GroupIcon } from "outline-icons";
import * as React from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { MAX_AVATAR_DISPLAY } from "@shared/constants";
import RootStore from "~/stores/RootStore";
import CollectionGroupMembership from "~/models/CollectionGroupMembership";
import Group from "~/models/Group";
import GroupMembers from "~/scenes/GroupMembers";
@@ -12,10 +11,11 @@ import Facepile from "~/components/Facepile";
import Flex from "~/components/Flex";
import ListItem from "~/components/List/Item";
import Modal from "~/components/Modal";
import withStores from "~/components/withStores";
import useBoolean from "~/hooks/useBoolean";
import useStores from "~/hooks/useStores";
import NudeButton from "./NudeButton";
type Props = RootStore & {
type Props = {
group: Group;
membership?: CollectionGroupMembership;
showFacepile?: boolean;
@@ -23,71 +23,57 @@ type Props = RootStore & {
renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
};
@observer
class GroupListItem extends React.Component<Props> {
@observable
membersModalOpen = false;
function GroupListItem({ group, showFacepile, renderActions }: Props) {
const { groupMemberships } = useStores();
const { t } = useTranslation();
const [
membersModalOpen,
setMembersModalOpen,
setMembersModalClosed,
] = useBoolean();
const memberCount = group.memberCount;
const membershipsInGroup = groupMemberships.inGroup(group.id);
const users = membershipsInGroup
.slice(0, MAX_AVATAR_DISPLAY)
.map((gm) => gm.user);
const overflow = memberCount - users.length;
handleMembersModalOpen = () => {
this.membersModalOpen = true;
};
handleMembersModalClose = () => {
this.membersModalOpen = false;
};
render() {
const { group, groupMemberships, showFacepile, renderActions } = this.props;
const memberCount = group.memberCount;
const membershipsInGroup = groupMemberships.inGroup(group.id);
const users = membershipsInGroup
.slice(0, MAX_AVATAR_DISPLAY)
.map((gm) => gm.user);
const overflow = memberCount - users.length;
return (
<>
<ListItem
image={
<Image>
<GroupIcon size={24} />
</Image>
}
title={
<Title onClick={this.handleMembersModalOpen}>{group.name}</Title>
}
subtitle={
<>
{memberCount} member{memberCount === 1 ? "" : "s"}
</>
}
actions={
<Flex align="center" gap={8}>
{showFacepile && (
<NudeButton
width="auto"
height="auto"
onClick={this.handleMembersModalOpen}
>
<Facepile users={users} overflow={overflow} />
</NudeButton>
)}
{renderActions({
openMembersModal: this.handleMembersModalOpen,
})}
</Flex>
}
/>
<Modal
title="Group members"
onRequestClose={this.handleMembersModalClose}
isOpen={this.membersModalOpen}
>
<GroupMembers group={group} />
</Modal>
</>
);
}
return (
<>
<ListItem
image={
<Image>
<GroupIcon size={24} />
</Image>
}
title={<Title onClick={setMembersModalOpen}>{group.name}</Title>}
subtitle={t("{{ count }} members", { count: memberCount })}
actions={
<Flex align="center" gap={8}>
{showFacepile && (
<NudeButton
width="auto"
height="auto"
onClick={setMembersModalOpen}
>
<Facepile users={users} overflow={overflow} />
</NudeButton>
)}
{renderActions({
openMembersModal: setMembersModalOpen,
})}
</Flex>
}
/>
<Modal
title={t("Group members")}
onRequestClose={setMembersModalClosed}
isOpen={membersModalOpen}
>
<GroupMembers group={group} />
</Modal>
</>
);
}
const Image = styled(Flex)`
@@ -106,4 +92,4 @@ const Title = styled.span`
}
`;
export default withStores(GroupListItem);
export default observer(GroupListItem);

1
app/scenes/CollectionPermissions/AddGroupsToCollection.tsx
View File

@@ -20,7 +20,6 @@ import useStores from "~/hooks/useStores";
type Props = {
collection: Collection;
onSubmit: () => void;
};
function AddGroupsToCollection(props: Props) {

193
app/scenes/CollectionPermissions/AddPeopleToCollection.tsx
View File

@@ -1,9 +1,6 @@
import { debounce } from "lodash";
import { observable } from "mobx";
import { observer } from "mobx-react";
import * as React from "react";
import { WithTranslation, withTranslation } from "react-i18next";
import RootStore from "~/stores/RootStore";
import { useTranslation } from "react-i18next";
import Collection from "~/models/Collection";
import User from "~/models/User";
import Invite from "~/scenes/Invite";
@@ -14,51 +11,51 @@ import Input from "~/components/Input";
import Modal from "~/components/Modal";
import PaginatedList from "~/components/PaginatedList";
import Text from "~/components/Text";
import withStores from "~/components/withStores";
import useBoolean from "~/hooks/useBoolean";
import useCurrentTeam from "~/hooks/useCurrentTeam";
import useCurrentUser from "~/hooks/useCurrentUser";
import useDebouncedCallback from "~/hooks/useDebouncedCallback";
import useStores from "~/hooks/useStores";
import useToasts from "~/hooks/useToasts";
import MemberListItem from "./components/MemberListItem";
type Props = WithTranslation &
RootStore & {
collection: Collection;
onSubmit: () => void;
type Props = {
collection: Collection;
};
function AddPeopleToCollection({ collection }: Props) {
const { memberships, users } = useStores();
const { showToast } = useToasts();
const user = useCurrentUser();
const team = useCurrentTeam();
const { t } = useTranslation();
const [
inviteModalOpen,
setInviteModalOpen,
setInviteModalClosed,
] = useBoolean();
const [query, setQuery] = React.useState("");
const handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
setQuery(ev.target.value);
debouncedFetch(ev.target.value);
};
@observer
class AddPeopleToCollection extends React.Component<Props> {
@observable
inviteModalOpen = false;
@observable
query = "";
handleInviteModalOpen = () => {
this.inviteModalOpen = true;
};
handleInviteModalClose = () => {
this.inviteModalOpen = false;
};
handleFilter = (ev: React.ChangeEvent<HTMLInputElement>) => {
this.query = ev.target.value;
this.debouncedFetch();
};
debouncedFetch = debounce(() => {
this.props.users.fetchPage({
query: this.query,
});
}, 250);
handleAddUser = (user: User) => {
const { t } = this.props;
const debouncedFetch = useDebouncedCallback(
(query) =>
users.fetchPage({
query,
}),
250
);
const handleAddUser = (user: User) => {
try {
this.props.memberships.create({
collectionId: this.props.collection.id,
memberships.create({
collectionId: collection.id,
userId: user.id,
});
this.props.toasts.showToast(
showToast(
t("{{ userName }} was added to the collection", {
userName: user.name,
}),
@@ -67,71 +64,63 @@ class AddPeopleToCollection extends React.Component<Props> {
}
);
} catch (err) {
this.props.toasts.showToast(t("Could not add user"), {
showToast(t("Could not add user"), {
type: "error",
});
}
};
render() {
const { users, collection, auth, t } = this.props;
const { user, team } = auth;
if (!user || !team) {
return null;
}
return (
<Flex column>
<Text type="secondary">
{t("Need to add someone who’s not yet on the team yet?")}{" "}
<ButtonLink onClick={this.handleInviteModalOpen}>
{t("Invite people to {{ teamName }}", {
teamName: team.name,
})}
</ButtonLink>
.
</Text>
<Input
type="search"
placeholder={`${t("Search by name")}…`}
value={this.query}
onChange={this.handleFilter}
label={t("Search people")}
autoFocus
labelHidden
flex
/>
<PaginatedList
empty={
this.query ? (
<Empty>{t("No people matching your search")}</Empty>
) : (
<Empty>{t("No people left to add")}</Empty>
)
}
items={users
.notInCollection(collection.id, this.query)
.filter((member) => member.id !== user.id)}
fetch={this.query ? undefined : users.fetchPage}
renderItem={(item: User) => (
<MemberListItem
key={item.id}
user={item}
onAdd={() => this.handleAddUser(item)}
canEdit
/>
)}
/>
<Modal
title={t("Invite people")}
onRequestClose={this.handleInviteModalClose}
isOpen={this.inviteModalOpen}
>
<Invite onSubmit={this.handleInviteModalClose} />
</Modal>
</Flex>
);
}
return (
<Flex column>
<Text type="secondary">
{t("Need to add someone who’s not yet on the team yet?")}{" "}
<ButtonLink onClick={setInviteModalOpen}>
{t("Invite people to {{ teamName }}", {
teamName: team.name,
})}
</ButtonLink>
.
</Text>
<Input
type="search"
placeholder={`${t("Search by name")}…`}
value={query}
onChange={handleFilter}
label={t("Search people")}
autoFocus
labelHidden
flex
/>
<PaginatedList
empty={
query ? (
<Empty>{t("No people matching your search")}</Empty>
) : (
<Empty>{t("No people left to add")}</Empty>
)
}
items={users
.notInCollection(collection.id, query)
.filter((member) => member.id !== user.id)}
fetch={query ? undefined : users.fetchPage}
renderItem={(item: User) => (
<MemberListItem
key={item.id}
user={item}
onAdd={() => handleAddUser(item)}
canEdit
/>
)}
/>
<Modal
title={t("Invite people")}
onRequestClose={setInviteModalClosed}
isOpen={inviteModalOpen}
>
<Invite onSubmit={setInviteModalClosed} />
</Modal>
</Flex>
);
}
export default withTranslation()(withStores(AddPeopleToCollection));
export default observer(AddPeopleToCollection);

10
app/scenes/CollectionPermissions/index.tsx
View File

@@ -331,10 +331,7 @@ function CollectionPermissions({ collectionId }: Props) {
onRequestClose={handleAddGroupModalClose}
isOpen={addGroupModalOpen}
>
<AddGroupsToCollection
collection={collection}
onSubmit={handleAddGroupModalClose}
/>
<AddGroupsToCollection collection={collection} />
</Modal>
<Modal
title={t(`Add people to {{ collectionName }}`, {
@@ -343,10 +340,7 @@ function CollectionPermissions({ collectionId }: Props) {
onRequestClose={handleAddMemberModalClose}
isOpen={addMemberModalOpen}
>
<AddPeopleToCollection
collection={collection}
onSubmit={handleAddMemberModalClose}
/>
<AddPeopleToCollection collection={collection} />
</Modal>
</Flex>
);

177
app/scenes/Drafts.tsx
View File

@@ -1,14 +1,12 @@
import { observable } from "mobx";
import { observer } from "mobx-react";
import { EditIcon } from "outline-icons";
import queryString from "query-string";
import * as React from "react";
import { WithTranslation, withTranslation } from "react-i18next";
import { RouteComponentProps } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useHistory, useLocation } from "react-router-dom";
import styled from "styled-components";
import RootStore from "~/stores/RootStore";
import { DateFilter as TDateFilter } from "@shared/types";
import CollectionFilter from "~/scenes/Search/components/CollectionFilter";
import DateFilter from "~/scenes/Search/components/DateFilter";
import { Action } from "~/components/Actions";
import Empty from "~/components/Empty";
import Flex from "~/components/Flex";
@@ -17,34 +15,27 @@ import InputSearchPage from "~/components/InputSearchPage";
import PaginatedDocumentList from "~/components/PaginatedDocumentList";
import Scene from "~/components/Scene";
import Subheading from "~/components/Subheading";
import withStores from "~/components/withStores";
import useStores from "~/hooks/useStores";
import NewDocumentMenu from "~/menus/NewDocumentMenu";
import DateFilter from "./Search/components/DateFilter";
type Props = WithTranslation & RouteComponentProps & RootStore;
function Drafts() {
const { t } = useTranslation();
const { documents } = useStores();
const history = useHistory();
const location = useLocation();
const params = new URLSearchParams(location.search);
const collectionId = params.get("collectionId") || undefined;
const dateFilter = (params.get("dateFilter") || undefined) as TDateFilter;
@observer
class Drafts extends React.Component<Props> {
@observable
params: URLSearchParams = new URLSearchParams(this.props.location.search);
componentDidUpdate(prevProps: Props) {
if (prevProps.location.search !== this.props.location.search) {
this.handleQueryChange();
}
}
handleQueryChange = () => {
this.params = new URLSearchParams(this.props.location.search);
};
handleFilterChange = (search: {
const handleFilterChange = (search: {
dateFilter?: string | null | undefined;
collectionId?: string | null | undefined;
}) => {
this.props.history.replace({
pathname: this.props.location.pathname,
history.replace({
pathname: location.pathname,
search: queryString.stringify(
{ ...queryString.parse(this.props.location.search), ...search },
{ ...queryString.parse(location.search), ...search },
{
skipEmptyString: true,
}
@@ -52,84 +43,66 @@ class Drafts extends React.Component<Props> {
});
};
get collectionId() {
const id = this.params.get("collectionId");
return id ? id : undefined;
}
const isFiltered = collectionId || dateFilter;
const options = {
dateFilter,
collectionId,
};
get dateFilter() {
const id = this.params.get("dateFilter");
return (id ? id : undefined) as
| "day"
| "week"
| "month"
| "year"
| undefined;
}
return (
<Scene
icon={<EditIcon color="currentColor" />}
title={t("Drafts")}
actions={
<>
<Action>
<InputSearchPage source="drafts" label={t("Search documents")} />
</Action>
<Action>
<NewDocumentMenu />
</Action>
</>
}
>
<Heading>{t("Drafts")}</Heading>
<Subheading sticky>
{t("Documents")}
<Filters>
<CollectionFilter
collectionId={collectionId}
onSelect={(collectionId) =>
handleFilterChange({
collectionId,
})
}
/>
<DateFilter
dateFilter={dateFilter}
onSelect={(dateFilter) =>
handleFilterChange({
dateFilter,
})
}
/>
</Filters>
</Subheading>
render() {
const { t } = this.props;
const isFiltered = this.collectionId || this.dateFilter;
const options = {
dateFilter: this.dateFilter,
collectionId: this.collectionId,
};
return (
<Scene
icon={<EditIcon color="currentColor" />}
title={t("Drafts")}
actions={
<>
<Action>
<InputSearchPage source="drafts" label={t("Search documents")} />
</Action>
<Action>
<NewDocumentMenu />
</Action>
</>
<PaginatedDocumentList
empty={
<Empty>
{isFiltered
? t("No documents found for your filters.")
: t("You’ve not got any drafts at the moment.")}
</Empty>
}
>
<Heading>{t("Drafts")}</Heading>
<Subheading sticky>
{t("Documents")}
<Filters>
<CollectionFilter
collectionId={this.collectionId}
onSelect={(collectionId) =>
this.handleFilterChange({
collectionId,
})
}
/>
<DateFilter
dateFilter={this.dateFilter}
onSelect={(dateFilter) =>
this.handleFilterChange({
dateFilter,
})
}
/>
</Filters>
</Subheading>
<PaginatedDocumentList
empty={
<Empty>
{isFiltered
? t("No documents found for your filters.")
: t("You’ve not got any drafts at the moment.")}
</Empty>
}
fetch={this.props.documents.fetchDrafts}
documents={this.props.documents.drafts(options)}
options={options}
showParentDocuments
showCollection
/>
</Scene>
);
}
fetch={documents.fetchDrafts}
documents={documents.drafts(options)}
options={options}
showParentDocuments
showCollection
/>
</Scene>
);
}
const Filters = styled(Flex)`
@@ -145,4 +118,4 @@ const Filters = styled(Flex)`
}
`;
export default withTranslation()(withStores(Drafts));
export default observer(Drafts);

4
shared/i18n/locales/en_US/translation.json
View File

@@ -168,6 +168,9 @@
"You will receive an email when it's complete.": "You will receive an email when it's complete.",
"A ZIP file containing the images, and documents in the Markdown format.": "A ZIP file containing the images, and documents in the Markdown format.",
"A ZIP file containing the images, and documents as HTML files.": "A ZIP file containing the images, and documents as HTML files.",
"{{ count }} members": "{{ count }} members",
"{{ count }} members_plural": "{{ count }} members",
"Group members": "Group members",
"Icon": "Icon",
"Show menu": "Show menu",
"Choose icon": "Choose icon",
@@ -537,7 +540,6 @@
"Groups are for organizing your team. They work best when centered around a function or a responsibility — Support or Engineering for example.": "Groups are for organizing your team. They work best when centered around a function or a responsibility — Support or Engineering for example.",
"You’ll be able to add people to the group next.": "You’ll be able to add people to the group next.",
"Continue": "Continue",
"Group members": "Group members",
"Recently viewed": "Recently viewed",
"Created by me": "Created by me",
"Weird, this shouldn’t ever be empty": "Weird, this shouldn’t ever be empty",