Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
fraz 28ca3c349b first commit vor 9 Monaten
public first commit vor 9 Monaten
src first commit vor 9 Monaten
.eslintcache first commit vor 9 Monaten
.gitignore Initialize project using Create React App vor 9 Monaten
README.md first commit vor 9 Monaten
package-lock.json first commit vor 9 Monaten
package.json first commit vor 9 Monaten
yarn.lock Initialize project using Create React App vor 9 Monaten

README.md

Running The Frontend

npm install in the frontend directory to install the required modules then npm run start to start the dev server by default on localhost:3000

yarn install && yarn start should work too.

Design Choices

  • Frameworks
    • I decided to use ReactJS and Redux
      • I’m pretty comfortable with it but it’s been a while since I used it without TypeScript
      • Decided to use createSlice from the redux toolkit since this appears to be standard now
    • I used material-ui for some nice prebuilt visual components
    • I used react-flip-move for some list animations

Features

Payments

  • Payments are displayed in a nice material-ui card.
  • I added a bit more information to each card.
  • I found and added react-flip-move which adds some nice animations
    • I believe there’s an issue when running it in dev that swapping tabs can cause some strange behavior
      • removing react-flip-move and replacing with an alternative is a simple fix

Polling

  • Payments are polled using setInterval with an interval of 1
    • Since it’s doing an IO request it’s pretty unreliable and likely to miss some requests
  • A good alternative could be modifying the server to use websockets

Redux Payments Store

  • Holds all payments
    • uses unshift to add to front of list which is most likely inefficient (not sure on JavaScript implementation of unshift).
      • allows for the nice animation
    • Only holds 25 payments at any one time
      • We only care about 25 payments from the specification so this should be okay
  • Holds latest error information
    • Only holds a single error
    • In a larger system I’d give errors their own store
    • I originally thought the /GET endpoint was similar to the /POST endpoint and would return errors sometimes

Filters

  • You can filter based on each field and remove filters as you progress
    • The implementation allows for multiple filters on the same field
      • Useful for searching memos
      • Could be extended to a “person” filter which looks only at receiver and sender name

‘any’ type filter

I gave some thought onto implementing a filter type that searches through all fields. Some implementation ideas I had were

  • Apply each filter to the original payments input and add all outputs to an array then remove duplicates
  • Combine all fields to a single string and use indexOf
    • has obvious possible undesirable results

Redux Filter Store

  • Handles the current user input
    • Type & Query
  • Handles the current active filters
  • User input could be changed to use useState() or in it’s own store

Directory Layout

I used the default directory structure that is recommended with create-react-app.

Code Quality & Cleanliness

Generally I’d use an airbnb eslint configuration, this instance the setup complained too long and it’s been a while since I messed around with non TypeScript eslint.

There’s no tests but tests could be added to ensure reducers work correctly and components have the correct behaviour. Jasmine / Jest tests could be easily implemented.