Fix Oauth bug and UserPreferences store and other minor issues

package.json

@@ -36,7 +36,7 @@
     "timeago.js": "^4.0.2",
     "type-fest": "^1.2.0",
     "vite-plugin-ejs": "^1.6.4",
-    "zustand": "^4.3.3"
+    "zustand": "^5.0.3"
   },
   "engines": {
     "node": "18"
@@ -65,9 +65,9 @@
   },
   "devDependencies": {
     "@types/chrome": "^0.0.241",
+    "@types/dompurify": "^2.3.4",
     "@types/jest": "^29.1.2",
     "@types/jsonpath": "^0.2.0",
-    "@types/dompurify": "^2.3.4",
     "@types/jspath": "^0.4.0",
     "@types/node": "^20.4.2",
     "@types/react": "^19.0.4",

public/auth.js

@@ -1,6 +1,7 @@
+const acceptedTypes = ['TOKEN_RECEIVED', 'ERROR_RECEIVED']
 window.addEventListener('message', (event) => {
-  if (event.data.type === 'TOKEN_RECEIVED' || event.data.type === 'ERROR_RECEIVED') {
-    // Forward to content script
+  if (acceptedTypes.includes(event.data.type)) {
+    // Forward to content scripte
     window.postMessage(event.data, '*')
   }
 })

public/background.js

@@ -2,3 +2,7 @@ const uninstallUrl = `https://hackertab.dev/uninstall.html`
 if (chrome.runtime.setUninstallURL) {
   chrome.runtime.setUninstallURL(uninstallUrl)
 }
+
+chrome.action.onClicked.addListener(function () {
+  chrome.tabs.create({ url: 'index.html', selected: true })
+})

public/chrome.manifest.json

@@ -1,5 +1,6 @@
 {
   "background": {
     "service_worker": "background.js"
-  }
+  },
+  "action": {}
 }

public/content.js

@@ -1,17 +1,12 @@
 const script = document.createElement('script')
 script.src = chrome.runtime.getURL('auth.js')
 document.documentElement.appendChild(script)
+const acceptedTypes = ['TOKEN_RECEIVED', 'ERROR_RECEIVED']
 
 // Listen for messages from the injected script
 window.addEventListener('message', (event) => {
-  if (
-    event.source !== window ||
-    !event.data ||
-    event.data.type !== 'TOKEN_RECEIVED' ||
-    event.data.type !== 'ERROR_RECEIVED'
-  ) {
+  if (event.source !== window || !event.data || !acceptedTypes.includes(event.data.type)) {
     return
   }
-
   chrome.runtime.sendMessage({ ...event.data })
 })

src/components/Layout/AppContentLayout.tsx

@@ -3,9 +3,9 @@ import { DesktopBreakpoint } from 'src/providers/DesktopBreakpoint'
 import { MobileBreakpoint } from 'src/providers/MobileBreakpoint'
 import { useUserPreferences } from 'src/stores/preferences'
 import { BottomNavigation } from '../Elements'
-import { ScrollCardsNavigator } from './'
 import { DesktopCards } from './DesktopCards'
 import { MobileCards } from './MobileCards'
+import { ScrollCardsNavigator } from './ScrollCardsNavigator'
 
 export const AppContentLayout = () => {
   const { cards, userCustomCards } = useUserPreferences()

src/features/auth/index.ts

@@ -3,4 +3,3 @@ export * from './hooks/useAuth'
 export * from './stores/authModalStore'
 export * from './stores/authStore'
 export * from './types'
-export * from './utils/auth'

src/features/onboarding/components/steps/HelloTab.tsx

@@ -93,7 +93,7 @@ export const HelloTab = ({
         <p className="tabBody">Let's customize your Hackertab experience!</p>
       </div>
       <div className="occupations">
-        {OCCUPATIONS.map((occ, index) => {
+        {OCCUPATIONS.map((occ) => {
           return (
             <button
               key={occ.title}

src/features/onboarding/components/steps/SourcesTab.tsx

@@ -29,11 +29,6 @@ export const SourcesTab = ({
           options={sources}
           defaultValues={tabsData.sources}
           onChange={(_, selectedChips) => {
-            console.log(
-              'sources',
-              selectedChips.map((chip) => chip.value)
-            )
-
             setTabsData({ ...tabsData, sources: selectedChips.map((chip) => chip.value) })
           }}
         />

src/features/remoteConfig/api/getRemoteConfig.ts

@@ -1,25 +1,25 @@
-import { useQuery } from '@tanstack/react-query';
-import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query';
-import { RemoteConfig } from "../types";
-import { axios } from 'src/lib/axios';
-import { useRemoteConfigStore } from "../stores/remoteConfig";
+import { useQuery } from '@tanstack/react-query'
+import { axios } from 'src/lib/axios'
+import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query'
+import { useRemoteConfigStore } from '../stores/remoteConfig'
+import { RemoteConfig } from '../types'
 
 const getRemoteConfig = async (): Promise<RemoteConfig> => {
-  return axios.get('/data/remoteConfiguration.json');
+  return axios.get('/data/remoteConfiguration.json')
 }
 
-type QueryFnType = typeof getRemoteConfig;
+type QueryFnType = typeof getRemoteConfig
 
 type UseGetRemoteConfigOptions = {
-  config?: QueryConfig<QueryFnType>;
-};
+  config?: QueryConfig<QueryFnType>
+}
 export const useGetRemoteConfig = ({ config }: UseGetRemoteConfigOptions = {}) => {
   return useQuery<ExtractFnReturnType<QueryFnType>>({
     onSuccess(remoteConfig) {
-      useRemoteConfigStore.getState().setRemoteConfig(remoteConfig);
+      useRemoteConfigStore.getState().setRemoteConfig(remoteConfig)
     },
     ...config,
     queryKey: ['remote-config'],
     queryFn: () => getRemoteConfig(),
-  });
-}
+  })
+}

src/features/remoteConfig/types/index.ts

@@ -21,7 +21,6 @@ export type TagValuesFieldType =
 
 export type RemoteConfig = {
   supportedTags: Tag[]
-  refresh_rate: number | false
   marketingBannerConfig?: any
   adsConfig: {
     rowPosition: number

src/lib/interceptors/DefaultRequestInterceptor.ts

@@ -1,7 +1,7 @@
 import { InternalAxiosRequestConfig } from 'axios'
 import { API_ENDPOINT } from 'src/config'
-import { getUserToken } from 'src/features/auth'
 import { isProduction } from 'src/utils/Environment'
+import { firebaseAuth } from '../firebase'
 
 export async function DefaultRequestInterceptor(config: InternalAxiosRequestConfig) {
   if (config) {
@@ -20,3 +20,18 @@ export async function DefaultRequestInterceptor(config: InternalAxiosRequestConf
 
   return config
 }
+
+const getUserToken = async () => {
+  return new Promise((resolve, _) => {
+    const unsub = firebaseAuth.onAuthStateChanged(async (user) => {
+      if (user) {
+        const token = await user.getIdToken()
+        resolve(token)
+      } else {
+        resolve(null)
+      }
+      unsub()
+    })
+    resolve('abc')
+  })
+}

src/providers/AuthProvider.tsx

@@ -103,6 +103,10 @@ export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
     const provider = searchParams.get('provider')
     const error = searchParams.get('error')
 
+    if (!token && !provider && !error) {
+      return
+    }
+
     if (error) {
       setAuthError({
         message: OAUTH_ERRORS[error] || OAUTH_ERRORS['default'],

src/stores/preferences.ts

@@ -1,6 +1,6 @@
 import arrayMove from 'array-move'
 import { Occupation } from 'src/features/onboarding/types'
-import { Tag } from 'src/features/remoteConfig'
+import { Tag, useRemoteConfigStore } from 'src/features/remoteConfig'
 import { enhanceTags } from 'src/utils/DataEnhancement'
 import { create } from 'zustand'
 import { StateStorage, createJSONStorage, persist } from 'zustand/middleware'
@@ -33,7 +33,6 @@ export type UserPreferencesState = {
 }
 
 type UserPreferencesStoreActions = {
-  initState: (newState: UserPreferencesState) => void
   setTheme: (theme: Theme) => void
   setSearchEngine: (theme: string) => void
   setOpenLinksNewTab: (openLinksNewTab: boolean) => void
@@ -55,8 +54,11 @@ type UserPreferencesStoreActions = {
 const defaultStorage: StateStorage = {
   getItem: (name: string) => {
     const item = window.localStorage.getItem(name)
+    if (!item) {
+      return null
+    }
 
-    if (item) {
+    try {
       let {
         version,
         state,
@@ -65,14 +67,20 @@ const defaultStorage: StateStorage = {
         state: UserPreferencesState
       } = JSON.parse(item)
 
+      const remoteConfigStore = useRemoteConfigStore.getState()
+
       const newState = {
         ...state,
-        userSelectedTags: enhanceTags(state.userSelectedTags as unknown as string[]),
+        userSelectedTags: enhanceTags(
+          remoteConfigStore,
+          state.userSelectedTags as unknown as string[]
+        ),
       }
+
       return JSON.stringify({ state: newState, version })
+    } catch (e) {
+      return null
     }
-
-    return null
   },
   setItem: (name: string, value: string) => {
     try {
@@ -92,7 +100,6 @@ const defaultStorage: StateStorage = {
       const newValue = JSON.stringify({ state: newState, version })
       window.localStorage.setItem(name, newValue)
     } catch (e) {
-      console.log('Prefs, SetItem', e)
       window.localStorage.setItem(name, '')
     }
   },

src/utils/DataEnhancement.ts

@@ -1,15 +1,14 @@
-import { Tag, useRemoteConfigStore, TagValuesFieldType } from 'src/features/remoteConfig'
+import { RemoteConfig, Tag, TagValuesFieldType } from 'src/features/remoteConfig'
 import { BaseEntry } from 'src/types'
 
-export const enhanceTags = (tags: string[]): Tag[] => {
-  const savedTags = useRemoteConfigStore.getState().supportedTags
-
+export const enhanceTags = (remoteConfigStore: RemoteConfig, tags: string[]): Tag[] => {
   return tags
-    .map((tag) => savedTags.find((st) => st.value.toLowerCase() === tag.toLocaleString()))
+    .map((tag) =>
+      remoteConfigStore.supportedTags.find((st) => st.value.toLowerCase() === tag.toLocaleString())
+    )
     .filter(Boolean) as Tag[]
 }
 
-
 export const getCardTagsValue = (tags: Tag[], valuesField: TagValuesFieldType): string[] => {
   return tags.reduce((acc: string[], curr) => {
     if (!curr[valuesField] || curr[valuesField].length === 0) return acc
@@ -18,9 +17,8 @@ export const getCardTagsValue = (tags: Tag[], valuesField: TagValuesFieldType):
   }, [])
 }
 
-
 export const filterUniqueEntries = (entries: BaseEntry[]) => {
   const uniqueResults = new Map()
   entries.forEach((item) => uniqueResults.set(item.id, item))
   return Array.from(uniqueResults.values())
-}
+}

yarn.lock

@@ -6085,7 +6085,7 @@ use-subscription@^1.3.0:
   dependencies:
     use-sync-external-store "^1.2.0"
 
-use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -6287,9 +6287,7 @@ yargs@^17.7.2:
     y18n "^5.0.5"
     yargs-parser "^21.1.1"
 
-zustand@^4.3.3:
-  version "4.4.7"
-  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.4.7.tgz#355406be6b11ab335f59a66d2cf9815e8f24038c"
-  integrity sha512-QFJWJMdlETcI69paJwhSMJz7PPWjVP8Sjhclxmxmxv/RYI7ZOvR5BHX+ktH0we9gTWQMxcne8q1OY8xxz604gw==
-  dependencies:
-    use-sync-external-store "1.2.0"
+zustand@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.3.tgz#b323435b73d06b2512e93c77239634374b0e407f"
+  integrity sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==