From 46f24e9739f479f6a72ed61c83a667b4cd9e2668 Mon Sep 17 00:00:00 2001 From: nikek Date: Tue, 3 Mar 2020 17:17:10 +0100 Subject: [PATCH 1/2] add async data fetching & rendering to example page --- .../ExampleComponent/ExampleComponent.tsx.hbs | 42 +++++---- .../ExampleFetchComponent.test.tsx.hbs | 10 +++ .../ExampleFetchComponent.tsx.hbs | 90 +++++++++++++++++++ .../components/ExampleFetchComponent/index.ts | 1 + 4 files changed, 127 insertions(+), 16 deletions(-) create mode 100644 frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs create mode 100644 frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs create mode 100644 frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/index.ts diff --git a/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index e2a1e612cc..e8d2ed6888 100644 --- a/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/frontend/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -1,7 +1,7 @@ import React, { FC } from 'react'; -import { Typography, makeStyles, Theme } from '@material-ui/core'; - +import { Typography, Grid, makeStyles, Theme } from '@material-ui/core'; import { InfoCard, Header, Page, theme } from '@spotify-backstage/core'; +import ExampleFetchComponent from '../ExampleFetchComponent'; const useStyles = makeStyles(theme => ({ mainContentArea: { @@ -18,23 +18,33 @@ const useStyles = makeStyles(theme => ({ const ExampleComponent: FC<{}> = () => { const classes = useStyles(); + return (
-
-
- - Plugin page title - - - - All content should be wrapped in a card like this. - - -
+
+ + + Plugin page title + + + + + All content should be wrapped in a card like this. + + + + + + + + +
); diff --git a/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs b/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs new file mode 100644 index 0000000000..f7ec8c060e --- /dev/null +++ b/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx.hbs @@ -0,0 +1,10 @@ +import React from 'react'; +import { render } from '@testing-library/react'; +import ExampleFetchComponent from './ExampleFetchComponent'; + +describe('ExampleFetchComponent', () => { + it('should render', () => { + const rendered = render(); + expect(rendered.getByTestId('progress')).toBeInTheDocument(); + }); +}); diff --git a/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs new file mode 100644 index 0000000000..882797b263 --- /dev/null +++ b/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs @@ -0,0 +1,90 @@ +import React, { FC } from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Table from '@material-ui/core/Table'; +import TableBody from '@material-ui/core/TableBody'; +import TableCell from '@material-ui/core/TableCell'; +import TableContainer from '@material-ui/core/TableContainer'; +import TableHead from '@material-ui/core/TableHead'; +import TableRow from '@material-ui/core/TableRow'; +import LinearProgress from '@material-ui/core/LinearProgress'; +import Alert from '@material-ui/lab/Alert'; +import { useAsync } from 'react-use'; + +const useStyles = makeStyles({ + table: { + minWidth: 650, + }, +}); + +type User = { + gender: string; // "male" + name: { + title: string; //"Mr", + first: string; // "Duane", + last: string; //"Reed" + }; + location: object; // {street: {number: 5060, name: "Hickory Creek Dr"}, city: "Albany", state: "New South Wales",…} + email: string; // "duane.reed@example.com" + login: object; // {uuid: "4b785022-9a23-4ab9-8a23-cb3fb43969a9", username: "blackdog796", password: "patch",…} + dob: object; // {date: "1983-06-22T12:30:23.016Z", age: 37} + registered: object; // {date: "2006-06-13T18:48:28.037Z", age: 14} + phone: string; //"07-2154-5651" + cell: string; // "0405-592-879" + id: { + name: string; // "TFN", + value: string; // "796260432" + }; + picture: object; //{large: "https://randomuser.me/api/portraits/men/95.jpg",…} + nat: string; // "AU" +}; + +type DenseTableProps = { + users: User[]; +}; + +export const DenseTable: FC = ({ users }) => { + const classes = useStyles(); + + return ( + + + + + Name + Email + Nationality + + + + {users.map(user => ( + + + {user.name.first} {user.name.last} + + {user.email} + {user.nat} + + ))} + +
+ + ); +}; + +const ExampleFetchComponent: FC<{}> = () => { + const { value, loading, error } = useAsync(async (): Promise => { + const response = await fetch('https://randomuser.me/api/?results=100'); + const data = await response.json(); + return data.results; + }, []); + + if (loading) { + return ; + } else if (error) { + return {error.message}; + } else { + return ; + } +}; + +export default ExampleFetchComponent; diff --git a/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/index.ts b/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/index.ts new file mode 100644 index 0000000000..3e53453948 --- /dev/null +++ b/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/index.ts @@ -0,0 +1 @@ +export { default } from './ExampleFetchComponent'; From 995945b7654512b91043cdae44a85c216247fef0 Mon Sep 17 00:00:00 2001 From: nikek Date: Tue, 3 Mar 2020 17:45:58 +0100 Subject: [PATCH 2/2] add Alert component deps --- .../cli/templates/default-plugin/package.json.hbs | 3 +++ .../ExampleFetchComponent.tsx.hbs | 2 +- frontend/yarn.lock | 13 ++++++++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/frontend/packages/cli/templates/default-plugin/package.json.hbs b/frontend/packages/cli/templates/default-plugin/package.json.hbs index f674201821..e1b53882a8 100644 --- a/frontend/packages/cli/templates/default-plugin/package.json.hbs +++ b/frontend/packages/cli/templates/default-plugin/package.json.hbs @@ -12,5 +12,8 @@ }, "devDependencies": { "@spotify/web-scripts": "^6.0.0" + }, + "dependencies": { + "@material-ui/lab": "4.0.0-alpha.45" } } diff --git a/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs b/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs index 882797b263..8c1ebcf17d 100644 --- a/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs +++ b/frontend/packages/cli/templates/default-plugin/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx.hbs @@ -57,7 +57,7 @@ export const DenseTable: FC = ({ users }) => { {users.map(user => ( - + {user.name.first} {user.name.last} diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 9cfb48c7e2..4941d0b849 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2308,6 +2308,17 @@ dependencies: "@babel/runtime" "^7.4.4" +"@material-ui/lab@4.0.0-alpha.45": + version "4.0.0-alpha.45" + resolved "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.45.tgz#6e1abbdd6e44b9ef7b3eff8ef892a3da5dc52f10" + integrity sha512-zT6kUU87SHsPukiu3tlWg8V6o0tGS38c1b/xst/kPqX6eLbfqrROyxhHn1A8ZtHmqga1AKQdv/1llQoG80Afww== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.7.1" + clsx "^1.0.4" + prop-types "^15.7.2" + react-is "^16.8.0" + "@material-ui/styles@^4.9.0": version "4.9.0" resolved "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.0.tgz#10c31859f6868cfa9d3adf6b6c3e32c9d676bc76" @@ -5057,7 +5068,7 @@ clone@^1.0.2: resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e" integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4= -clsx@^1.0.2: +clsx@^1.0.2, clsx@^1.0.4: version "1.1.0" resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.0.tgz#62937c6adfea771247c34b54d320fb99624f5702" integrity sha512-3avwM37fSK5oP6M5rQ9CNe99lwxhXDOeSWVPAOYF6OazUTgZCMb0yWlJpmdD74REy1gkEaFiub2ULv4fq9GUhA==