From fc79f3f7fa695e38da0e547791c9c3b72af3e4dd Mon Sep 17 00:00:00 2001
From: Rising Odegua <risingodegua@gmail.com>
Date: Mon, 3 May 2021 15:20:30 +0100
Subject: [PATCH] [Components][s]: Update views components to include
 validation

---
 src/components/views/Chart.js |  8 ++++++--
 src/components/views/Table.js | 26 ++++++++++----------------
 2 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/components/views/Chart.js b/src/components/views/Chart.js
index 188b8e70..687edb8c 100644
--- a/src/components/views/Chart.js
+++ b/src/components/views/Chart.js
@@ -1,8 +1,9 @@
 import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import createPlotlyComponent from "react-plotly.js/factory";
 let Plot;
 
-const PlotlyChart = (props) => {
+const PlotlyChart = ({spec}) => {
   const [plotCreated, setPlotCreated] = useState(0) //0: false, 1: true
 
   useEffect(() => {
@@ -18,7 +19,7 @@ const PlotlyChart = (props) => {
 
   return (
     <div data-testid="plotlyChart">
-      <Plot {...props.spec}
+      <Plot {...spec}
         layout={{ autosize: true }}
         style={{ width: "100%", height: "100%" }}
         useResizeHandler={true}
@@ -27,4 +28,7 @@ const PlotlyChart = (props) => {
   )
 }
 
+PlotlyChart.propTypes = {
+  spec: PropTypes.object.isRequired
+}
 export { PlotlyChart }
\ No newline at end of file
diff --git a/src/components/views/Table.js b/src/components/views/Table.js
index 2de9afc1..b426473b 100644
--- a/src/components/views/Table.js
+++ b/src/components/views/Table.js
@@ -1,24 +1,13 @@
 import React from 'react';
 import { DataGrid } from '@material-ui/data-grid';
+import PropTypes from 'prop-types';
 
 /**
- * Displays a table from a Frictionless dataset
- * @param schema: Frictionless Table Schema
- * @param data: an array of data objects e.g. [ {a: 1, b: 2}, {a: 5, b: 7} ]
+ * Displays dataset in tabular form using data grid
+ * @param columns: An array of column names with properties: e.g [{field: "col1", headerName: "col1"}, {field: "col2", headerName: "col2"}]
+ * @param data: an array of data objects e.g. [ {col1: 1, col2: 2}, {col1: 5, col2: 7} ]
  */
-const Table = ({ schema, data }) => {
-  const columns = schema.fields.map((field) => (
-    {
-      field: field.title || field.name,
-      headerName: field.name,
-      width: 300
-    }
-  ))
-  data = data.map((item, index)=>{
-    item.id = index //Datagrid requires every row to have an ID
-    return item
-  })
-  
+const Table = ({ columns, data }) => {
   return (
     <div data-testid="tableGrid" style={{ height: 400, width: '100%' }}>
       <DataGrid rows={data} columns={columns} pageSize={5} />
@@ -26,4 +15,9 @@ const Table = ({ schema, data }) => {
   );
 }
 
+Table.propTypes = {
+  columns: PropTypes.array.isRequired,
+  data: PropTypes.array.isRequired
+}
+
 export default Table