25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
fraz 28ca3c349b first commit 10 ay önce
public first commit 10 ay önce
src first commit 10 ay önce
.eslintcache first commit 10 ay önce
.gitignore Initialize project using Create React App 10 ay önce
README.md first commit 10 ay önce
package-lock.json first commit 10 ay önce
package.json first commit 10 ay önce
yarn.lock Initialize project using Create React App 10 ay önce

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.