Enhancements in React.js Codebase 🚀

demos/palm/web/talking-character/src/apis/languageModel.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {useContext, useEffect} from 'react';
+import {useContext, useEffect, useMemo} from 'react';
 
 import {ConfigContext} from '../context/config';
 import {LANGUAGE_MODEL_URL} from '../context/constants';
@@ -80,7 +80,6 @@ const useLanguageModel = ():
     LanguageModel => {
       const config = useContext(ConfigContext);
 
-      let context = '';
       let messages: MessageProps[] = [];
 
       const sendPrompt = async(prompt: PromptProps, temperature: number):
@@ -102,14 +101,9 @@ const useLanguageModel = ():
             return response.json() as Promise<SendPromptResponse>;
           };
 
-      useEffect(() => {
-        context = `Your task is to acting as a character that has this personality: "${
-            config.state
-                .personality}". Your response must be based on your personality. You have this backstory: "${
-            config.state.backStory}". Your knowledge base is: "${
-            config.state
-                .knowledgeBase}". The response should be one single sentence only.`;
-      }, [config]);
+      const context = useMemo(() => `Your task is to acting as a character that has this personality: "${config.state
+        .personality}". Your response must be based on your personality. You have this backstory: "${config.state.backStory}". Your knowledge base is: "${config.state
+        .knowledgeBase}". The response should be one single sentence only.`, [config])
 
       const sendMessage = async(message: string): Promise<string> => {
         const content = `Please answer within 100 characters. {${

demos/palm/web/textfx/src/components/layouts/mainScreen/mainScreen.tsx

@@ -81,7 +81,7 @@ const MainScreen = () => {
       '--inputSectionHeight',
       inputSectionHeight + 'px'
     )
-  }, [activeMacro, outputs, pins])
+  }, [activeMacro, outputs.length, pins.length])
 
   useEffect(() => {
     if (!mainScreenRef.current) return

demos/palm/web/textfx/src/components/layouts/welcome/screen2.tsx

@@ -63,20 +63,23 @@ const Step2 = () => {
                   src={Step1Image}
                   className={c(styles.fade, styles.fade3)}
                   alt={hig.title}
+                  decoding="async"
                 />
               )}
               {i === 1 && (
                 <img
                   src={Step2Image}
                   className={c(styles.fade, styles.fade3)}
                   alt={hig.title}
+                  decoding="async"
                 />
               )}
               {i === 2 && (
                 <img
                   src={Step3Image}
                   className={c(styles.fade, styles.fade3)}
                   alt={hig.title}
+                  decoding="async"
                 />
               )}
             </li>

demos/palm/web/textfx/src/components/layouts/welcome/welcome.tsx

@@ -52,7 +52,7 @@ const WelcomeScreen = ({onNext = () => {}}: IWelcome) => {
               return
             }
 
-            setStep(step + 1)
+            setStep((prevStep) => prevStep + 1)
           }}
         />
       </div>

demos/palm/web/travel-planner/src/components/PlaceCard.js

@@ -22,6 +22,31 @@ import { Circle, CloseOutlined, MapOutlined } from '@mui/icons-material';
 import { Pagination } from 'swiper';
 import MapCard from './MapCard';
 
+const playCardsStyles = {
+  image_stl: {
+    objectFit: "cover",
+    objectPosition: "center center"
+  },
+  division1: {
+    position: 'absolute',
+    width: '100%',
+    height: '30%',
+    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 31.73%, rgba(255, 255, 255, 0) 68.15%)',
+    top: 0,
+    left: 0,
+  },
+  division2: {
+    position: 'absolute',
+    background: 'linear-gradient(183.73deg, #000000 -21.07%, rgba(0, 0, 0, 0) 94.07%)',
+    mixBlendMode: 'multiply',
+    transform: 'rotate(-180deg)',
+    width: '100%',
+    height: '100%',
+    top: 0,
+    left: 0
+  }
+}
+
 function PlaceCard(props) {
   const { name, geometry, photos, description, onClose } = props;
 
@@ -92,34 +117,15 @@ function PlaceCard(props) {
                           height="100%"
                           width="100%"
                           src={photo}
-                          style={{
-                            objectFit: "cover",
-                            objectPosition: "center center"
-                          }}
+                          style={playCardsStyles.image_stl}
                         />
                         <div
-                          style={{
-                            position: 'absolute',
-                            width: '100%',
-                            height: '30%',
-                            background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.2) 31.73%, rgba(255, 255, 255, 0) 68.15%)',
-                            top: 0,
-                            left: 0,
-                          }}
+                          style={playCardsStyles.division1}
                         >
 
                         </div>
                         <div
-                          style={{
-                            position: 'absolute',
-                            background: 'linear-gradient(183.73deg, #000000 -21.07%, rgba(0, 0, 0, 0) 94.07%)',
-                            mixBlendMode: 'multiply',
-                            transform: 'rotate(-180deg)',
-                            width: '100%',
-                            height: '100%',
-                            top: 0,
-                            left: 0
-                          }}
+                          style={playCardsStyles.division2}
                         >
 
                         </div>

demos/palm/web/travel-planner/src/guards/AuthGuard.js

@@ -33,7 +33,7 @@ export default function AuthGuard({ children }) {
     if (pathname !== requestedLocation) {
       setRequestedLocation(pathname);
     }
-    return <Navigate to={'/'} />;
+    return <Navigate to={'/'} replace={true} />;
   }
 
   return <>{children}</>;

demos/palm/web/travel-planner/src/guards/GuestGuard.js

@@ -28,7 +28,7 @@ GuestGuard.propTypes = {
 export default function GuestGuard({ children }) {
   const { isAuthenticated } = useAuth();
   if (isAuthenticated) {
-    return <Navigate to="/wanderlust"/>;
+    return <Navigate replace={true} to="/wanderlust"/>;
   }
 
   return <>{children}</>;