Skip to content

Commit

Permalink
Hide user media preferences if all media types are disabled (#3107)
Browse files Browse the repository at this point in the history 
CORL-1282

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
Co-authored-by: Kim Gardner <kgardnr@gmail.com>
  • Loading branch information
@nick-funk @kodiakhq @kgardnr
3 people committed Aug 18, 2020
1 parent a977d4c commit ca9456a
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 84 deletions.
194 changes: 115 additions & 79 deletions src/core/client/stream/tabs/Profile/Preferences/MediaSettingsContainer.tsx
View file
Expand Up @@ -13,21 +13,27 @@ import {
FieldSet,
FormField,
HorizontalGutter,
HorizontalRule,
Icon,
} from "coral-ui/components/v2";
import { Button, CallOut } from "coral-ui/components/v3";

import { MediaSettingsContainer_settings } from "coral-stream/__generated__/MediaSettingsContainer_settings.graphql";
import { MediaSettingsContainer_viewer } from "coral-stream/__generated__/MediaSettingsContainer_viewer.graphql";

import UpdateUserMediaSettingsMutation from "./UpdateUserMediaSettingsMutation";

import styles from "./MediaSettingsContainer.css";

interface Props {
settings: MediaSettingsContainer_settings;
viewer: MediaSettingsContainer_viewer;
}

const MediaSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
const MediaSettingsContainer: FunctionComponent<Props> = ({
viewer,
settings,
}) => {
const updateMediaSettings = useMutation(UpdateUserMediaSettingsMutation);
const [showSuccess, setShowSuccess] = useState(false);
const [showError, setShowError] = useState(false);
Expand Down Expand Up @@ -58,91 +64,121 @@ const MediaSettingsContainer: FunctionComponent<Props> = ({ viewer }) => {
[updateMediaSettings, setShowSuccess, setShowError]
);

if (
!settings.media?.giphy?.enabled &&
!settings.media?.twitter?.enabled &&
!settings.media?.youtube?.enabled
) {
return null;
}

return (
<HorizontalGutter>
<Form initialValues={viewer.mediaSettings} onSubmit={onSubmit}>
{({
handleSubmit,
submitting,
submitError,
pristine,
submitSucceeded,
}) => (
<form className={styles.form} onSubmit={handleSubmit}>
<Localized id="profile-preferences-mediaPreferences">
<div className={styles.title}>Media Preferences</div>
</Localized>
<div className={styles.options}>
<FieldSet>
<FormField>
<Field name="unfurlEmbeds" type="checkbox">
{({ input }) => (
<CheckBox {...input} id={input.name} variant="streamBlue">
<Localized id="profile-preferences-mediaPreferences-alwaysShow">
<div>Always show GIFs, Tweets, YouTube, etc.</div>
</Localized>
</CheckBox>
)}
</Field>
</FormField>
</FieldSet>
<Localized id="profile-preferences-mediaPreferences-thisMayMake">
<div className={styles.checkBoxDescription}>
This may make the comments slower to load
</div>
</Localized>
</div>
<div
className={cn(styles.updateButton, {
[styles.updateButtonNotification]: showSuccess || showError,
})}
>
<Localized id="profile-preferences-mediaPreferences-update">
<Button
type="submit"
disabled={submitting || pristine}
className={CLASSES.mediaPreferences.updateButton}
upperCase
>
Update
</Button>
<>
<HorizontalGutter>
<Form initialValues={viewer.mediaSettings} onSubmit={onSubmit}>
{({
handleSubmit,
submitting,
submitError,
pristine,
submitSucceeded,
}) => (
<form className={styles.form} onSubmit={handleSubmit}>
<Localized id="profile-preferences-mediaPreferences">
<div className={styles.title}>Media Preferences</div>
</Localized>
</div>
{((submitError && showError) ||
(submitSucceeded && showSuccess)) && (
<div className={styles.callOut}>
{submitError && showError && (
<CallOut
color="error"
onClose={closeError}
icon={<Icon size="sm">warning</Icon>}
titleWeight="semiBold"
title={<span>{submitError}</span>}
/>
)}
{submitSucceeded && showSuccess && (
<CallOut
color="success"
onClose={closeSuccess}
icon={<Icon size="sm">check_circle</Icon>}
titleWeight="semiBold"
title={
<Localized id="profile-preferences-mediaPreferences-preferencesUpdated">
<span>Your media preferences have been updated</span>
</Localized>
}
/>
)}
<div className={styles.options}>
<FieldSet>
<FormField>
<Field name="unfurlEmbeds" type="checkbox">
{({ input }) => (
<CheckBox
{...input}
id={input.name}
variant="streamBlue"
>
<Localized id="profile-preferences-mediaPreferences-alwaysShow">
<div>Always show GIFs, Tweets, YouTube, etc.</div>
</Localized>
</CheckBox>
)}
</Field>
</FormField>
</FieldSet>
<Localized id="profile-preferences-mediaPreferences-thisMayMake">
<div className={styles.checkBoxDescription}>
This may make the comments slower to load
</div>
</Localized>
</div>
)}
</form>
)}
</Form>
</HorizontalGutter>
<div
className={cn(styles.updateButton, {
[styles.updateButtonNotification]: showSuccess || showError,
})}
>
<Localized id="profile-preferences-mediaPreferences-update">
<Button
type="submit"
disabled={submitting || pristine}
className={CLASSES.mediaPreferences.updateButton}
upperCase
>
Update
</Button>
</Localized>
</div>
{((submitError && showError) ||
(submitSucceeded && showSuccess)) && (
<div className={styles.callOut}>
{submitError && showError && (
<CallOut
color="error"
onClose={closeError}
icon={<Icon size="sm">warning</Icon>}
titleWeight="semiBold"
title={<span>{submitError}</span>}
/>
)}
{submitSucceeded && showSuccess && (
<CallOut
color="success"
onClose={closeSuccess}
icon={<Icon size="sm">check_circle</Icon>}
titleWeight="semiBold"
title={
<Localized id="profile-preferences-mediaPreferences-preferencesUpdated">
<span>Your media preferences have been updated</span>
</Localized>
}
/>
)}
</div>
)}
</form>
)}
</Form>
</HorizontalGutter>
<HorizontalRule></HorizontalRule>
</>
);
};

const enhanced = withFragmentContainer<Props>({
settings: graphql`
fragment MediaSettingsContainer_settings on Settings {
media {
giphy {
enabled
}
twitter {
enabled
}
youtube {
enabled
}
}
}
`,
viewer: graphql`
fragment MediaSettingsContainer_viewer on User {
id
Expand Down
12 changes: 9 additions & 3 deletions src/core/client/stream/tabs/Profile/Preferences/PreferencesContainer.tsx
View file
Expand Up @@ -2,8 +2,9 @@ import React, { FunctionComponent } from "react";
import { graphql } from "react-relay";

import { withFragmentContainer } from "coral-framework/lib/relay";
import { HorizontalGutter, HorizontalRule } from "coral-ui/components/v2";
import { HorizontalGutter } from "coral-ui/components/v2";

import { PreferencesContainer_settings } from "coral-stream/__generated__/PreferencesContainer_settings.graphql";
import { PreferencesContainer_viewer } from "coral-stream/__generated__/PreferencesContainer_viewer.graphql";

import IgnoreUserSettingsContainer from "./IgnoreUserSettingsContainer";
Expand All @@ -12,20 +13,25 @@ import NotificationSettingsContainer from "./NotificationSettingsContainer";

interface Props {
viewer: PreferencesContainer_viewer;
settings: PreferencesContainer_settings;
}

const PreferencesContainer: FunctionComponent<Props> = (props) => {
return (
<HorizontalGutter spacing={4}>
<NotificationSettingsContainer viewer={props.viewer} />
<MediaSettingsContainer viewer={props.viewer} />
<HorizontalRule></HorizontalRule>
<MediaSettingsContainer viewer={props.viewer} settings={props.settings} />
<IgnoreUserSettingsContainer viewer={props.viewer} />
</HorizontalGutter>
);
};

const enhanced = withFragmentContainer<Props>({
settings: graphql`
fragment PreferencesContainer_settings on Settings {
...MediaSettingsContainer_settings
}
`,
viewer: graphql`
fragment PreferencesContainer_viewer on User {
...NotificationSettingsContainer_viewer
Expand Down
8 changes: 6 additions & 2 deletions src/core/client/stream/tabs/Profile/Profile.tsx
View file
Expand Up @@ -35,7 +35,8 @@ export interface ProfileProps {
PropTypesOf<typeof PreferencesContainer>["viewer"];
settings: PropTypesOf<typeof UserBoxContainer>["settings"] &
PropTypesOf<typeof AccountSettingsContainer>["settings"] &
PropTypesOf<typeof MyCommentsContainer>["settings"];
PropTypesOf<typeof MyCommentsContainer>["settings"] &
PropTypesOf<typeof PreferencesContainer>["settings"];
}

const Profile: FunctionComponent<ProfileProps> = (props) => {
Expand Down Expand Up @@ -135,7 +136,10 @@ const Profile: FunctionComponent<ProfileProps> = (props) => {
className={CLASSES.preferencesTabPane.$root}
tabID="PREFERENCES"
>
<PreferencesContainer viewer={props.viewer} />
<PreferencesContainer
viewer={props.viewer}
settings={props.settings}
/>
</TabPane>
{showAccountTab && (
<TabPane className={CLASSES.accountTabPane.$root} tabID="ACCOUNT">
Expand Down
1 change: 1 addition & 0 deletions src/core/client/stream/tabs/Profile/ProfileContainer.tsx
View file
Expand Up @@ -56,6 +56,7 @@ const enhanced = withFragmentContainer<ProfileContainerProps>({
...UserBoxContainer_settings
...AccountSettingsContainer_settings
...MyCommentsContainer_settings
...PreferencesContainer_settings
}
`,
})(ProfileContainer);
Expand Down

0 comments on commit ca9456a

Please sign in to comment.