Change user data to be a fake API

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`.

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
   }
 }

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<CompanyData[]> {
+  return companyData;
+}

src/data/userData.ts → 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<T>(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<UserData[]> {
+  return shuffleArray(userData);
+}

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(
   <React.StrictMode>
     <App />
-  </React.StrictMode>
+  </React.StrictMode>,
 );