Skip to content

Commit b863b9f

Browse files
InaGlushkovaInaGlushkova
committed
chore: bump versions and update kendo-react-graphql app
1 parent 2052e10 commit b863b9f

File tree

11 files changed

+92
-83
lines changed

11 files changed

+92
-83
lines changed

‎examples/kendo-react-graphql/client/package.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@progress/kendo-data-query": "^1.3.1",
7-
"@progress/kendo-drawing": "^1.5.6",
8-
"@progress/kendo-react-dateinputs": "^1.1.0",
9-
"@progress/kendo-react-dropdowns": "^1.1.0",
10-
"@progress/kendo-react-grid": "^1.1.0",
11-
"@progress/kendo-react-inputs": "^1.1.0",
12-
"@progress/kendo-react-intl": "^1.1.0",
13-
"@progress/kendo-react-pdf": "^1.1.0",
14-
"@progress/kendo-theme-default": "^2.54.0",
15-
"apollo-boost": "^0.1.10",
6+
"@apollo/client": "^3.5.10",
7+
"@progress/kendo-data-query": "^1.7.1",
8+
"@progress/kendo-drawing": "^1.21.2",
9+
"@progress/kendo-react-dateinputs": "^11.0.0",
10+
"@progress/kendo-react-dropdowns": "^11.0.0",
11+
"@progress/kendo-react-grid": "^11.0.0",
12+
"@progress/kendo-react-inputs": "^11.0.0",
13+
"@progress/kendo-react-intl": "^11.0.0",
14+
"@progress/kendo-react-pdf": "^11.0.0",
15+
"@progress/kendo-theme-default": "^11.0.2",
1616
"bootstrap": "^4.1.1",
1717
"cldr-data": "^32.0.1",
18-
"graphql": "^0.13.2",
18+
"graphql": "^16.11.0",
1919
"jquery": "^3.3.1",
20+
"lodash.flowright": "^3.5.0",
2021
"popper.js": "^1.14.3",
21-
"react": "^16.4.1",
22-
"react-apollo": "^2.1.6",
23-
"react-dom": "^16.4.1",
24-
"react-scripts": "1.1.4"
22+
"react": "^18",
23+
"react-dom": "^18",
24+
"react-scripts": "^5.0.1"
2525
},
2626
"scripts": {
2727
"start": "react-scripts start",

‎examples/kendo-react-graphql/client/src/App.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import 'bootstrap';
44
import './App.css';
55
import GridContainer from './components/GridContainer'
66
import ProductsForm from './components/ProductForm'
7-
import ApolloClient from 'apollo-boost';
8-
import { ApolloProvider } from 'react-apollo';
7+
import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
98

109

1110
// apollo client setup
1211
const client = new ApolloClient({
13-
uri: 'http://localhost:4000/graphql'
14-
})
12+
uri: 'http://localhost:4000/graphql',
13+
cache: new InMemoryCache(),
14+
});
1515

1616
class App extends Component {
1717

‎examples/kendo-react-graphql/client/src/App.test.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import App from './App';
44

55
it('renders without crashing', () => {
66
const div = document.createElement('div');
7-
ReactDOM.render(<App />, div);
8-
ReactDOM.unmountComponentAtNode(div);
7+
const root = createRoot(div);
8+
root.render(<App />);
9+
root.unmount();
910
});

‎examples/kendo-react-graphql/client/src/components/GridContainer.jsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import React, {Component} from 'react';
2-
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
2+
import { Grid, GridColumn, GridToolbar, GridToolbarFilter, GridToolbarColumnsChooser } from '@progress/kendo-react-grid';
3+
import { gearIcon } from '@progress/kendo-svg-icons';
34
import MyCommandCell from './MyCommandCell'
4-
import { graphql, compose } from 'react-apollo';
55
import { getProductsQuery, deleteProductMutation } from '../queries/queries';
6-
6+
import { graphql } from '@apollo/client/react/hoc';
7+
import flowRight from 'lodash.flowright';
78

89
class GridContainer extends Component {
910

@@ -39,28 +40,27 @@ class GridContainer extends Component {
3940
<Grid data={this.props.getProductsQuery.loading === true ? [] : this.props.getProductsQuery.products}
4041
onRowClick={this.handleRowClick}
4142
style={{ maxHeight: "600px" }}
43+
adaptive={true}
44+
dataItemKey="ProductID"
45+
autoProcessData={true}
46+
navigatable={true}
4247
>
4348
<GridToolbar>
44-
<button
45-
title="Add new"
46-
className="k-button k-primary"
47-
onClick={this.handleAddItem}
48-
disabled={!this.props.inEdit}
49-
>Add new
50-
</button>
49+
<GridToolbarFilter svgIcon={gearIcon} />
50+
<GridToolbarColumnsChooser />
5151
</GridToolbar>
52-
<GridColumn field="ProductID" title="ID" width="300"/>
52+
<GridColumn field="ProductID" title="ID" width="100px" />
5353
<GridColumn field="ProductName" title="Product Name"/>
54-
<GridColumn field="UnitPrice" title="Unit Price" width="150px"/>
54+
<GridColumn field="UnitPrice" title="Unit Price" width="150px" />
5555
<GridColumn field="UnitsInStock" title="Units in Stock" width="150px"/>
56-
<GridColumn cell={this.CommandCell} width="120px" />
56+
<GridColumn cells={{ data: this.CommandCell }} width="120px" />
5757
</Grid>
5858
</div>
5959
);
6060
}
6161
}
6262

63-
export default compose(
63+
export default flowRight(
6464
graphql(getProductsQuery, { name: "getProductsQuery" }),
6565
graphql(deleteProductMutation, { name: "deleteProductMutation" })
66-
)(GridContainer);
66+
)(GridContainer);

‎examples/kendo-react-graphql/client/src/components/MyCommandCell.js‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,23 @@
11
import React from 'react';
2-
import { GridCell } from '@progress/kendo-react-grid';
2+
import { Button } from '@progress/kendo-react-buttons';
33

44
export default function MyCommandCell(remove) {
5-
return class extends GridCell {
6-
render() {
7-
return (
8-
<td>
9-
<button
10-
className="k-button k-grid-remove-command"
11-
onClick={(e) => window.confirm('Confirm deleting: ' + this.props.dataItem.ProductName) && remove(this.props.dataItem)}>
12-
Remove
13-
</button>
14-
</td>
15-
);
16-
}
17-
}
18-
};
5+
return function CommandCell(props) {
6+
const { dataItem } = props;
7+
8+
return (
9+
<td>
10+
<Button
11+
className="k-grid-remove-command"
12+
onClick={(e) => {
13+
if (window.confirm(`Confirm deleting: ${dataItem.ProductName}`)) {
14+
remove(dataItem);
15+
}
16+
}}
17+
>
18+
Remove
19+
</Button>
20+
</td>
21+
);
22+
};
23+
}

‎examples/kendo-react-graphql/client/src/components/ProductForm.jsx‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import React, {Component} from 'react';
22
import { NumericTextBox } from '@progress/kendo-react-inputs';
3-
import { graphql, compose } from 'react-apollo';
3+
import { Button } from '@progress/kendo-react-buttons';
4+
import { Input } from '@progress/kendo-react-inputs';
5+
import { Label } from '@progress/kendo-react-labels';
6+
import { graphql } from '@apollo/client/react/hoc';
7+
import flowRight from 'lodash.flowright';
48
import { addProductMutation, getProductsQuery, updateProductMutation} from '../queries/queries';
59

610
class ProductsForm extends Component {
@@ -78,51 +82,50 @@ class ProductsForm extends Component {
7882
</div>
7983
<form className="k-form" onSubmit={this.handleSubmit}>
8084
<fieldset>
81-
<label className="k-form-field">
85+
<Label className="k-form-field">
8286
<span>Product Name</span>
83-
<input
87+
<Input
8488
required
8589
className="k-textbox"
8690
placeholder="Product Name"
8791
value={this.state.ProductName}
8892
onChange={(e) => {
8993
this.setState({ProductName: e.target.value, internalUpdate: true})
9094
}}/>
91-
</label>
92-
<label className="k-form-field">
95+
</Label>
96+
<Label className="k-form-field">
9397
<span>Unit Price</span>
9498
<NumericTextBox
9599
style={{width: "100%"}}
96100
value={this.state.UnitPrice}
97101
onChange={(e) => {
98102
this.setState({UnitPrice: e.value, internalUpdate: true})
99103
}}/>
100-
</label>
101-
<label className="k-form-field">
104+
</Label>
105+
<Label className="k-form-field">
102106
<span>Units in Stock</span>
103107
<NumericTextBox
104108
value={this.state.UnitsInStock}
105109
style={{width: "100%"}}
106110
onChange={(e) => {
107111
this.setState({UnitsInStock: e.value, internalUpdate: true})
108112
}}/>
109-
</label>
113+
</Label>
110114
</fieldset>
111115
<div className="text-right">
112-
<button type="button" className="k-button k-primary" type="submit">{!this.props.inEdit
116+
<Button className="k-button k-primary" type="submit">{!this.props.inEdit
113117
? "Add new product"
114118
: "Update"
115-
}</button>
119+
}</Button>
116120
</div>
117121
</form>
118122
</div>
119123
)
120124
}
121125
}
122126

123-
export default compose(
124-
graphql(addProductMutation, {name: "addProductMutation"}),
127+
export default flowRight(
128+
graphql(addProductMutation, { name: "addProductMutation" }),
125129
graphql(getProductsQuery, { name: "getProductsQuery" }),
126130
graphql(updateProductMutation, { name: "updateProductMutation" })
127-
128131
)(ProductsForm);

‎examples/kendo-react-graphql/client/src/index.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import { createRoot } from 'react-dom/client';
33
import './index.css';
44
import App from './App';
55

6-
ReactDOM.render(<App />, document.getElementById('root'));
6+
const container = document.getElementById('root');
7+
const root = createRoot(container);
8+
root.render(<App />);

‎examples/kendo-react-graphql/client/src/queries/queries.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { gql } from 'apollo-boost';
1+
import { gql } from '@apollo/client';
22

3-
const getProductsQuery = gql `
3+
const getProductsQuery = gql`
44
{
55
products {
66
ProductID

‎examples/kendo-react-graphql/server/app.js‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
const express = require('express');
2-
const graphqlHTTP = require('express-graphql');
2+
const { createHandler } = require('graphql-http/lib/use/express');
33
const schema = require('./schema/schema');
4-
const cors = require('cors')
4+
const cors = require('cors');
55

66
const app = express();
77

8-
9-
// allow cross-origin requests
108
app.use(cors());
119

12-
// bind express with graphql
13-
app.use('/graphql', graphqlHTTP({
14-
schema
10+
app.all('/graphql', createHandler({
11+
schema: schema,
12+
graphiql: true,
1513
}));
1614

1715
app.listen(4000, () => {
18-
console.log('now listening for requests on port 4000');
16+
console.log('now listening for requests on port 4000');
1917
});

‎examples/kendo-react-graphql/server/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
"author": "",
1010
"license": "ISC",
1111
"dependencies": {
12-
"cors": "^2.8.4",
13-
"express": "^4.16.3",
14-
"express-graphql": "^0.6.12",
15-
"graphql": "^0.13.2",
16-
"uuid": "^3.2.1"
12+
"cors": "^2.8.5",
13+
"express": "^5.1.0",
14+
"graphql-http": "^1.22.4",
15+
"graphql": "^16.11.0",
16+
"uuid": "^11.1.0"
1717
}
1818
}

0 commit comments

Comments
 (0)