diff --git a/src/core/client/stream/tabs/Profile/Preferences/MediaSettingsContainer.tsx b/src/core/client/stream/tabs/Profile/Preferences/MediaSettingsContainer.tsx index cb63700429..b9f02fbb31 100644 --- a/src/core/client/stream/tabs/Profile/Preferences/MediaSettingsContainer.tsx +++ b/src/core/client/stream/tabs/Profile/Preferences/MediaSettingsContainer.tsx @@ -13,10 +13,12 @@ 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"; @@ -24,10 +26,14 @@ import UpdateUserMediaSettingsMutation from "./UpdateUserMediaSettingsMutation"; import styles from "./MediaSettingsContainer.css"; interface Props { + settings: MediaSettingsContainer_settings; viewer: MediaSettingsContainer_viewer; } -const MediaSettingsContainer: FunctionComponent = ({ viewer }) => { +const MediaSettingsContainer: FunctionComponent = ({ + viewer, + settings, +}) => { const updateMediaSettings = useMutation(UpdateUserMediaSettingsMutation); const [showSuccess, setShowSuccess] = useState(false); const [showError, setShowError] = useState(false); @@ -58,91 +64,121 @@ const MediaSettingsContainer: FunctionComponent = ({ viewer }) => { [updateMediaSettings, setShowSuccess, setShowError] ); + if ( + !settings.media?.giphy?.enabled && + !settings.media?.twitter?.enabled && + !settings.media?.youtube?.enabled + ) { + return null; + } + return ( - -
- {({ - handleSubmit, - submitting, - submitError, - pristine, - submitSucceeded, - }) => ( - - -
Media Preferences
-
-
-
- - - {({ input }) => ( - - -
Always show GIFs, Tweets, YouTube, etc.
-
-
- )} -
-
-
- -
- This may make the comments slower to load -
-
-
-
- - + <> + + + {({ + handleSubmit, + submitting, + submitError, + pristine, + submitSucceeded, + }) => ( + + +
Media Preferences
-
- {((submitError && showError) || - (submitSucceeded && showSuccess)) && ( -
- {submitError && showError && ( - warning} - titleWeight="semiBold" - title={{submitError}} - /> - )} - {submitSucceeded && showSuccess && ( - check_circle} - titleWeight="semiBold" - title={ - - Your media preferences have been updated - - } - /> - )} +
+
+ + + {({ input }) => ( + + +
Always show GIFs, Tweets, YouTube, etc.
+
+
+ )} +
+
+
+ +
+ This may make the comments slower to load +
+
- )} - - )} - - +
+ + + +
+ {((submitError && showError) || + (submitSucceeded && showSuccess)) && ( +
+ {submitError && showError && ( + warning} + titleWeight="semiBold" + title={{submitError}} + /> + )} + {submitSucceeded && showSuccess && ( + check_circle} + titleWeight="semiBold" + title={ + + Your media preferences have been updated + + } + /> + )} +
+ )} + + )} + + + + ); }; const enhanced = withFragmentContainer({ + settings: graphql` + fragment MediaSettingsContainer_settings on Settings { + media { + giphy { + enabled + } + twitter { + enabled + } + youtube { + enabled + } + } + } + `, viewer: graphql` fragment MediaSettingsContainer_viewer on User { id diff --git a/src/core/client/stream/tabs/Profile/Preferences/PreferencesContainer.tsx b/src/core/client/stream/tabs/Profile/Preferences/PreferencesContainer.tsx index 0d8a6d2fb6..bac4bf45c5 100644 --- a/src/core/client/stream/tabs/Profile/Preferences/PreferencesContainer.tsx +++ b/src/core/client/stream/tabs/Profile/Preferences/PreferencesContainer.tsx @@ -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"; @@ -12,20 +13,25 @@ import NotificationSettingsContainer from "./NotificationSettingsContainer"; interface Props { viewer: PreferencesContainer_viewer; + settings: PreferencesContainer_settings; } const PreferencesContainer: FunctionComponent = (props) => { return ( - - + ); }; const enhanced = withFragmentContainer({ + settings: graphql` + fragment PreferencesContainer_settings on Settings { + ...MediaSettingsContainer_settings + } + `, viewer: graphql` fragment PreferencesContainer_viewer on User { ...NotificationSettingsContainer_viewer diff --git a/src/core/client/stream/tabs/Profile/Profile.tsx b/src/core/client/stream/tabs/Profile/Profile.tsx index dc20fb43e6..f31963913a 100644 --- a/src/core/client/stream/tabs/Profile/Profile.tsx +++ b/src/core/client/stream/tabs/Profile/Profile.tsx @@ -35,7 +35,8 @@ export interface ProfileProps { PropTypesOf["viewer"]; settings: PropTypesOf["settings"] & PropTypesOf["settings"] & - PropTypesOf["settings"]; + PropTypesOf["settings"] & + PropTypesOf["settings"]; } const Profile: FunctionComponent = (props) => { @@ -135,7 +136,10 @@ const Profile: FunctionComponent = (props) => { className={CLASSES.preferencesTabPane.$root} tabID="PREFERENCES" > - + {showAccountTab && ( diff --git a/src/core/client/stream/tabs/Profile/ProfileContainer.tsx b/src/core/client/stream/tabs/Profile/ProfileContainer.tsx index 441e791d8c..f3c9659478 100644 --- a/src/core/client/stream/tabs/Profile/ProfileContainer.tsx +++ b/src/core/client/stream/tabs/Profile/ProfileContainer.tsx @@ -56,6 +56,7 @@ const enhanced = withFragmentContainer({ ...UserBoxContainer_settings ...AccountSettingsContainer_settings ...MyCommentsContainer_settings + ...PreferencesContainer_settings } `, })(ProfileContainer);