Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[CORL-1282] Hide user media preferences if all media types are disabled #3107

Merged
merged 3 commits into from Aug 18, 2020
Merged

[CORL-1282] Hide user media preferences if all media types are disabled #3107

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a044355
Hide user media preferences if all media types are disabled
nick-funk Aug 14, 2020
9d6999a
Merge branch 'master' into feature/CORL-1282-hide-media-pref
kodiakhq[bot] Aug 18, 2020
f825f3f
Merge branch 'master' into feature/CORL-1282-hide-media-pref
kgardnr Aug 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
194 changes: 115 additions & 79 deletions src/core/client/stream/tabs/Profile/Preferences/MediaSettingsContainer.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Expand Up @@ -56,6 +56,7 @@ const enhanced = withFragmentContainer<ProfileContainerProps>({
...UserBoxContainer_settings
...AccountSettingsContainer_settings
...MyCommentsContainer_settings
...PreferencesContainer_settings
}
`,
})(ProfileContainer);
Expand Down