diff --git a/README.md b/README.md index 5da9a13..b1dc2c8 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,9 @@ Don't be afraid to ask questions, and do communicate your thinking. ## Goal -Test-drive a component that can take in data, and render it as a table. +Test-drive a component that can take in arbitrary data and render it as a table. Use `./design.png` as a reference. You don't need to worry about styling to begin with. -`./src/data/userData.ts` contains example data that should be rendered. +`./src/api/userData.ts` contains a fake API via the method `getUserData`, you will be able to look at the +shape of the data as described by the interface `UserData`. diff --git a/package-lock.json b/package-lock.json index 78b5a64..6a934bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@types/node": "^16.18.23", "@types/react": "^18.0.33", "@types/react-dom": "^18.0.11", + "prettier": "^3.5.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -13696,6 +13697,21 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz", + "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==", + "license": "MIT", + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index 29f2b1c..564eaa2 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.18.23", "@types/react": "^18.0.33", "@types/react-dom": "^18.0.11", + "prettier": "^3.5.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -39,5 +40,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "prettier": { + "singleQuote": true } } diff --git a/src/api/companyData.ts b/src/api/companyData.ts new file mode 100644 index 0000000..3804c8a --- /dev/null +++ b/src/api/companyData.ts @@ -0,0 +1,87 @@ +export interface CompanyData { + name: string; + address: string; + phoneNumber: string; +} + +const companyData: CompanyData[] = [ + { + name: 'Innovate Solutions Ltd.', + address: '123 Innovation Drive, Tech Park, Reading, RG2 6GF', + phoneNumber: '0118 496 0123', + }, + { + name: 'Apex Industries PLC', + address: '45 Apex Tower, Canary Wharf, London, E14 5NP', + phoneNumber: '020 7946 0456', + }, + { + name: 'QuantumLeap Analytics', + address: '789 Science Park, Cambridge, CB4 0WZ', + phoneNumber: '01223 496 0789', + }, + { + name: 'Starlight Retail Group', + address: '321 High Street, Manchester, M1 1AA', + phoneNumber: '0161 496 0321', + }, + { + name: 'Evergreen Logistics', + address: '56 Logistics Way, Magna Park, Lutterworth, LE17 4XN', + phoneNumber: '01455 496 0567', + }, + { + name: 'Pinnacle Construction', + address: '89 Builders Lane, Birmingham, B2 4DT', + phoneNumber: '0121 496 0890', + }, + { + name: 'Serenity Health & Wellness', + address: '10 Serene Avenue, Bath, BA1 1SU', + phoneNumber: '01225 496 0101', + }, + { + name: 'Fusion Digital Marketing', + address: '24 Digital Road, Shoreditch, London, EC1V 9DD', + phoneNumber: '020 7946 0245', + }, + { + name: 'Silverstream Financials', + address: '1 City Square, Leeds, LS1 2ES', + phoneNumber: '0113 496 0112', + }, + { + name: 'Bluebird Creative Agency', + address: '67 Creative Quarter, Bristol, BS1 6EA', + phoneNumber: '0117 496 0678', + }, + { + name: 'Oakwood Property Management', + address: '90 Property Point, Edinburgh, EH2 4DL', + phoneNumber: '0131 496 0901', + }, + { + name: 'Momentum Manufacturing', + address: '15 Industrial Estate, Coventry, CV1 2WT', + phoneNumber: '024 7649 6015', + }, + { + name: 'Golden Key Hospitality', + address: '7 Hospitality Hub, York, YO1 7JF', + phoneNumber: '01904 496 0077', + }, + { + name: 'Nexus Data Systems', + address: '33 Data Drive, Milton Keynes, MK9 2FN', + phoneNumber: '01908 496 0330', + }, + { + name: 'First-Rate Foods Distribution', + address: '88 Distribution Way, Glasgow, G1 1XQ', + phoneNumber: '0141 496 0888', + }, +]; + +export async function getCompanyData(): Promise { + return companyData; +} diff --git a/src/data/userData.ts b/src/api/userData.ts similarity index 90% rename from src/data/userData.ts rename to src/api/userData.ts index a9ae232..e7a8873 100644 --- a/src/data/userData.ts +++ b/src/api/userData.ts @@ -1,4 +1,4 @@ -interface UserData { +export interface UserData { id: string; firstName: string; lastName: string; @@ -8,7 +8,7 @@ interface UserData { rating: number; } -export const userData: UserData[] = [ +const userData: UserData[] = [ { id: '9da70cb8-4d17-4d79-ae93-8b6c47662c2c', firstName: 'Quinta', @@ -190,3 +190,17 @@ export const userData: UserData[] = [ rating: 1, }, ]; + +function shuffleArray(array: T[]): T[] { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } + return array; +} + +// MOCK User API, this will simulate returning different results +// as if the data is evolving +export async function getUserData(): Promise { + return shuffleArray(userData); +} diff --git a/src/index.tsx b/src/index.tsx index 1fd12b7..56a5fca 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,10 +4,10 @@ import './index.css'; import App from './App'; const root = ReactDOM.createRoot( - document.getElementById('root') as HTMLElement + document.getElementById('root') as HTMLElement, ); root.render( - + , );