Hide user media preferences if all media types are disabled

CORL-1282

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<Props> = ({ viewer }) => {
+const MediaSettingsContainer: FunctionComponent<Props> = ({
+  viewer,
+  settings,
+}) => {
   const updateMediaSettings = useMutation(UpdateUserMediaSettingsMutation);
   const [showSuccess, setShowSuccess] = useState(false);
   const [showError, setShowError] = useState(false);
@@ -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>
+    <>
+      <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>
-            <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 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

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> = (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

src/core/client/stream/tabs/Profile/Profile.tsx

@@ -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) => {
@@ -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">

src/core/client/stream/tabs/Profile/ProfileContainer.tsx

@@ -56,6 +56,7 @@ const enhanced = withFragmentContainer<ProfileContainerProps>({
       ...UserBoxContainer_settings
       ...AccountSettingsContainer_settings
       ...MyCommentsContainer_settings
+      ...PreferencesContainer_settings
     }
   `,
 })(ProfileContainer);