Code Monkey home page Code Monkey logo

refacto-test-ts-react's Introduction

Refactoring Kata Test

Introduction

We have a FilterDomain component in src/components/DomainFilter/DomainFilter.component.tsx which renders a cluster of 3 select inputs allowing the user to filter by domain.

A domain is a string provided by an upstream api (in this example, they are hardcoded into src/index.tsx) following the following pattern: {country code}_{classification}-{sub classification}, the country code, classification and sub classification being strings containing only uppercase letters (no numbers, no punctuation).

Each of the 3 selects allow the user to choose one or multiple values from, respectively, the list of all distinct countries represented in the existing domains, the list of all distinct classifications, and the list of all distinct subclassifications.

Goal of the exercise

Today, this component contains the logic to compute the three lists of distinct values, and we would like to be able to reuse this logic in another component.

We need to have a way to get those 3 lists in another component, on another page of the application.

Additional context

There is also a weird warning in the console, that nobody seems to understand.

And there have been reports of bugs by users, but we have not managed to reproduce them.

You can run the project to see this filter component in action

System Requirements

  • yarn (Tested with 1.13.0)

Installation

yarn

Run the application

yarn start

Run the tests

yarn test

Rules

There are some rules to follow:

  • You must commit regularly
  • You must not modify code when comments explicitly forbid it

Deliverables

What do we expect from you:

  • the link of the git repository
  • several commits, with an explicit message each time
  • a file / message / email explaining your process and principles you've followed, and how one developer would go about reusing the feature

Good luck!

refacto-test-ts-react's People

Contributors

qpincon avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.