kjendrzyca

// figured out thanks to:
// https://stackoverflow.com/questions/52177631/jest-timer-and-promise-dont-work-well-settimeout-and-async-function/52196951
// https://github.com/facebook/jest/issues/7151#issuecomment-622134853
// https://stackoverflow.com/questions/51126786/jest-fake-timers-with-promises/51132058#51132058
// https://github.com/facebook/jest/issues/2157

// additional info
// https://github.com/facebook/jest/issues/10221#issuecomment-654687396
// https://stackoverflow.com/questions/66391541/jest-advancetimersbytime-doesnt-work-when-i-try-to-test-my-retry-util-function
// https://gist.github.com/dwiyatci/740a52a08eb6147baa1f0be9b4f38785

kjendrzyca

jest.useFakeTimers();

const pollingPromise = poll();
const cancelAdvance = advanceTimersContinuously();
const status = await pollingPromise;
cancelAdvance();

expect(status).toEqual('COMPLETE');

function advanceTimersContinuously() {

kjendrzyca

// generyczny niebiznesowy komponent
export function GenericButton({onClick}) {
  return (
    <button onClick={onClick} />
  )
}

// generyczny niezbiznesowy komponent, gdzie muszę owrapować propsa
export function GenericButton({onClick}) {
  // nie ma większego znaczenia, że się to nazywa "handle*"

kjendrzyca

Folder Structure

Please note

While this gist has been shared and followed for years, I regret not giving more background. It was originally a gist for the engineering org I was in, not a "general suggestion" for any React app.

Typically I avoid folders altogether. Heck, I even avoid new files. If I can build an app with one 2000 line file I will. New files and folders are a pain.

kjendrzyca

<footer className="py-3">
  <a target="_blank" rel="noopener noreferrer" className="text-blue-700 underline" href={`https://github.com/kjendrzyca/kjendrzyca.com/blob/master/content/blog/${slug}`}>
    Edit this page on GitHub
  </a>
</footer>

kjendrzyca

{
  "extends": [
    "react-app",
    "airbnb",
    "prettier"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {

kjendrzyca

1. Learn in public

this essay has been updated on my personal site, together with a followup on how to get started

If there's a golden rule, it's this one, so I put it first. All the other rules are more or less elaborations of this rule #1.

You already know that you will never be done learning. But most people "learn in private", and lurk. They consume content without creating any themselves. Again, that's fine, but we're here to talk about being in the top quintile. What you do here is to have a habit of creating learning exhaust. Write blogs and tutorials and cheatsheets. Speak at meetups and conferences. Ask and answer things on Stackoverflow or Reddit. (Avoid the walled gardens like Slack and Discourse, they're not public). Make Youtube videos or Twitch streams. Start a newsletter. Draw cartoons (people loooove cartoons!). Whatever your thing is, make the thing you wish you had found when you were learni

kjendrzyca

function Button({ disabled, onClick }) {
  return <button disabled={disabled} onClick={onClick}>Hi</button>;
}

function useHook(disabled) {
  const onClick = useCallback(() => console.log('works'), []);

  const renderedButton = <Button disabled={disabled} onClick={onClick} />;

  return {

kjendrzyca

Redux structure rationale

Goal

We wanted to create an application that is easy to extend and also easy to maintain. In order to achieve that, there has to be clear separation of concerns made by design. We believe that project folder structure is the part where you can enforce many good practices from ground-up. Essenially decreasing the burden on developers.

Introduction

We have couple of building blocks and 'binders' in react-redux application. We create components that represent the view, we create containers that connect views to state and we create actions/sagas/reducers trio to maintain the state. We will also need pages/routes that will display all the containers on one page to user.

kjendrzyca

Choosing redux-observable or redux-sagas

My task is to compare two libraries which help you resolve same problem, in different manner - Handling async actions in redux applications. I don't want to state which one is better than another but I do want to list pros and cons of each and provide clear feedback which one I have picked and my reasons for it.

There is a nice topic on stack-overflow on the question "Why use Redux-Observable over Redux-Saga?". In this topic there is feedback from creator of react-observable, stating "We don't currently provide any reason redux-observable is better than redux-saga because...it's not. They solve the same problem in extremely similar ways, but have some fundamental differences that only become truly apparent once you use them enough"

In the same response he also points out that deciding for one or another prematurely is unnecessary and even after you can/should still use redux in