diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..1076f19 --- /dev/null +++ b/.env.example @@ -0,0 +1,2 @@ +#GRAPHQL ENDPOINT FOR THE COUNTRY DATA +REACT_APP_GRAPHQL_ENDPOINT = https://example.domain/graphql \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4d29575..48ff308 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +# Local Netlify folder +.netlify diff --git a/README.md b/README.md index b87cb00..e9989d6 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,15 @@ -# Getting Started with Create React App +# Country Table + +## 🌍 Table of countries + +This is a small project made to test out the Elastic UI package. + +Please visit https://elastic.github.io/eui/ to learn more about the package. + +![GitHub Light](./public/ejaasLogoDark.svg#gh-dark-mode-only) +![GitHub Dark](./public/ejaasLogoLight.svg#gh-light-mode-only) + +The app is live on: https://country-table.netlify.app/ This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). @@ -14,11 +25,6 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\ You will also see any lint errors in the console. -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - ### `npm run build` Builds the app for production to the `build` folder.\ @@ -28,19 +34,3 @@ The build is minified and the filenames include the hashes.\ Your app is ready to be deployed! See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can’t go back!** - -If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. - -You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). diff --git a/package-lock.json b/package-lock.json index 9d364f7..06e536c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,8 +25,12 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", + "react-twemoji": "^0.4.1", "typescript": "^4.6.2", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@types/react-twemoji": "^0.4.0" } }, "node_modules/@ampproject/remapping": { @@ -3973,6 +3977,15 @@ "redux": "^4.0.0" } }, + "node_modules/@types/react-twemoji": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@types/react-twemoji/-/react-twemoji-0.4.0.tgz", + "integrity": "sha512-OVkDaNTg9WqqM2MBqL68FNPsn+5aabQIbL9KY+ofK/Q4ENOuaHOWsg/jRD9zQ+GX5L+7LC1Ztgr4iK0/qZd17w==", + "dev": true, + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/react-virtualized-auto-sizer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz", @@ -11666,6 +11679,11 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -14520,6 +14538,22 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/react-twemoji": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/react-twemoji/-/react-twemoji-0.4.1.tgz", + "integrity": "sha512-bwq7UJzpKR8qsoEzKDlVCRODaOua7xKDVO5Lqp4UGx8yQ0Ng5ZWMtzS/DtDVL7oyr0gYu9JQ3GwWUxaqfex1ug==", + "dependencies": { + "lodash.isequal": "^4.5.0", + "prop-types": "^15.7.2", + "twemoji": "13.1.1" + }, + "engines": { + "node": ">=5.0" + }, + "peerDependencies": { + "react": ">=16.4.2" + } + }, "node_modules/react-virtualized-auto-sizer": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz", @@ -16387,6 +16421,62 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/twemoji": { + "version": "13.1.1", + "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.1.1.tgz", + "integrity": "sha512-IIIoq+n1lk1M1+evBKZD3DO0ud02fDQ4ssbgAv8rp3YBWUeNmskjlisFUPPDacQ50XS3bhrd4Kq9Q2gqhxb0dg==", + "dependencies": { + "fs-extra": "^8.0.1", + "jsonfile": "^5.0.0", + "twemoji-parser": "13.1.0", + "universalify": "^0.1.2" + } + }, + "node_modules/twemoji-parser": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.1.0.tgz", + "integrity": "sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg==" + }, + "node_modules/twemoji/node_modules/fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "dependencies": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "engines": { + "node": ">=6 <7 || >=8" + } + }, + "node_modules/twemoji/node_modules/fs-extra/node_modules/jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/twemoji/node_modules/jsonfile": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz", + "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==", + "dependencies": { + "universalify": "^0.1.2" + }, + "optionalDependencies": { + "graceful-fs": "^4.1.6" + } + }, + "node_modules/twemoji/node_modules/universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -20643,6 +20733,15 @@ "redux": "^4.0.0" } }, + "@types/react-twemoji": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@types/react-twemoji/-/react-twemoji-0.4.0.tgz", + "integrity": "sha512-OVkDaNTg9WqqM2MBqL68FNPsn+5aabQIbL9KY+ofK/Q4ENOuaHOWsg/jRD9zQ+GX5L+7LC1Ztgr4iK0/qZd17w==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-virtualized-auto-sizer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz", @@ -26217,6 +26316,11 @@ "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -28155,6 +28259,16 @@ } } }, + "react-twemoji": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/react-twemoji/-/react-twemoji-0.4.1.tgz", + "integrity": "sha512-bwq7UJzpKR8qsoEzKDlVCRODaOua7xKDVO5Lqp4UGx8yQ0Ng5ZWMtzS/DtDVL7oyr0gYu9JQ3GwWUxaqfex1ug==", + "requires": { + "lodash.isequal": "^4.5.0", + "prop-types": "^15.7.2", + "twemoji": "13.1.1" + } + }, "react-virtualized-auto-sizer": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz", @@ -29537,6 +29651,58 @@ } } }, + "twemoji": { + "version": "13.1.1", + "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.1.1.tgz", + "integrity": "sha512-IIIoq+n1lk1M1+evBKZD3DO0ud02fDQ4ssbgAv8rp3YBWUeNmskjlisFUPPDacQ50XS3bhrd4Kq9Q2gqhxb0dg==", + "requires": { + "fs-extra": "^8.0.1", + "jsonfile": "^5.0.0", + "twemoji-parser": "13.1.0", + "universalify": "^0.1.2" + }, + "dependencies": { + "fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "dependencies": { + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "requires": { + "graceful-fs": "^4.1.6" + } + } + } + }, + "jsonfile": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz", + "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==", + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^0.1.2" + } + }, + "universalify": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", + "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==" + } + } + }, + "twemoji-parser": { + "version": "13.1.0", + "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.1.0.tgz", + "integrity": "sha512-AQOzLJpYlpWMy8n+0ATyKKZzWlZBJN+G0C+5lhX7Ftc2PeEVdUU/7ns2Pn2vVje26AIZ/OHwFoUbdv6YYD/wGg==" + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/package.json b/package.json index d146160..d7826c2 100644 --- a/package.json +++ b/package.json @@ -20,14 +20,13 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "5.0.0", + "react-twemoji": "^0.4.1", "typescript": "^4.6.2", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", - "build": "react-scripts build", - "test": "react-scripts test", - "eject": "react-scripts eject" + "build": "react-scripts build" }, "eslintConfig": { "extends": [ @@ -46,5 +45,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@types/react-twemoji": "^0.4.0" } } diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..21472f2 Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..5b56c6b Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..025443b Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/ejaasLogoDark.svg b/public/ejaasLogoDark.svg new file mode 100644 index 0000000..350990c --- /dev/null +++ b/public/ejaasLogoDark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/ejaasLogoLight.svg b/public/ejaasLogoLight.svg new file mode 100644 index 0000000..c841df7 --- /dev/null +++ b/public/ejaasLogoLight.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..e9255ee Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..96041d2 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..4e8d338 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index aa069f2..65cf6fe 100644 --- a/public/index.html +++ b/public/index.html @@ -9,6 +9,7 @@ name="description" content="Web site created using create-react-app" /> + - React App + Country table diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a..0000000 Binary files a/public/logo192.png and /dev/null differ diff --git a/public/logo512.png b/public/logo512.png deleted file mode 100644 index a4e47a6..0000000 Binary files a/public/logo512.png and /dev/null differ diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..bd16fd8 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,21 +1,16 @@ { - "short_name": "React App", - "name": "Create React App Sample", + "short_name": "Country Table", + "name": "Country Table", "icons": [ { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" }, { - "src": "logo192.png", - "type": "image/png", - "sizes": "192x192" - }, - { - "src": "logo512.png", - "type": "image/png", - "sizes": "512x512" + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" } ], "start_url": ".", diff --git a/public/robots.txt b/public/robots.txt deleted file mode 100644 index e9e57dc..0000000 --- a/public/robots.txt +++ /dev/null @@ -1,3 +0,0 @@ -# https://www.robotstxt.org/robotstxt.html -User-agent: * -Disallow: diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/src/App.test.tsx b/src/App.test.tsx deleted file mode 100644 index 2a68616..0000000 --- a/src/App.test.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/App.tsx b/src/App.tsx index 3377d1f..322b10e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,22 +1,26 @@ import { ApolloProvider } from "@apollo/client"; - import { EuiProvider } from "@elastic/eui"; import { TableWrapper } from "./components/tableWrapper"; - +import "@elastic/eui/dist/eui_theme_light.css"; import { apolloClient } from "./utils"; -import "./App.css"; +import createCache from "@emotion/cache"; + +const cache = createCache({ + key: "myapp", + container: document.querySelector( + 'meta[name="elasticui-style-insert"]' + ) as HTMLElement, +}); function App() { return ( - <> + - -
- -
- +
+ +
- + ); } diff --git a/src/components/countryTable/CountryTable.tsx b/src/components/countryTable/CountryTable.tsx deleted file mode 100644 index 97b7673..0000000 --- a/src/components/countryTable/CountryTable.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { ICountryData } from "@app/data"; -import { EuiInMemoryTable } from "@elastic/eui"; -import { columns, sorting } from "./tableSetup"; - -export const CountryTable = ({ data }: { data: ICountryData }): JSX.Element => { - //const { euiTheme } = useEuiTheme(); - - console.log(data); - - return ( - <> - - - ); -}; diff --git a/src/components/countryTable/countryTable.tsx b/src/components/countryTable/countryTable.tsx new file mode 100644 index 0000000..75579eb --- /dev/null +++ b/src/components/countryTable/countryTable.tsx @@ -0,0 +1,50 @@ +/** @jsxImportSource @emotion/react */ +import { css } from "@emotion/react"; +import { ICountryData } from "../../data"; +import { EuiInMemoryTable, useEuiTheme } from "@elastic/eui"; +import { columns, SkeletonColumns, skeletonData, sorting } from "./tableSetup"; + +export const CountryTable = ({ + data, + error, + loading, +}: { + data: ICountryData | undefined; + error: string | undefined; + loading: boolean; +}): JSX.Element => { + const { euiTheme } = useEuiTheme(); + return ( + <> + + + ); +}; diff --git a/src/components/countryTable/index.ts b/src/components/countryTable/index.ts index d13fd4f..d71738b 100644 --- a/src/components/countryTable/index.ts +++ b/src/components/countryTable/index.ts @@ -1 +1 @@ -export { CountryTable } from "./CountryTable"; +export { CountryTable } from "./countryTable"; diff --git a/src/components/countryTable/tableSetup.tsx b/src/components/countryTable/tableSetup.tsx index c78d4ac..bccc888 100644 --- a/src/components/countryTable/tableSetup.tsx +++ b/src/components/countryTable/tableSetup.tsx @@ -1,30 +1,123 @@ -export const columns = [ +/** @jsxImportSource @emotion/react */ +import { css } from "@emotion/react"; +import { EuiBasicTableColumn, EuiLoadingContent } from "@elastic/eui"; +import { ICountry } from "../../data"; +import Twemoji from "react-twemoji"; + +export const columns: EuiBasicTableColumn[] = [ { field: "emojiU", name: "Flag", sortable: false, + truncateText: true, + render: (flag: string) => { + const emoji = flag.replaceAll("U+", "&#x"); + const emojiSingleCode = emoji.replaceAll(" ", ";"); + return ( + +

+ + ); + }, + }, + { + field: "name", + name: "Country Name", + sortable: true, + truncateText: true, + }, + { + field: "continent.name", + name: "Continent", + sortable: true, + truncateText: true, + }, + { + field: "code", + name: "ISO Code", + sortable: true, + truncateText: false, + }, + { + field: "currency", + name: "Currency", + sortable: true, + truncateText: false, + }, +]; + +export const SkeletonColumns: EuiBasicTableColumn[] = [ + { + field: "emojiU", + name: "Flag", + sortable: false, + render: () => ( + + ), truncateText: false, }, { field: "name", name: "Country Name", sortable: true, + render: () => ( + + ), truncateText: true, }, { - field: "continent", + field: "continent.name", name: "Continent", sortable: true, + render: () => ( + + ), truncateText: true, }, { field: "code", name: "ISO Code", sortable: true, + render: () => ( + + ), truncateText: false, }, ]; +export const skeletonData: ICountry[] = Array(10).fill({ + emojiU: "", + name: "", + continent: { name: "" }, + code: "", +}); + interface ISorting { sort: { field: string; diff --git a/src/components/tableWrapper/TableWrapper.tsx b/src/components/tableWrapper/TableWrapper.tsx deleted file mode 100644 index 5736497..0000000 --- a/src/components/tableWrapper/TableWrapper.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { OperationVariables } from "@apollo/client"; -import { useQuery } from "@apollo/client/react/hooks"; -import { GET_COUNTRIES, ICountryData } from "@app/data"; -import { CountryTable } from "../countryTable/CountryTable"; - -export const TableWrapper = (): JSX.Element => { - const { loading, error, data } = useQuery( - GET_COUNTRIES - ); - - if (loading) return

...Loading

; - if (error) return

ERROR

; - if (!data) return

Not found

; - - return
{data && }
; -}; diff --git a/src/components/tableWrapper/index.ts b/src/components/tableWrapper/index.ts index 1655e3f..a199676 100644 --- a/src/components/tableWrapper/index.ts +++ b/src/components/tableWrapper/index.ts @@ -1 +1 @@ -export { TableWrapper } from "./TableWrapper"; +export { TableWrapper } from "./tableWrapper"; diff --git a/src/components/tableWrapper/tableWrapper.tsx b/src/components/tableWrapper/tableWrapper.tsx new file mode 100644 index 0000000..a86259e --- /dev/null +++ b/src/components/tableWrapper/tableWrapper.tsx @@ -0,0 +1,39 @@ +/** @jsxImportSource @emotion/react */ +import { css } from "@emotion/react"; +import { OperationVariables } from "@apollo/client"; +import { useQuery } from "@apollo/client/react/hooks"; +import { GET_COUNTRIES, ICountryData } from "../../data"; +import { CountryTable } from "../countryTable/countryTable"; + +export const TableWrapper = (): JSX.Element => { + const { data, error, loading } = useQuery( + GET_COUNTRIES + ); + + const errorMessage = error + ? "An error occured while loading the country data. Please try reloading the page to refetch the data." + : undefined; + if (error) { + console.error(error); + } + + return ( +
+ +
+ ); +}; diff --git a/src/data/CountryData.fragment.ts b/src/data/countryData.fragment.ts similarity index 83% rename from src/data/CountryData.fragment.ts rename to src/data/countryData.fragment.ts index 8938f4b..94f342a 100644 --- a/src/data/CountryData.fragment.ts +++ b/src/data/countryData.fragment.ts @@ -7,5 +7,8 @@ export const COUNTRY_DATA = gql` emojiU code name + continent { + name + } } `; diff --git a/src/data/dataTypes.ts b/src/data/dataTypes.ts index e93bafd..3529cd6 100644 --- a/src/data/dataTypes.ts +++ b/src/data/dataTypes.ts @@ -2,24 +2,24 @@ export interface ICountryData { countries: ICountry[]; } -interface ICountry { +export interface ICountry { code: string; name: string; - native: string; - phone: string; + native?: string; + phone?: string; continent: IContinent; capital?: string; currency?: string; - languages: ILanguage[]; - emoji: string; + languages?: ILanguage[]; + emoji?: string; emojiU: string; - states: IState[]; + states?: IState[]; } interface IContinent { - code: string; + code?: string; name: string; - countries: ICountry[]; + countries?: ICountry[]; } interface ILanguage { diff --git a/src/data/GetCountries.query.ts b/src/data/getCountries.query.ts similarity index 75% rename from src/data/GetCountries.query.ts rename to src/data/getCountries.query.ts index 9ce7396..69f612a 100644 --- a/src/data/GetCountries.query.ts +++ b/src/data/getCountries.query.ts @@ -1,5 +1,5 @@ import { gql } from "@apollo/client"; -import { COUNTRY_DATA } from "./CountryData.fragment"; +import { COUNTRY_DATA } from "./countryData.fragment"; export const GET_COUNTRIES = gql` query GetCountryList { diff --git a/src/data/index.ts b/src/data/index.ts index c6c1b64..81b091b 100644 --- a/src/data/index.ts +++ b/src/data/index.ts @@ -1,2 +1,2 @@ -export type { ICountryData } from "./dataTypes"; -export { GET_COUNTRIES } from "./GetCountries.query"; +export type { ICountryData, ICountry } from "./dataTypes"; +export { GET_COUNTRIES } from "./getCountries.query"; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index ec2585e..0000000 --- a/src/index.css +++ /dev/null @@ -1,13 +0,0 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; -} diff --git a/src/index.tsx b/src/index.tsx index ef2edf8..b1ef1c0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,17 +1,10 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; ReactDOM.render( , - document.getElementById('root') + document.getElementById("root") ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/reportWebVitals.ts b/src/reportWebVitals.ts deleted file mode 100644 index 49a2a16..0000000 --- a/src/reportWebVitals.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { ReportHandler } from 'web-vitals'; - -const reportWebVitals = (onPerfEntry?: ReportHandler) => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 8f2609b..0000000 --- a/src/setupTests.ts +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/src/utils/Apollo.tsx b/src/utils/apollo.tsx similarity index 88% rename from src/utils/Apollo.tsx rename to src/utils/apollo.tsx index 6fc98ec..0a127c5 100644 --- a/src/utils/Apollo.tsx +++ b/src/utils/apollo.tsx @@ -5,7 +5,7 @@ import { DefaultOptions, } from "@apollo/client"; -const ENDPOINT = import.meta.env.VITE_GRAPHQL_ENDPOINT; +const ENDPOINT: string = process.env.REACT_APP_GRAPHQL_ENDPOINT || ""; const defaultOptions: DefaultOptions = { watchQuery: { diff --git a/src/utils/index.ts b/src/utils/index.ts index 0637bfd..06cddc5 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1 +1 @@ -export { apolloClient } from "./Apollo"; +export { apolloClient } from "./apollo";