mirror of
https://github.com/urbit/shrub.git
synced 2024-12-25 21:12:56 +03:00
hark-fe: toggle mute in group settings
This commit is contained in:
Liam Fitzgerald
parent
0510b723d7
commit
ab781cfbc3
@ -1,173 +0,0 @@
|
|||||||
import React, { useEffect } from "react";
|
|
||||||
import { AsyncButton } from "~/views/components/AsyncButton";
|
|
||||||
import * as Yup from "yup";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
ManagedTextInputField as Input,
|
|
||||||
ManagedCheckboxField as Checkbox,
|
|
||||||
Col,
|
|
||||||
Label,
|
|
||||||
Button,
|
|
||||||
} from "@tlon/indigo-react";
|
|
||||||
import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
|
|
||||||
import { FormError } from "~/views/components/FormError";
|
|
||||||
import { Group, GroupPolicy } from "~/types/group-update";
|
|
||||||
import { Enc } from "~/types/noun";
|
|
||||||
import { Association } from "~/types/metadata-update";
|
|
||||||
import GlobalApi from "~/logic/api/global";
|
|
||||||
import { resourceFromPath, roleForShip } from "~/logic/lib/group";
|
|
||||||
import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
|
|
||||||
import { ColorInput } from "~/views/components/ColorInput";
|
|
||||||
import { useHistory } from "react-router-dom";
|
|
||||||
|
|
||||||
import { uxToHex } from '~/logic/lib/util';
|
|
||||||
|
|
||||||
|
|
||||||
interface FormSchema {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
color: string;
|
|
||||||
isPrivate: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
const formSchema = Yup.object({
|
|
||||||
title: Yup.string().required("Group must have a name"),
|
|
||||||
description: Yup.string(),
|
|
||||||
color: Yup.string(),
|
|
||||||
isPrivate: Yup.boolean(),
|
|
||||||
});
|
|
||||||
|
|
||||||
interface GroupSettingsProps {
|
|
||||||
group: Group;
|
|
||||||
association: Association;
|
|
||||||
api: GlobalApi;
|
|
||||||
}
|
|
||||||
export function GroupSettings(props: GroupSettingsProps) {
|
|
||||||
const { group, association } = props;
|
|
||||||
const { metadata } = association;
|
|
||||||
const history = useHistory();
|
|
||||||
const currentPrivate = "invite" in props.group.policy;
|
|
||||||
const initialValues: FormSchema = {
|
|
||||||
title: metadata?.title,
|
|
||||||
description: metadata?.description,
|
|
||||||
color: metadata?.color,
|
|
||||||
isPrivate: currentPrivate,
|
|
||||||
};
|
|
||||||
|
|
||||||
const onSubmit = async (
|
|
||||||
values: FormSchema,
|
|
||||||
actions: FormikHelpers<FormSchema>
|
|
||||||
) => {
|
|
||||||
try {
|
|
||||||
const { title, description, color, isPrivate } = values;
|
|
||||||
const uxColor = uxToHex(color);
|
|
||||||
await props.api.metadata.update(props.association, {
|
|
||||||
title,
|
|
||||||
description,
|
|
||||||
color: uxColor
|
|
||||||
});
|
|
||||||
if (isPrivate !== currentPrivate) {
|
|
||||||
const resource = resourceFromPath(props.association["group-path"]);
|
|
||||||
const newPolicy: Enc<GroupPolicy> = isPrivate
|
|
||||||
? { invite: { pending: [] } }
|
|
||||||
: { open: { banRanks: [], banned: [] } };
|
|
||||||
const diff = { replace: newPolicy };
|
|
||||||
await props.api.groups.changePolicy(resource, diff);
|
|
||||||
}
|
|
||||||
|
|
||||||
actions.setStatus({ success: null });
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
actions.setStatus({ error: e.message });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onDelete = async () => {
|
|
||||||
await props.api.contacts.delete(association["group-path"]);
|
|
||||||
history.push("/");
|
|
||||||
};
|
|
||||||
|
|
||||||
const disabled =
|
|
||||||
resourceFromPath(association["group-path"]).ship.slice(1) !== window.ship &&
|
|
||||||
roleForShip(group, window.ship) !== "admin";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Box height="100%" overflowY="auto">
|
|
||||||
<Formik
|
|
||||||
validationSchema={formSchema}
|
|
||||||
initialValues={initialValues}
|
|
||||||
onSubmit={onSubmit}
|
|
||||||
>
|
|
||||||
<Form style={{ display: "contents" }}>
|
|
||||||
<Box
|
|
||||||
maxWidth="300px"
|
|
||||||
gridTemplateColumns="1fr"
|
|
||||||
gridAutoRows="auto"
|
|
||||||
display="grid"
|
|
||||||
gridRowGap={4}
|
|
||||||
my={3}
|
|
||||||
mx={4}
|
|
||||||
>
|
|
||||||
{!disabled ? (
|
|
||||||
<Col>
|
|
||||||
<Label>Delete Group</Label>
|
|
||||||
<Label gray mt="2">
|
|
||||||
Permanently delete this group. (All current members will no
|
|
||||||
longer see this group.)
|
|
||||||
</Label>
|
|
||||||
<StatelessAsyncButton onClick={onDelete} mt={2} destructive>
|
|
||||||
Delete this group
|
|
||||||
</StatelessAsyncButton>
|
|
||||||
</Col>
|
|
||||||
) : (
|
|
||||||
<Col>
|
|
||||||
<Label>Leave Group</Label>
|
|
||||||
<Label gray mt="2">
|
|
||||||
Leave this group. You can rejoin if it is an open group, or if
|
|
||||||
you are reinvited
|
|
||||||
</Label>
|
|
||||||
<StatelessAsyncButton onClick={onDelete} mt={2} destructive>
|
|
||||||
Leave this group
|
|
||||||
</StatelessAsyncButton>
|
|
||||||
</Col>
|
|
||||||
)}
|
|
||||||
<Box borderBottom={1} borderBottomColor="washedGray" />
|
|
||||||
<Input
|
|
||||||
id="title"
|
|
||||||
label="Group Name"
|
|
||||||
caption="The name for your group to be called by"
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
id="description"
|
|
||||||
label="Group Description"
|
|
||||||
caption="The description of your group"
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
<ColorInput
|
|
||||||
id="color"
|
|
||||||
label="Group color"
|
|
||||||
caption="A color to represent your group"
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
<Checkbox
|
|
||||||
id="isPrivate"
|
|
||||||
label="Private group"
|
|
||||||
caption="If enabled, users must be invited to join the group"
|
|
||||||
disabled={disabled}
|
|
||||||
/>
|
|
||||||
<AsyncButton
|
|
||||||
disabled={disabled}
|
|
||||||
primary
|
|
||||||
loadingText="Updating.."
|
|
||||||
border
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</AsyncButton>
|
|
||||||
<FormError message="Failed to update settings" />
|
|
||||||
</Box>
|
|
||||||
</Form>
|
|
||||||
</Formik>
|
|
||||||
</Box>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
import { AsyncButton } from "~/views/components/AsyncButton";
|
||||||
|
import * as Yup from "yup";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
ManagedTextInputField as Input,
|
||||||
|
ManagedToggleSwitchField as Checkbox,
|
||||||
|
Col,
|
||||||
|
Label,
|
||||||
|
Button,
|
||||||
|
} from "@tlon/indigo-react";
|
||||||
|
import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
|
||||||
|
import { FormError } from "~/views/components/FormError";
|
||||||
|
import { Group, GroupPolicy } from "~/types/group-update";
|
||||||
|
import { Enc } from "~/types/noun";
|
||||||
|
import { Association } from "~/types/metadata-update";
|
||||||
|
import GlobalApi from "~/logic/api/global";
|
||||||
|
import { resourceFromPath, roleForShip } from "~/logic/lib/group";
|
||||||
|
import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
|
||||||
|
import { ColorInput } from "~/views/components/ColorInput";
|
||||||
|
import { useHistory } from "react-router-dom";
|
||||||
|
|
||||||
|
import { uxToHex } from "~/logic/lib/util";
|
||||||
|
|
||||||
|
interface FormSchema {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
color: string;
|
||||||
|
isPrivate: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const formSchema = Yup.object({
|
||||||
|
title: Yup.string().required("Group must have a name"),
|
||||||
|
description: Yup.string(),
|
||||||
|
color: Yup.string(),
|
||||||
|
isPrivate: Yup.boolean(),
|
||||||
|
});
|
||||||
|
|
||||||
|
interface GroupAdminSettingsProps {
|
||||||
|
group: Group;
|
||||||
|
association: Association;
|
||||||
|
api: GlobalApi;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GroupAdminSettings(props: GroupAdminSettingsProps) {
|
||||||
|
const { group, association } = props;
|
||||||
|
const { metadata } = association;
|
||||||
|
const history = useHistory();
|
||||||
|
const currentPrivate = "invite" in props.group.policy;
|
||||||
|
const initialValues: FormSchema = {
|
||||||
|
title: metadata?.title,
|
||||||
|
description: metadata?.description,
|
||||||
|
color: metadata?.color,
|
||||||
|
isPrivate: currentPrivate,
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (
|
||||||
|
values: FormSchema,
|
||||||
|
actions: FormikHelpers<FormSchema>
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const { title, description, color, isPrivate } = values;
|
||||||
|
const uxColor = uxToHex(color);
|
||||||
|
await props.api.metadata.update(props.association, {
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
color: uxColor,
|
||||||
|
});
|
||||||
|
if (isPrivate !== currentPrivate) {
|
||||||
|
const resource = resourceFromPath(props.association["group-path"]);
|
||||||
|
const newPolicy: Enc<GroupPolicy> = isPrivate
|
||||||
|
? { invite: { pending: [] } }
|
||||||
|
: { open: { banRanks: [], banned: [] } };
|
||||||
|
const diff = { replace: newPolicy };
|
||||||
|
await props.api.groups.changePolicy(resource, diff);
|
||||||
|
}
|
||||||
|
|
||||||
|
actions.setStatus({ success: null });
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
actions.setStatus({ error: e.message });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const disabled =
|
||||||
|
resourceFromPath(association["group-path"]).ship.slice(1) !== window.ship &&
|
||||||
|
roleForShip(group, window.ship) !== "admin";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Formik
|
||||||
|
validationSchema={formSchema}
|
||||||
|
initialValues={initialValues}
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
>
|
||||||
|
<Form>
|
||||||
|
<Col gapY={4}>
|
||||||
|
<Input
|
||||||
|
id="title"
|
||||||
|
label="Group Name"
|
||||||
|
caption="The name for your group to be called by"
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
id="description"
|
||||||
|
label="Group Description"
|
||||||
|
caption="The description of your group"
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
<ColorInput
|
||||||
|
id="color"
|
||||||
|
label="Group color"
|
||||||
|
caption="A color to represent your group"
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
id="isPrivate"
|
||||||
|
label="Private group"
|
||||||
|
caption="If enabled, users must be invited to join the group"
|
||||||
|
disabled={disabled}
|
||||||
|
/>
|
||||||
|
<AsyncButton
|
||||||
|
disabled={disabled}
|
||||||
|
primary
|
||||||
|
loadingText="Updating.."
|
||||||
|
border
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</AsyncButton>
|
||||||
|
<FormError message="Failed to update settings" />
|
||||||
|
</Col>
|
||||||
|
</Form>
|
||||||
|
</Formik>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
import React, { useEffect } from "react";
|
||||||
|
import { AsyncButton } from "~/views/components/AsyncButton";
|
||||||
|
import * as Yup from "yup";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
ManagedTextInputField as Input,
|
||||||
|
ManagedToggleSwitchField as Checkbox,
|
||||||
|
Col,
|
||||||
|
Label,
|
||||||
|
Button,
|
||||||
|
} from "@tlon/indigo-react";
|
||||||
|
import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
|
||||||
|
import { FormError } from "~/views/components/FormError";
|
||||||
|
import { Group, GroupPolicy } from "~/types/group-update";
|
||||||
|
import { Enc } from "~/types/noun";
|
||||||
|
import { Association } from "~/types/metadata-update";
|
||||||
|
import GlobalApi from "~/logic/api/global";
|
||||||
|
import { resourceFromPath, roleForShip } from "~/logic/lib/group";
|
||||||
|
import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
|
||||||
|
import { ColorInput } from "~/views/components/ColorInput";
|
||||||
|
import { useHistory } from "react-router-dom";
|
||||||
|
|
||||||
|
import { uxToHex } from "~/logic/lib/util";
|
||||||
|
import { GroupAdminSettings } from "./Admin";
|
||||||
|
import { GroupPersonalSettings } from "./Personal";
|
||||||
|
import {GroupNotificationsConfig} from "~/types";
|
||||||
|
|
||||||
|
interface GroupSettingsProps {
|
||||||
|
group: Group;
|
||||||
|
association: Association;
|
||||||
|
api: GlobalApi;
|
||||||
|
notificationsGroupConfig: GroupNotificationsConfig;
|
||||||
|
}
|
||||||
|
export function GroupSettings(props: GroupSettingsProps) {
|
||||||
|
return (
|
||||||
|
<Box height="100%" overflowY="auto">
|
||||||
|
<Col maxWidth="384px" p="4" gapY="4">
|
||||||
|
<GroupPersonalSettings {...props} />
|
||||||
|
<Box borderBottom="1" borderBottomColor="washedGray" />
|
||||||
|
<GroupAdminSettings {...props} />
|
||||||
|
</Col>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
import React, { useCallback } from "react";
|
||||||
|
|
||||||
|
import { AsyncButton } from "~/views/components/AsyncButton";
|
||||||
|
import * as Yup from "yup";
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
ManagedTextInputField as Input,
|
||||||
|
ManagedToggleSwitchField as Toggle,
|
||||||
|
Col,
|
||||||
|
Label,
|
||||||
|
Button,
|
||||||
|
} from "@tlon/indigo-react";
|
||||||
|
import { Formik, Form, useFormikContext, FormikHelpers } from "formik";
|
||||||
|
import { FormError } from "~/views/components/FormError";
|
||||||
|
import { Group, GroupPolicy } from "~/types/group-update";
|
||||||
|
import { Enc } from "~/types/noun";
|
||||||
|
import { Association } from "~/types/metadata-update";
|
||||||
|
import GlobalApi from "~/logic/api/global";
|
||||||
|
import { resourceFromPath, roleForShip } from "~/logic/lib/group";
|
||||||
|
import { StatelessAsyncButton } from "~/views/components/StatelessAsyncButton";
|
||||||
|
import { ColorInput } from "~/views/components/ColorInput";
|
||||||
|
import { useHistory } from "react-router-dom";
|
||||||
|
|
||||||
|
import { uxToHex } from "~/logic/lib/util";
|
||||||
|
import { FormikOnBlur } from "~/views/components/FormikOnBlur";
|
||||||
|
import {GroupNotificationsConfig} from "~/types";
|
||||||
|
|
||||||
|
function DeleteGroup(props: {
|
||||||
|
owner: boolean;
|
||||||
|
api: GlobalApi;
|
||||||
|
association: Association;
|
||||||
|
}) {
|
||||||
|
const history = useHistory();
|
||||||
|
const onDelete = async () => {
|
||||||
|
await props.api.contacts.delete(props.association["group-path"]);
|
||||||
|
history.push("/");
|
||||||
|
};
|
||||||
|
|
||||||
|
const action = props.owner ? "Delete" : "Leave";
|
||||||
|
const description = props.owner
|
||||||
|
? "Permanently delete this group. (All current members will no longer see this group.)"
|
||||||
|
: "Leave this group. You can rejoin if it is an open group, or if you are reinvited";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Col>
|
||||||
|
<Label>{action} Group</Label>
|
||||||
|
<Label gray mt="2">
|
||||||
|
{description}
|
||||||
|
</Label>
|
||||||
|
<StatelessAsyncButton onClick={onDelete} mt={2} destructive>
|
||||||
|
{action} this group
|
||||||
|
</StatelessAsyncButton>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormSchema {
|
||||||
|
watching: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GroupPersonalSettings(props: {
|
||||||
|
api: GlobalApi;
|
||||||
|
association: Association;
|
||||||
|
notificationsGroupConfig: GroupNotificationsConfig;
|
||||||
|
}) {
|
||||||
|
|
||||||
|
const groupPath = props.association['group-path'];
|
||||||
|
|
||||||
|
const watching = props.notificationsGroupConfig.findIndex(g => g === groupPath) !== -1;
|
||||||
|
|
||||||
|
const initialValues: FormSchema = {
|
||||||
|
watching
|
||||||
|
};
|
||||||
|
const onSubmit = async (values: FormSchema) => {
|
||||||
|
if(values.watching === watching) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const func = values.watching ? 'listenGroup' : 'ignoreGroup';
|
||||||
|
await props.api.hark[func](groupPath);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Col gapY="4">
|
||||||
|
<FormikOnBlur initialValues={initialValues} onSubmit={onSubmit}>
|
||||||
|
<Toggle
|
||||||
|
id="watching"
|
||||||
|
label="Notify me on group activity"
|
||||||
|
caption="Send me notifications when this group changes"
|
||||||
|
/>
|
||||||
|
</FormikOnBlur>
|
||||||
|
<DeleteGroup association={props.association} owner api={props.api} />
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user