Demos: review fix

Author: anna-shakhova

apps/demos/Demos/CardView/FieldTemplate/React/Employee.tsx

@@ -8,12 +8,12 @@ interface EmployeeProps {
 }
 
 const EmployeeComponent = ({ employeeID }: EmployeeProps) => {
-  const employee = useMemo<Employee>(
+  const employee = useMemo<Employee | undefined>(
     () => employees.find((e: Employee) => e.ID === employeeID),
     [employeeID]
   );
 
-  return <button className='task__link-button'>{ employee.Name }</button>;
+  return <button className='task__link-button'>{ employee?.Name }</button>;
 };
 
 export default EmployeeComponent;

apps/demos/Demos/CardView/FieldTemplate/React/Priority.tsx

@@ -7,15 +7,15 @@ interface PriorityProps {
 }
 
 const PriorityComponent = ({ priorityID }: PriorityProps) => {
-  const priority = useMemo<Priority>(
+  const priority = useMemo<Priority | undefined>(
     () => priorities.find((p: Priority) => p.id === priorityID),
     [priorityID]
   );
 
   return (
-    <div className={`task__priority task__priority--${priority.postfix}`}>
+    <div className={`task__priority task__priority--${priority?.postfix}`}>
       <div className="task__indicator" />
-      <div>{ priority.text }</div>
+      <div>{ priority?.text }</div>
     </div>
   );
 };

apps/demos/Demos/CardView/FieldTemplate/ReactJs/Employee.js

@@ -3,6 +3,6 @@ import { employees } from './data.js';
 
 const EmployeeComponent = ({ employeeID }) => {
   const employee = useMemo(() => employees.find((e) => e.ID === employeeID), [employeeID]);
-  return <button className="task__link-button">{employee.Name}</button>;
+  return <button className="task__link-button">{employee?.Name}</button>;
 };
 export default EmployeeComponent;

apps/demos/Demos/CardView/FieldTemplate/ReactJs/Priority.js

@@ -4,9 +4,9 @@ import { priorities } from './data.js';
 const PriorityComponent = ({ priorityID }) => {
   const priority = useMemo(() => priorities.find((p) => p.id === priorityID), [priorityID]);
   return (
-    <div className={`task__priority task__priority--${priority.postfix}`}>
+    <div className={`task__priority task__priority--${priority?.postfix}`}>
       <div className="task__indicator" />
-      <div>{priority.text}</div>
+      <div>{priority?.text}</div>
     </div>
   );
 };

apps/demos/Demos/CardView/Selection/React/App.tsx

@@ -32,7 +32,7 @@ const App = () => {
 
   const onSelectionModeChange = useCallback((value: SingleOrMultiple) => {
     setSelectionMode(value);
-    cardViewRef.current.instance().clearSelection();
+    cardViewRef.current?.instance().clearSelection();
   }, []);
 
   return (

apps/demos/Demos/CardView/Selection/ReactJs/App.js

@@ -21,7 +21,7 @@ const App = () => {
   const cardViewRef = useRef(null);
   const onSelectionModeChange = useCallback((value) => {
     setSelectionMode(value);
-    cardViewRef.current.instance().clearSelection();
+    cardViewRef.current?.instance().clearSelection();
   }, []);
   return (
     <>