convert to js

Author: pharret31

apps/demos/Demos/Calendar/MultipleSelection/React/App.tsx

@@ -27,7 +27,7 @@ export default function App() {
   const [maxDateValue, setMaxDateValue] = useState<Date | null>(null);
   const [weekendDisabled, setWeekendDisabled] = useState<boolean | null>(null);
 
-  const onSelectWeekOnClickChange = useCallback(({ value }): void => {
+  const onSelectWeekOnClickChange = useCallback(({ value }: CheckBoxTypes.ValueChangedEvent): void => {
     setSelectWeekOnClick(value);
   }, [setSelectWeekOnClick]);
 

apps/demos/Demos/Calendar/MultipleSelection/ReactJs/App.js

@@ -52,7 +52,7 @@ export default function App() {
     [setWeekendDisabled],
   );
   const onClearButtonClick = useCallback(() => {
-    calendar.current.instance().clear();
+    calendar.current?.instance().clear();
   }, []);
   return (
     <div id="calendar-demo">

apps/demos/Demos/Calendar/Overview/ReactJs/App.js

@@ -28,36 +28,21 @@ export default function App() {
   const [showWeekNumbers, setShowWeekNumbers] = useState(false);
   const [firstDay, setFirstDay] = useState(0);
   const [weekNumberRule, setWeekNumberRule] = useState('auto');
-  const onCurrentValueChange = useCallback(
-    ({ value }) => {
-      setCurrentValue(value);
-    },
-    [setCurrentValue],
-  );
-  const onDisabledChange = useCallback(
-    ({ value }) => {
-      setDisabled(value);
-    },
-    [setDisabled],
-  );
-  const onZoomLevelChange = useCallback(
-    ({ value }) => {
-      setZoomLevel(value);
-    },
-    [setZoomLevel],
-  );
-  const onFirstDayChange = useCallback(
-    ({ value }) => {
-      setFirstDay(value);
-    },
-    [setFirstDay],
-  );
-  const onWeekNumberRuleChange = useCallback(
-    ({ value }) => {
-      setWeekNumberRule(value);
-    },
-    [setWeekNumberRule],
-  );
+  const onCurrentValueChange = useCallback(({ value }) => {
+    setCurrentValue(value);
+  }, []);
+  const onDisabledChange = useCallback(({ value }) => {
+    setDisabled(value);
+  }, []);
+  const onZoomLevelChange = useCallback(({ value }) => {
+    setZoomLevel(value);
+  }, []);
+  const onFirstDayChange = useCallback(({ value }) => {
+    setFirstDay(value);
+  }, []);
+  const onWeekNumberRuleChange = useCallback(({ value }) => {
+    setWeekNumberRule(value);
+  }, []);
   const onShowWeekNumbersChange = useCallback(
     ({ value }) => {
       setShowWeekNumbers(value);
@@ -73,7 +58,7 @@ export default function App() {
   const onOptionChange = useCallback(
     (e) => {
       if (e.name === 'zoomLevel') {
-        onZoomLevelChange(e);
+        onZoomLevelChange({ value: e.value });
       }
     },
     [onZoomLevelChange],

apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js

@@ -9,14 +9,13 @@ import HTMLReactParser from 'html-react-parser';
 import { REGENERATION_TEXT } from './data.js';
 
 function convertToHtml(value) {
-  const result = unified()
+  return unified()
     .use(remarkParse)
     .use(remarkRehype)
     .use(rehypeMinifyWhitespace)
     .use(rehypeStringify)
     .processSync(value)
     .toString();
-  return result;
 }
 const Message = ({ text, onRegenerateButtonClick }) => {
   const [icon, setIcon] = useState('copy');
@@ -31,7 +30,7 @@ const Message = ({ text, onRegenerateButtonClick }) => {
     return <span>{REGENERATION_TEXT}</span>;
   }
   return (
-    <React.Fragment>
+    <>
       <div className="chat-messagebubble-text">{HTMLReactParser(convertToHtml(text))}</div>
       <div className="bubble-button-container">
         <Button
@@ -47,7 +46,7 @@ const Message = ({ text, onRegenerateButtonClick }) => {
           onClick={onRegenerateButtonClick}
         />
       </div>
-    </React.Fragment>
+    </>
   );
 };
 export default Message;

apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/useApi.js

@@ -99,7 +99,7 @@ export const useApi = () => {
       const aiResponse = await getAIResponse(messageHistory.slice(0, -1));
       updateLastMessageContent(aiResponse);
     } catch {
-      updateLastMessageContent(messageHistory.at(-1).content);
+      updateLastMessageContent(messageHistory.at(-1)?.content);
       alertLimitReached();
     }
   }, [alertLimitReached, updateLastMessageContent]);

apps/demos/Demos/Chat/Customization/ReactJs/App.js

@@ -24,7 +24,7 @@ export default function App() {
     setMessages((prevMessages) => [...prevMessages, message]);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="chat-container">
         <Chat
           height={710}
@@ -110,6 +110,6 @@ export default function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/Chat/FileAttachments/ReactJs/App.js

@@ -58,7 +58,7 @@ export default function App() {
   }, []);
   const uploadFile = useCallback(() => {}, []);
   return (
-    <React.Fragment>
+    <>
       <div className="chat-container">
         <Chat
           height={710}
@@ -74,6 +74,6 @@ export default function App() {
           />
         </Chat>
       </div>
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/Chat/MessageEditing/ReactJs/App.js

@@ -16,8 +16,8 @@ const editingStrategy = {
   disabled: false,
   custom: ({ component, message }) => {
     const { items, user } = component.option();
-    const userId = user.id;
-    const lastNotDeletedMessage = items.findLast(
+    const userId = user?.id;
+    const lastNotDeletedMessage = items?.findLast(
       (item) => item.author?.id === userId && !item.isDeleted,
     );
     return message.id === lastNotDeletedMessage?.id;
@@ -79,7 +79,7 @@ export default function App() {
     setAllowDeleting(() => strategy);
   }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="chat-container">
         <Chat
           height={600}
@@ -122,6 +122,6 @@ export default function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/Chat/Overview/ReactJs/App.js

@@ -10,7 +10,7 @@ export default function App() {
     setMessages((prevMessages) => [...prevMessages, message]);
   }
   function typingStart({ user }) {
-    if (user.id === currentUser.id) {
+    if (user?.id === currentUser.id) {
       setSupportChatTypingUsers([currentUser]);
     } else {
       setUserChatTypingUsers([supportAgent]);
@@ -24,7 +24,7 @@ export default function App() {
     }
   }
   return (
-    <React.Fragment>
+    <>
       <Chat
         user={currentUser}
         items={messages}
@@ -41,6 +41,6 @@ export default function App() {
         onTypingEnd={typingEnd}
         typingUsers={supportChatTypingUsers}
       />
-    </React.Fragment>
+    </>
   );
 }

apps/demos/Demos/Common/CustomTextEditorButtons/ReactJs/App.js

@@ -20,7 +20,7 @@ function App() {
         setPasswordMode((prevPasswordMode) => (prevPasswordMode === 'text' ? 'password' : 'text'));
       },
     }),
-    [setPasswordMode],
+    [],
   );
   const currencyButton = useMemo(
     () => ({
@@ -42,7 +42,7 @@ function App() {
         }
       },
     }),
-    [setCurrencyFormat, setCurrencyValue],
+    [],
   );
   const todayButton = useMemo(
     () => ({
@@ -52,7 +52,7 @@ function App() {
         setDateValue(new Date().getTime());
       },
     }),
-    [setDateValue],
+    [],
   );
   const prevDateButton = useMemo(
     () => ({
@@ -62,7 +62,7 @@ function App() {
         setDateValue((prevDateValue) => prevDateValue - millisecondsInDay);
       },
     }),
-    [setDateValue],
+    [],
   );
   const nextDateButton = useMemo(
     () => ({
@@ -72,22 +72,16 @@ function App() {
         setDateValue((prevDateValue) => prevDateValue + millisecondsInDay);
       },
     }),
-    [setDateValue],
-  );
-  const onDateChanged = useCallback(
-    (e) => {
-      setDateValue(e.value);
-    },
-    [setDateValue],
-  );
-  const changeCurrency = useCallback(
-    (data) => {
-      setCurrencyValue(data.value);
-    },
-    [setCurrencyValue],
+    [],
   );
+  const onDateChanged = useCallback((e) => {
+    setDateValue(e.value);
+  }, []);
+  const changeCurrency = useCallback((data) => {
+    setCurrencyValue(data.value);
+  }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="dx-fieldset">
         <div className="dx-field">
           <div className="dx-field-label">Password TextBox</div>
@@ -157,7 +151,7 @@ function App() {
           </div>
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;