Inflist is a infinitely nestable todo list written in PureScript. It's an excercise and an experiment to better understand the interoperability between PureScript and React.

N.B: I'm still learning PureScript so there will be errors 🤓. Any correction / improvement is highly appreciated!

Introduction

Architecture

This application uses purescript-react-basic and purescript-react-basic-hook to operate using React as the user interface library. Even though purescript-react-basic is almost not maintained anymore, purescript-react-basic-hook is quite a formidable porting with a really flexible API.

The global state is managed through the use of the useContextSelector hook and useReducer hook. The React Context API should not be used for highly dynamic values such as the application's state since it will cause the whole three to re-render everytime. The useContextSelector hook behave a bit more like the useSelector from Redux, subscribing to only the piece of context we really want to observe.

The Storage Layer uses the Local Storage to save the application's current state. Even though it's possible to implement different storage strategies, the persistence is not optimized and the consistency is not really assured. The logic that inflist uses to store and retrieve the persisted state is a bit scattered across the application (mostly in the ConnectedTodo and TodosListPage components) and too much coupled with the React lifecycle events.

Tests

Inflist is definitely not tested enough. It uses purescript-spec as the main testing framework for unit tests. Only the reducers and the routes utilities are (a bit 😔) tested, in the future should be explored the possibility to integrate technologies like Test Renderer for the React components.

Design

All the styles are managed through Tailwind CSS and the icons are from css.gg.

Development

To start making changes to this code, PureScript with Spago is needed, along with Yarn to manage the JavaScript dependencies.

Follow these steps to have a development server running in local:

# Clone this repository
git clone git@github.com:dgopsq/inflist.git && cd inflist

# Install dependencies
yarn

# Build the PureScript code
spago build

# Start the development server
yarn dev

To build inflist for production:

yarn build