fix: use new associate tag

src/component/pages/SelectBookDetails.tsx

@@ -1,8 +1,7 @@
 import { logEvent } from "firebase/analytics";
-import { getValue } from "firebase/remote-config";
 import React from 'react';
-import { FirebaseConfigKeys } from '../../constants';
 import { useBookDetailsSearch } from '../../hooks/useBookDetailsSearch';
+import { useConfigFlag } from "../../hooks/useFeatureFlag";
 import { useFirebase } from "../../hooks/useFirebase";
 import { getBookQuery } from '../../utils/getBookQuery';
 import { AmazonSearchResult } from "../../utils/parseAmazonSearchResults";
@@ -15,15 +14,14 @@ export interface BookDetailsSelectorProps {
 
 export const BookDetailsSelector: React.FC<BookDetailsSelectorProps> = ({ books, setBookDetails }) => {
   const [selectedBook, setSelectedBook] = React.useState<KindleBook>(books[0]);
-  const { remoteConfig, analytics } = useFirebase();
+  const { analytics } = useFirebase();
   const [searchQuery, setSearchQuery] = React.useState("");
   const { results: searchResults, search, isBusy: isSearching } = useBookDetailsSearch();
 
-  const amazonAssociateTag = React.useMemo(() => remoteConfig ? getValue(remoteConfig, FirebaseConfigKeys.AmazonAssociateTag).asString() : '', [remoteConfig]);
+  const amazonAssociateTag = useConfigFlag('amazonAssociateTag');
 
   React.useEffect(() => {
     onSearch(getBookQuery(selectedBook));
-
   }, []);
 
   React.useEffect(() => {
@@ -76,7 +74,7 @@ export const BookDetailsSelector: React.FC<BookDetailsSelectorProps> = ({ books,
         <div className='px-2 flex flex-col w-full'>
         <div className='text-lg'>{book.title}</div>
         <div className='text-sm'>{book.author}</div>
-          <div className='text-sm'><a href={`https://amazon.com${book.productPath}?tag=${amazonAssociateTag}`} target="_blank">View Book</a></div>
+          <div className='text-sm'><a href={`https://amazon.com${book.productPath}?tag=${amazonAssociateTag}`} target="_blank" rel="noreferrer">View Book</a></div>
           </div>
       </div>)}
       </div>

src/constants.ts

@@ -1,7 +1,3 @@
-export enum FirebaseConfigKeys {
-  AmazonAssociateTag = "amazonAssociateTag"
-};
-
 export enum BookPageProperties {
   SourceBookIds = "source-book-ids",
 }

src/hooks/useFeatureFlag.tsx

@@ -7,11 +7,17 @@ const flags = {
   enableDetailsSelector: new Rox.Flag(false),
 };
 
+const config = {
+  amazonAssociateTag: new Rox.RoxString('thebenforce0c-20'),
+}
+
 Rox.register('', flags);
+Rox.register('config', config);
 
 type FlagNames = keyof typeof flags;
+type ConfigNames = keyof typeof config;
 
-export const useFeatureFlag = (name: FlagNames) => {
+const useCloudBees = () => {
   const isDev = useIsDevelopment();
   const logseq = useLogseq();
   const [isSetup, setSetup] = React.useState(false);
@@ -31,12 +37,30 @@ export const useFeatureFlag = (name: FlagNames) => {
     setSetup(false);
     Rox.setup(environmentId, {}).then(() => setSetup(true));
   }, [environmentId]);
+
+  return isSetup;
+}
+
+export const useFeatureFlag = (name: FlagNames) => {
+  const isSetup = useCloudBees();
 
   const isEnabled = React.useMemo(() => {
-    if (!isSetup) return false;
+    if (!isSetup) return flags[name].defaultValue;
 
-    return flags[name].isEnabled();
+    return flags[name].isEnabled?.();
   }, [isSetup, name]);
 
   return isEnabled;
+}
+
+export const useConfigFlag = (name: ConfigNames) => {
+  const isSetup = useCloudBees();
+
+  const value = React.useMemo(() => {
+    if (!isSetup) return config[name].defaultValue;
+
+    return config[name].getValue();
+  }, [isSetup, name]);
+
+  return value;
 }