After I received the task and analysed that the objective is that we order tools at right time and also to keep track of lost tools.
We need to create a simple internal microsite that uses the Airtable API to show us:
- Which tools we should consider re-ordering immediately
- Any tools that have been lost / are missing This microsite will be used by two separate teams:
- The procurement team, who will be responsible for placing orders for restocking
- The Installations Installations team, to track down any tools lost by Engineers
When I have a good look at the task I started with whiteboarding.
-
API:
- Airtable
-
Frontend:
- JavaScript (ES6)
- React.js
- HTML5
- CSS3
- Bulma
- React-router-dom
- Clone repo code from GitHub onto your machine.
- Use
yarn
ornpm
to install all dependencies from thepackage.json
file. - Start server:
yarn start
/npm start
After reading the Airtable documentation and generating the API key I stored the key in the .env file.
Then I created const base
that I used later to fetch the data.
const API_KEY = process.env.REACT_APP_API_KEY
const base = new Airtable({ apiKey: `${API_KEY}` }).base('app5MyMq1VN6a1Zvu')
I used React Hooks React.useEffect
and React.useState
to fetch the data.
function App() {
const [ledger,setLedger] = React.useState([])
const [tools,setTools] = React.useState([])
React.useEffect(()=>{
base('Ledger')
.select({ view: 'Grid view' })
.eachPage((records, fetchNextPage)=>{
setLedger(records)
console.log(records)
console.log(records[0].fields['Asset Tag'].text)
console.log(records[0].fields['Tool Type'])
fetchNextPage()
})
base('Tools')
.select({ view: 'Grid view' })
.eachPage((records, fetchNextPage)=>{
setTools(records)
console.log(records)
console.log(records[0].fields['Tool Name'])
console.log(records[0].id)
fetchNextPage()
})