Skip to content

Commit 23eca3d

Browse files
bronz3beardbronz3beard
committed
removed change data source
1 parent a4a1caf commit 23eca3d

5 files changed

Lines changed: 35 additions & 89 deletions

File tree

‎docs/CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515
###Changed
1616
- pagination now only one functioin to handle page changes, still needs refining but now has less code.
1717

18+
###Removed
19+
- removed change data source
20+
1821
## [0.1.0] - 16-06-2019
1922
###Removed
2023
- infinite scroll

‎src/Components/data-table.js‎

Lines changed: 15 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -9,82 +9,41 @@ import Pagination from "./pagination";
99

1010
class RecordTable extends PureComponent {
1111
state = {
12-
error: false,
13-
isLoading: false,
1412
columns: [
1513
{
1614
Header: "",
17-
commentHeader: "",
1815
Value: "",
19-
commentValue: "",
2016
sortOn: "",
2117
childItem: null,
2218
}, {
2319
Header: "Id",
24-
commentHeader: "Id",
2520
Value: "id",
26-
commentValue: "id",
2721
sortOn: "id",
2822
childItem: null,
2923
}, {
3024
Header: "Name",
31-
commentHeader: "Name",
3225
Value: "name",
33-
commentValue: "name",
3426
sortOn: "name",
3527
childItem: null,
36-
}, {
37-
Header: "username",
38-
commentHeader: "",
39-
Value: "username",
40-
commentValue: "",
41-
sortOn: "username",
42-
childItem: null,
4328
}, {
4429
Header: "Email",
45-
commentHeader: "Email",
4630
Value: "email",
47-
commentValue: "email",
4831
sortOn: "email",
4932
childItem: null,
5033
}, {
51-
Header: "Phone",
52-
commentHeader: "",
53-
Value: "phone",
54-
commentValue: "",
55-
sortOn: "phone",
56-
childItem: null,
57-
}, {
58-
Header: "Website",
59-
commentHeader: "",
60-
Value: "website",
61-
commentValue: "",
62-
sortOn: "website",
63-
childItem: null,
64-
}, {
65-
Header: "Address",
66-
commentHeader: "",
67-
Value: "address.city",
68-
commentValue: "",
69-
sortOn: "adress.city",
70-
childItem: [
71-
{
72-
Value: "address.zipcode",
73-
}, {
74-
Value: "address.street",
75-
}
76-
],
77-
}, {
78-
Header: "",
79-
commentHeader: "Comment",
34+
Header: "Comment",
8035
Value: "",
81-
commentValue: "body",
8236
sortOn: "body",
83-
childItem: null,
84-
},
37+
childItem:[
38+
{
39+
Value: "body",
40+
},
41+
]
42+
},
8543
],
44+
error: false,
45+
isLoading: false,
8646
data: [],
87-
checked: false,
8847
currentPage: 1,
8948
recordsPerPage: 30,
9049

@@ -101,10 +60,8 @@ class RecordTable extends PureComponent {
10160
}
10261
// Initial call to the server for records
10362
loadDataFromServer = () => {
104-
const { checked } = this.state;
105-
10663
const xmlhr = new XMLHttpRequest();
107-
const url = !checked ? `https://jsonplaceholder.typicode.com/comments` : `https://jsonplaceholder.typicode.com/users`;
64+
const url = `https://jsonplaceholder.typicode.com/comments`;
10865
this.setState({ isLoading: true });
10966

11067
xmlhr.open("GET", url, true);
@@ -124,7 +81,7 @@ class RecordTable extends PureComponent {
12481
}
12582
}
12683
};
127-
xmlhr.send();
84+
xmlhr.send();
12885
}
12986
// Column Sort handler + Logic
13087
columnSort = (key) => {
@@ -135,7 +92,6 @@ class RecordTable extends PureComponent {
13592
a[key] > b[key] :
13693
b[key] > a[key])
13794
);
138-
13995
this.setState({
14096
data: newData,
14197
sortOrder: {
@@ -152,20 +108,10 @@ class RecordTable extends PureComponent {
152108
query: query,
153109
});
154110
}
155-
handleCheckBox = () => {
156-
const { checked } = this.state;
157-
this.setState({
158-
recordsPerPage: 30,
159-
checked: !checked,
160-
query: "",
161-
});
162-
this.loadDataFromServer();
163-
}
164111
//Pagination
165112
handlePageChange = (event) => {
166113
const currentPage = Number(event.target.id);
167114
const type = event.target.textContent;
168-
console.log("TCL: RecordTable -> handlePageChange -> type", type)
169115

170116
this.setState({
171117
currentPage: currentPage,
@@ -191,7 +137,7 @@ class RecordTable extends PureComponent {
191137
}
192138
render() {
193139
const { error, isLoading, data, columns, query, PlaceHolder,
194-
currentPage, recordsPerPage, checked
140+
currentPage, recordsPerPage
195141
} = this.state;
196142

197143
const indexOfLastRecord = currentPage * recordsPerPage;
@@ -218,13 +164,6 @@ class RecordTable extends PureComponent {
218164
placeholder={PlaceHolder}
219165
onChange={this.tableSearchFilter}
220166
/>
221-
<div id="checkbox">
222-
<input
223-
type="checkbox"
224-
id="checkBox"
225-
onClick={this.handleCheckBox}
226-
defaultChecked="true" /> <strong>Change Data</strong>
227-
</div>
228167
</form>
229168

230169
if (error) {
@@ -236,20 +175,20 @@ class RecordTable extends PureComponent {
236175
</div>
237176
);
238177
}
239-
178+
240179
return (
241180
<div>
242181
{recordFilter}
243182
<table id="dataTable">
244-
<TableHeaders columns={columns} checked={checked} columnSort={this.columnSort} />
183+
<TableHeaders columns={columns} columnSort={this.columnSort} />
245184
{
246185
tableData.map((record, key) => {
247186
return (
248187
<TableRows
249188
key={key}
250189
columns={columns}
251190
data={record}
252-
checked={checked}
191+
id={console.log(columns)}
253192
/>
254193
);
255194
})

‎src/Components/expandable-item.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,18 +14,18 @@ class ExpandableItem extends PureComponent {
1414
const { data, columns, getDescendantProp } = this.props;
1515

1616
return(
17-
<tr>
17+
<td>
1818
{
1919
columns && columns.map((column, key) => {
2020
return (
21-
<td key={key}>
21+
<div key={key}>
2222
{getDescendantProp(data, column.Value)}
23-
</td>
23+
</div>
2424
);
2525
})
2626

2727
}
28-
</tr>
28+
</td>
2929
);
3030
}
3131
}

‎src/Components/table-headers.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,17 @@ class TableHeaders extends PureComponent {
77
componentDidMount() {
88
window.addEventListener("resize", this.resizeWindow);
99
}
10+
componentWillUnmount() {
11+
window.removeEventListener("resize", this.resizeWindow);
12+
}
1013
resizeWindow = () => {
1114
this.setState({
1215
width: window.innerWidth,
1316
});
1417
//console.log(window.innerWidth);
1518
}
1619
render() {
17-
const { columns, checked, columnSort } = this.props;
20+
const { columns, columnSort } = this.props;
1821

1922
if (this.state.width > 760) {
2023
return (
@@ -25,7 +28,7 @@ class TableHeaders extends PureComponent {
2528
columns.map((column, key) => {
2629
return (
2730
<th id="tableHeaders" key={key} onClick={() => columnSort(column.sortOn)}>
28-
{checked ? column.Header : column.commentHeader}
31+
{column.Header}
2932
</th>
3033
);
3134
})

‎src/Components/table-rows.js‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,19 @@ class TableRows extends PureComponent {
2222
}
2323
render() {
2424
const { expand } = this.state;
25-
const { columns, data, checked } = this.props;
26-
25+
const { columns, data } = this.props;
26+
27+
console.log("TCL: TableRows -> render -> columns.childItem", columns.childItem !==null)
2728
let expandVal;
28-
if (!expand) {
29+
if (columns.childItem !==null && !expand) {
2930
expandVal = " + ";
30-
} else if (expand) {
31+
} else if (columns.childItem !==null && expand) {
3132
expandVal = " - ";
3233
} else {
3334
expandVal = null;
3435
}
3536

36-
const hasItem = columns.map((item, key) => {
37+
const hasItem = columns.childItem !==null && columns.map((item, key) => {
3738
return (
3839
<ExpandableItem key={key} data={data} columns={item.childItem} getDescendantProp={this.getDescendantProp} />
3940
);
@@ -50,12 +51,12 @@ class TableRows extends PureComponent {
5051
{
5152
columns.map((column, key) => {
5253
return (
53-
<td key={key}>{this.getDescendantProp(data, checked ? column.Value : column.commentValue)}</td>
54+
<td key={key}>{this.getDescendantProp(data, column.Value)}</td>
5455
);
5556
})
5657
}
58+
{expand ? hasItem : null}
5759
</tr>
58-
{expand ? hasItem : null}
5960
</tbody>
6061
);
6162
}

0 commit comments

Comments
 (0)