Fix Datasource (#69)

Author: ajivanyandev

src/pages/tasks/tasks.jsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import { DataSource } from 'devextreme-react/common/data';
+import { CustomStore } from 'devextreme-react/common/data';
 import DataGrid, {
   Column,
   Pager,
   Paging,
   FilterRow,
-  Lookup
 } from 'devextreme-react/data-grid';
 import './tasks.scss';
 
@@ -27,85 +26,61 @@ export function Tasks() {
         <Pager showPageSizeSelector={true} showInfo={true} />
         <FilterRow visible={true} />
 
-        <Column dataField={'Task_ID'} width={90} hidingPriority={2} />
+        <Column dataField={'id'} width={90} hidingPriority={1} />
         <Column
-          dataField={'Task_Subject'}
+          dataField={'text'}
           width={190}
           caption={'Subject'}
-          hidingPriority={8}
+          hidingPriority={6}
         />
         <Column
-          dataField={'Task_Status'}
+          dataField={'status'}
           caption={'Status'}
-          hidingPriority={6}
+          hidingPriority={4}
         />
         <Column
-          dataField={'Task_Priority'}
-          caption={'Priority'}
-          hidingPriority={5}
-        >
-          <Lookup
-            dataSource={priorities}
-            valueExpr={'value'}
-            displayExpr={'name'}
-          />
-        </Column>
-        <Column
-          dataField={'ResponsibleEmployee.Employee_Full_Name'}
+          dataField={'owner'}
           caption={'Assigned To'}
           allowSorting={false}
-          hidingPriority={7}
+          hidingPriority={5}
         />
         <Column
-          dataField={'Task_Start_Date'}
+          dataField={'startDate'}
           caption={'Start Date'}
           dataType={'date'}
-          hidingPriority={3}
+          hidingPriority={2}
         />
         <Column
-          dataField={'Task_Due_Date'}
+          dataField={'dueDate'}
           caption={'Due Date'}
           dataType={'date'}
-          hidingPriority={4}
+          hidingPriority={3}
         />
         <Column
-          dataField={'Task_Priority'}
+          dataField={'priority'}
           caption={'Priority'}
           name={'Priority'}
-          hidingPriority={1}
-        />
-        <Column
-          dataField={'Task_Completion'}
-          caption={'Completion'}
           hidingPriority={0}
         />
       </DataGrid>
     </React.Fragment>
 )}
 
-const dataSource = new DataSource({
-  store: {
-    version: 2,
-    type: 'odata',
-    key: 'Task_ID',
-    url: 'https://js.devexpress.com/Demos/DevAV/odata/Tasks'
-  },
-  expand: 'ResponsibleEmployee',
-  select: [
-    'Task_ID',
-    'Task_Subject',
-    'Task_Start_Date',
-    'Task_Due_Date',
-    'Task_Status',
-    'Task_Priority',
-    'Task_Completion',
-    'ResponsibleEmployee/Employee_Full_Name'
-  ]
-});
+const dataSource = {
+  store: new CustomStore({
+    key: 'id',
+    async load() {
+      try {
+        const response = await fetch(`https://js.devexpress.com/Demos/RwaService/api/Employees/AllTasks`);
+
+        const result = await response.json();
 
-const priorities = [
-  { name: 'High', value: 4 },
-  { name: 'Urgent', value: 3 },
-  { name: 'Normal', value: 2 },
-  { name: 'Low', value: 1 }
-];
+        return {
+          data: result,
+        };
+      } catch {
+        throw new Error(`Data Loading Error`);
+      }
+    },
+  })
+};