Small changes

babel.config.js

@@ -1,25 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-
-  return {
-    presets: [
-      [
-        'next/babel',
-        {
-          'preset-env': {
-            useBuiltIns: 'entry',
-            corejs: '3',
-          },
-        },
-      ],
-    ],
-    plugins: [
-      [
-        'react-intl-auto',
-        {
-          removePrefix: 'src/',
-        },
-      ],
-    ],
-  };
-};

src/components/Layout/MobileMenu/index.tsx

@@ -30,7 +30,7 @@ interface MenuLink {
   href: string;
   svgIcon: JSX.Element;
   svgIconSelected: JSX.Element;
-  content: React.ReactNode;
+  // content: React.ReactNode;
   activeRegExp: RegExp;
   as?: string;
   requiredPermission?: Permission | Permission[];
@@ -56,35 +56,35 @@ const MobileMenu = () => {
   const menuLinks: MenuLink[] = [
     {
       href: '/',
-      content: intl.formatMessage(menuMessages.dashboard),
+      // content: intl.formatMessage(menuMessages.dashboard),
       svgIcon: <SparklesIcon className="h-6 w-6" />,
       svgIconSelected: <FilledSparklesIcon className="h-6 w-6" />,
       activeRegExp: /^\/(discover\/?)?$/,
     },
     {
       href: '/discover/movies',
-      content: intl.formatMessage(menuMessages.browsemovies),
+      // content: intl.formatMessage(menuMessages.browsemovies),
       svgIcon: <FilmIcon className="h-6 w-6" />,
       svgIconSelected: <FilledFilmIcon className="h-6 w-6" />,
       activeRegExp: /^\/discover\/movies$/,
     },
     {
       href: '/discover/tv',
-      content: intl.formatMessage(menuMessages.browsetv),
+      // content: intl.formatMessage(menuMessages.browsetv),
       svgIcon: <TvIcon className="h-6 w-6" />,
       svgIconSelected: <FilledTvIcon className="h-6 w-6" />,
       activeRegExp: /^\/discover\/tv$/,
     },
     {
       href: '/requests',
-      content: intl.formatMessage(menuMessages.requests),
+      // content: intl.formatMessage(menuMessages.requests),
       svgIcon: <ClockIcon className="h-6 w-6" />,
       svgIconSelected: <FilledClockIcon className="h-6 w-6" />,
       activeRegExp: /^\/requests/,
     },
     {
       href: '/issues',
-      content: intl.formatMessage(menuMessages.issues),
+      // content: intl.formatMessage(menuMessages.issues),
       svgIcon: <ExclamationTriangleIcon className="h-6 w-6" />,
       svgIconSelected: <FilledExclamationTriangleIcon className="h-6 w-6" />,
       activeRegExp: /^\/issues/,
@@ -97,7 +97,7 @@ const MobileMenu = () => {
     },
     {
       href: '/users',
-      content: intl.formatMessage(menuMessages.users),
+      // content: intl.formatMessage(menuMessages.users),
       svgIcon: <UsersIcon className="mr-3 h-6 w-6" />,
       svgIconSelected: <FilledUsersIcon className="mr-3 h-6 w-6" />,
       activeRegExp: /^\/users/,
@@ -106,7 +106,7 @@ const MobileMenu = () => {
     },
     {
       href: '/settings',
-      content: intl.formatMessage(menuMessages.settings),
+      // content: intl.formatMessage(menuMessages.settings),
       svgIcon: <CogIcon className="mr-3 h-6 w-6" />,
       svgIconSelected: <FilledCogIcon className="mr-3 h-6 w-6" />,
       activeRegExp: /^\/settings/,
@@ -159,7 +159,8 @@ const MobileMenu = () => {
                 {cloneElement(isActive ? link.svgIconSelected : link.svgIcon, {
                   className: 'h-5 w-5',
                 })}
-                <span>{link.content}</span>
+                {/* <span>{link.content}</span> */}
+                <span>123</span>
               </a>
             </Link>
           );

src/components/Layout/SearchInput/index.tsx

@@ -24,7 +24,8 @@ const SearchInput = () => {
             id="search_field"
             style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
             className="block w-full rounded-full border border-gray-600 bg-gray-900 bg-opacity-80 py-2 pl-10 text-white placeholder-gray-300 hover:border-gray-500 focus:border-gray-500 focus:bg-opacity-100 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-base"
-            placeholder={intl.formatMessage(messages.searchPlaceholder)}
+            // placeholder={intl.formatMessage(messages.searchPlaceholder)}
+            placeholder="123"
             type="search"
             autoComplete="off"
             value={searchValue}

src/components/Layout/Sidebar/index.tsx

@@ -186,9 +186,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                               data-testid={`${sidebarLink.dataTestId}-mobile`}
                             >
                               {sidebarLink.svgIcon}
-                              {intl.formatMessage(
+                              {/* {intl.formatMessage(
                                 menuMessages[sidebarLink.messagesKey]
-                              )}
+                              )} */}
                             </a>
                           </Link>
                         );
@@ -246,9 +246,9 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
                         data-testid={sidebarLink.dataTestId}
                       >
                         {sidebarLink.svgIcon}
-                        {intl.formatMessage(
+                        {/* {intl.formatMessage(
                           menuMessages[sidebarLink.messagesKey]
-                        )}
+                        )} */}
                       </a>
                     </Link>
                   );

src/hooks/useSearchInput.ts

@@ -1,13 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import type { Nullable } from '@app/utils/typeHelpers';
-import { useRouter } from 'next/router';
 import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
-import type { UrlObject } from 'url';
 import useDebouncedState from './useDebouncedState';
 
-type Url = string | UrlObject;
-
 interface SearchObject {
   searchValue: string;
   searchOpen: boolean;
@@ -17,11 +13,12 @@ interface SearchObject {
 }
 
 const useSearchInput = (): SearchObject => {
-  const router = useRouter();
+  const path = '';
+  const query = '';
   const [searchOpen, setIsOpen] = useState(false);
-  const [lastRoute, setLastRoute] = useState<Nullable<Url>>(null);
+  const [lastRoute, setLastRoute] = useState<Nullable<URL>>(null);
   const [searchValue, debouncedValue, setSearchValue] = useDebouncedState(
-    (router.query.query as string) ?? ''
+    query ?? ''
   );
 
   /**
@@ -33,22 +30,22 @@ const useSearchInput = (): SearchObject => {
    */
   useEffect(() => {
     if (debouncedValue !== '' && searchOpen) {
-      if (router.pathname.startsWith('/search')) {
-        router.replace({
-          pathname: router.pathname,
-          query: {
-            ...router.query,
-            query: debouncedValue,
-          },
-        });
+      if (path.startsWith('/search')) {
+        history.replaceState(null, '', new URL(location.pathname));
+        // {
+        //   pathname: router.pathname,
+        //   query: {
+        //     ...router.query,
+        //     query: debouncedValue,
+        //   },
+        // });
       } else {
-        setLastRoute(router.asPath);
-        router
-          .push({
-            pathname: '/search',
-            query: { query: debouncedValue },
-          })
-          .then(() => window.scrollTo(0, 0));
+        setLastRoute(new URL(location.pathname));
+        history.pushState(null, '', new URL('/search'));
+        //   pathname: '/search',
+        //   query: { query: debouncedValue },
+        // })
+        window.scrollTo(0, 0);
       }
     }
   }, [debouncedValue]);
@@ -60,15 +57,13 @@ const useSearchInput = (): SearchObject => {
    * (in the case of a deeplink) we take the user back to the index route
    */
   useEffect(() => {
-    if (
-      searchValue === '' &&
-      router.pathname.startsWith('/search') &&
-      !searchOpen
-    ) {
+    if (searchValue === '' && path.startsWith('/search') && !searchOpen) {
       if (lastRoute) {
-        router.push(lastRoute).then(() => window.scrollTo(0, 0));
+        history.pushState(null, '', lastRoute);
+        window.scrollTo(0, 0);
       } else {
-        router.replace('/').then(() => window.scrollTo(0, 0));
+        history.pushState(null, '', '/');
+        window.scrollTo(0, 0);
       }
     }
   }, [searchOpen]);
@@ -89,22 +84,20 @@ const useSearchInput = (): SearchObject => {
    * is on /search
    */
   useEffect(() => {
-    if (router.query.query !== debouncedValue) {
+    if (location.search !== debouncedValue) {
       setSearchValue(
-        router.query.query
-          ? decodeURIComponent(router.query.query as string)
-          : ''
+        location.search ? decodeURIComponent(location.search as string) : ''
       );
 
-      if (!router.pathname.startsWith('/search') && !router.query.query) {
+      if (!path.startsWith('/search') && !location.search) {
         setIsOpen(false);
       }
     }
 
-    if (router.pathname.startsWith('/search')) {
+    if (path.startsWith('/search')) {
       setIsOpen(true);
     }
-  }, [router, setSearchValue]);
+  }, [setSearchValue]);
 
   const clear = () => {
     setIsOpen(false);

src/pages/_app.tsx

@@ -86,6 +86,8 @@ if (typeof window === 'undefined') {
   global.Intl = require('intl');
 }
 
+import defaultLang from "../i18n/locale/en.json";
+
 export default function App({
   user,
   currentSettings,
@@ -96,15 +98,17 @@ export default function App({
   const [currentLocale, setLocale] = useState<AvailableLocale>(locale);
 
   useEffect(() => {
-    loadLocaleData(currentLocale).then(setMessages);
-  }, [currentLocale]);
+    if (messages == null) {
+      setMessages(defaultLang)
+    }
+  }, [messages]);
 
   return (
     <LanguageContext.Provider value={{ locale: currentLocale, setLocale }}>
       <IntlProvider
         locale={currentLocale}
         defaultLocale="en"
-        messages={loadedMessages}
+        messages={defaultLang}
       >
         <LoadingBar />
         <SettingsProvider currentSettings={currentSettings}>