From 7b1a180966eaa5c77f62655162e79f5f4d7aa876 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 5 Oct 2024 23:07:10 -0500
Subject: [PATCH] Always pass a valid iso language code to the API, refresh
 global feed when language changes

---
 src/actions/timelines.ts                      |  2 +-
 src/api/hooks/streaming/usePublicStream.ts    |  2 +-
 .../language-dropdown/language-dropdown.tsx   | 22 +++++++++----------
 src/features/public-timeline/index.tsx        | 10 +++++++--
 4 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/actions/timelines.ts b/src/actions/timelines.ts
index f0adb667c..a6cd2b139 100644
--- a/src/actions/timelines.ts
+++ b/src/actions/timelines.ts
@@ -214,7 +214,7 @@ const expandHomeTimeline = ({ url, maxId }: ExpandHomeTimelineOpts = {}, done =
 };
 
 const expandPublicTimeline = ({ url, maxId, onlyMedia, language }: Record<string, any> = {}, done = noOp) =>
-  expandTimeline(`public${onlyMedia ? ':media' : ''}`, url || '/api/v1/timelines/public', url ? {} : { max_id: maxId, only_media: !!onlyMedia, language }, done);
+  expandTimeline(`public${onlyMedia ? ':media' : ''}`, url || '/api/v1/timelines/public', url ? {} : { max_id: maxId, only_media: !!onlyMedia, language: language || undefined }, done);
 
 const expandRemoteTimeline = (instance: string, { url, maxId, onlyMedia }: Record<string, any> = {}, done = noOp) =>
   expandTimeline(`remote${onlyMedia ? ':media' : ''}:${instance}`, url || '/api/v1/timelines/public', url ? {} : { local: false, instance: instance, max_id: maxId, only_media: !!onlyMedia }, done);
diff --git a/src/api/hooks/streaming/usePublicStream.ts b/src/api/hooks/streaming/usePublicStream.ts
index 114c4418d..81c25bde4 100644
--- a/src/api/hooks/streaming/usePublicStream.ts
+++ b/src/api/hooks/streaming/usePublicStream.ts
@@ -11,7 +11,7 @@ function usePublicStream({ onlyMedia, language }: UsePublicStreamOpts = {}) {
     `public${onlyMedia ? ':media' : ''}`,
     null,
     null,
-    { enabled: !language },
+    { enabled: !language }, // TODO: support language streaming
   );
 }
 
diff --git a/src/components/ui/language-dropdown/language-dropdown.tsx b/src/components/ui/language-dropdown/language-dropdown.tsx
index 9720ef8f4..ba272675f 100644
--- a/src/components/ui/language-dropdown/language-dropdown.tsx
+++ b/src/components/ui/language-dropdown/language-dropdown.tsx
@@ -6,13 +6,13 @@ import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { languages } from 'soapbox/features/preferences';
 import { useAppDispatch } from 'soapbox/hooks';
 
-const formatterLanguage = (lang: {}) => {
-  const sigLanguage = Object.keys(lang).sort().map((sig) => {
+function formatLanguages(languageMap: Record<string, string>) {
+  const langCodes = Object.keys(languageMap).sort().map((sig) => {
     return sig.substring(0, 2);
   });
 
-  return [...new Set(sigLanguage)];
-};
+  return [...new Set(langCodes)];
+}
 
 interface ILanguageDropdown {
   language: string;
@@ -24,20 +24,20 @@ interface ILanguageDropdown {
  */
 const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }) => {
   const dispatch = useAppDispatch();
-  const formattedLanguage = formatterLanguage(languages);
+  const formattedLanguages = formatLanguages(languages);
 
   const newMenu: MenuItem[] = [{ icon: require('@tabler/icons/outline/world.svg'), text: 'Default', action: () => {
     setLanguage('');
   } }];
 
-  formattedLanguage.map((lg: string) => {
-    const languageText = languages[lg as keyof typeof languages];
+  formattedLanguages.map((lang: string) => {
+    const languageName = languages[lang as keyof typeof languages];
 
-    if (languageText !== undefined) {
+    if (languageName) {
       newMenu.push({
-        text: `${lg.toUpperCase()} - ${languageText}`,
+        text: `${lang.toUpperCase()} - ${languageName}`,
         action: () => {
-          setLanguage(lg.toUpperCase());
+          setLanguage(lang);
         },
       });
     }
@@ -48,7 +48,7 @@ const LanguageDropdown: React.FC<ILanguageDropdown> = ({ language, setLanguage }
     <DropdownMenu items={newMenu} modal>
       {language ? (
         <button type='button' className='flex h-full rounded-lg border-2 border-gray-700 px-1 text-gray-700 hover:cursor-pointer hover:border-gray-500 hover:text-gray-500 sm:mr-4 dark:border-white dark:text-white dark:hover:border-gray-700' onClick={() => dispatch(openDropdownMenu())}>
-          {language}
+          {language.toUpperCase()}
         </button>
       ) : (
         <SvgIcon src={require('@tabler/icons/outline/world.svg')} className='text-gray-700 hover:cursor-pointer hover:text-gray-500 black:absolute black:right-0 black:top-4 black:text-white black:hover:text-gray-600 sm:mr-4 dark:text-white' />
diff --git a/src/features/public-timeline/index.tsx b/src/features/public-timeline/index.tsx
index d166639f0..c37580e0e 100644
--- a/src/features/public-timeline/index.tsx
+++ b/src/features/public-timeline/index.tsx
@@ -3,7 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { changeSetting } from 'soapbox/actions/settings';
-import { expandPublicTimeline } from 'soapbox/actions/timelines';
+import { clearTimeline, expandPublicTimeline } from 'soapbox/actions/timelines';
 import { usePublicStream } from 'soapbox/api/hooks';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import { Accordion, Column } from 'soapbox/components/ui';
@@ -56,9 +56,15 @@ const PublicTimeline = () => {
 
   usePublicStream({ onlyMedia, language });
 
+  useEffect(() => {
+    if (language) {
+      dispatch(clearTimeline('public'));
+    }
+  }, [language]);
+
   useEffect(() => {
     dispatch(expandPublicTimeline({ onlyMedia, language }));
-  }, [onlyMedia]);
+  }, [onlyMedia, language]);
 
   return (
     <Column