eakl

eakl

Member Since 6 years ago

Paris, France

Experience Points
1
follower
Lessons Completed
1
follow
Lessons Completed
35
stars
Best Reply Awards
20
repos

16 contributions in the last year

Pinned
⚡ An inspirational blog
⚡ A simple API using Node.js, Hapi.js, MongoDB, JWT and Tape
⚡ A simple analytics dashboard
⚡ Simply Tasky
⚡ A backend API for a battleship clone
⚡ JSON Diffing Algorithm
Activity
Oct
21
1 month ago
Oct
18
1 month ago
Oct
14
1 month ago
Activity icon
issue

eakl issue facebook/react

eakl
eakl

Bug: Method from React Context can't read its own state.

React version: 17.0.2

Steps To Reproduce

  1. Open the Code Sandbox and the Console
  2. Click on Open. You will see the following console.logs (1. the modal opens, 2. the config input that is passed contains data and 2 callbacks, 3. the config is set in the state)
  3. Close the modal with the X button or with Cancel (you will see the following console.logs (1. the modal closes, 2. the dialogConfig state is empty)
  4. Reproduce steps 1 to 4, you will see that the dialogConfig state is not empty.
  5. Open the React Dev Tools and click on Context.Provider to see that the dialogConfig object is always updated when the modal opens but not always cleared when the modal closes

Here is the code sandbox with different modal dependencies but same issue:

The current behavior

When onOpenDialog is called, the dialogConfig state is updated every time but onCloseDialog see it as empty half the time and the condition doesn't pass

const onCloseDialog = () => {
    console.log("-- Close Dialog");
    setDialogMode("");
    console.log("-- dialogConfig State: ", dialogConfig); // This is empty half the time
    if (Object.keys(dialogConfig).length > 0) {
      console.log("-- Reset dialogConfig");
      setDialogConfig({});
    }
  };

The expected behavior

When onCloseDialog is called, it should always read the state as non empty object

Activity icon
issue

eakl issue comment facebook/react

eakl
eakl

Bug: Method from React Context can't read its own state.

React version: 17.0.2

Steps To Reproduce

  1. Open the Code Sandbox and the Console
  2. Click on Open. You will see the following console.logs (1. the modal opens, 2. the config input that is passed contains data and 2 callbacks, 3. the config is set in the state)
  3. Close the modal with the X button or with Cancel (you will see the following console.logs (1. the modal closes, 2. the dialogConfig state is empty)
  4. Reproduce steps 1 to 4, you will see that the dialogConfig state is not empty.
  5. Open the React Dev Tools and click on Context.Provider to see that the dialogConfig object is always updated when the modal opens but not always cleared when the modal closes

Here is the code sandbox with different modal dependencies but same issue:

The current behavior

When onOpenDialog is called, the dialogConfig state is updated every time but onCloseDialog see it as empty half the time and the condition doesn't pass

const onCloseDialog = () => {
    console.log("-- Close Dialog");
    setDialogMode("");
    console.log("-- dialogConfig State: ", dialogConfig); // This is empty half the time
    if (Object.keys(dialogConfig).length > 0) {
      console.log("-- Reset dialogConfig");
      setDialogConfig({});
    }
  };

The expected behavior

When onCloseDialog is called, it should always read the state as non empty object

eakl
eakl

@ChamsBouzaiene Thank you for the clear explanation and the reading material. I didn't know this was a known problem but it makes sense. I also appreciate your recommendation to simplify my code.

Oct
13
1 month ago
Activity icon
issue

eakl issue facebook/react

eakl
eakl

Bug: Method from React Context can't read its own state.

React version: 17.0.2

Steps To Reproduce

  1. Open the Code Sandbox and the Console
  2. Click on Open. You will see the following console.logs (1. the modal opens, 2. the config input that is passed contains data and 2 callbacks, 3. the config is set in the state)
  3. Close the modal with the X button or with Cancel (you will see the following console.logs (1. the modal closes, 2. the dialogConfig state is empty)
  4. Reproduce steps 1 to 4, you will see that the dialogConfig state is not empty.
  5. Open the React Dev Tools and click on Context.Provider to see that the dialogConfig object is always updated when the modal opens but not always cleared when the modal closes

Here is the code sandbox with different modal dependencies but same issue:

The current behavior

When onOpenDialog is called, the dialogConfig state is updated every time but onCloseDialog see it as empty half the time and the condition doesn't pass

const onCloseDialog = () => {
    console.log("-- Close Dialog");
    setDialogMode("");
    console.log("-- dialogConfig State: ", dialogConfig); // This is empty half the time
    if (Object.keys(dialogConfig).length > 0) {
      console.log("-- Reset dialogConfig");
      setDialogConfig({});
    }
  };

The expected behavior

When onCloseDialog is called, it should always read the state as non empty object

Sep
28
2 months ago
started
started time in 2 months ago
started
started time in 2 months ago
Sep
27
2 months ago
Activity icon
issue

eakl issue comment Chevrotain/chevrotain

eakl
eakl

How to implement array support in the calculator example

I am building a calculator with Chevrotain parser and I have played with the calculator example

Chevrotain Playground: https://chevrotain.io/playground/ Parser Grammar: Calculator embedded semantics Input Sample: Parenthesis precedence

The example above uses integer as input/output. I would like to support integers AND arrays.

Basic example: 2 * ( 3 + 7 )

Example with arrays: 2 * ( {{array1}} + {{array2}} )

const map = {
  array1: [1, 2, 3, 4, 5],
  array2: [10, 20, 30, 40, 50]
}

I know how to lex and parse {{array}} but I don't know how to visit them or loop over the arrays to achieve the following result

2 * ( 1 + 10 ) = 22
2 * ( 2 + 20 ) = 44
2 * ( 3 + 30 ) = 66
2 * ( 4 + 40 ) = 88
2 * ( 5 + 50 ) = 110

End result of the parsing of 2 * ( {{array1}} + {{array2}} ) should be [22, 44, 66, 88, 110]

Once the AST has been created (including the arrays on some leaf node), how can I reduce it to the end result which is an array.

One approach is to have some sort of state and run the visitor as many time as array.length. But it is unclear to me how it can be implemented with Chevretain

eakl
eakl

I tried to have something like

$.RULE("topLevelExpression", (i, n) => {
  let array = [ ]
  while (i < n) {
   $.SUBRULE($.additionExpression)
   i++
  }

  return array
})

It doesn't work because SUBRULE appears more than once. Also n is difficult to know before the expression is parsed and the array length is known.

Sep
23
2 months ago
Activity icon
issue

eakl issue LeanyLabs/formula-engine

eakl
eakl

array support or resolve references when reference is an array

Interesting work. I wonder how the library can implement array support

Let's say I type this: 2 * ( {{array1}} + {{array2}} )

with the following mapping

const reference = {
  array1: [1, 2, 3, 4, 5],
  array2: [10, 20, 30, 40, 50]
}

When resolving the variable as an array, How can the parser / visitor achieve the following:

2 * ( 1 + 10 ) = 22
2 * ( 2 + 20 ) = 44
2 * ( 3 + 30 ) = 66
2 * ( 4 + 40 ) = 88
2 * ( 5 + 50 ) = 110

End result of the parsing of 2 * ( {{array1}} + {{array2}} ) should be [22, 44, 66, 88, 110]

started
started time in 2 months ago
Activity icon
issue

eakl issue Chevrotain/chevrotain

eakl
eakl

How to implement the calculator example with arrays

I have played with the calculator example

Chevrotain Playground: https://chevrotain.io/playground/ Parser Grammar: Calculator embedded semantics Input Sample: Parenthesis precedence

And I wonder how to do the same with arrays?

Basic example: 2 * ( 3 + 7 )

Example with arrays: 2 * ( {{array1}} + {{array2}} )

const map = {
  array1: [1, 2, 3, 4, 5],
  array2: [10, 20, 30, 40, 50]
}

I know how to parse {{array}} but I don't know how to loop over the arrays to achieve the following result

2 * ( 1 + 10 ) = 22
2 * ( 2 + 20 ) = 44
2 * ( 3 + 30 ) = 66
2 * ( 4 + 40 ) = 88
2 * ( 5 + 50 ) = 110

End result of the parsing of 2 * ( {{array1}} + {{array2}} ) should be [22, 44, 66, 88, 110]

Sep
18
2 months ago
Activity icon
issue

eakl issue comment remix-run/react-router

eakl
eakl

[v6] [Bug]: React Router is too greedy. /routetypo matches /route instead of the * fallback

What version of React Router are you using?

6.0.0-beta.2

Steps to Reproduce

https://codesandbox.io/s/react-router-routing-j72xo?file=/src/App.js

Expected Behavior

Route path parameter is confusing

<Routes>
  <Route path="/" element={<p>Root</p>} />
  <Route path="home">
    <Route path="/" element={<p>Home</p>} />
    <Route path="*" element={<Navigate to={"."} />} />
  </Route>
  <Route path="*" element={<p>Not Found.</p>} />
</Routes>

/ should match Root /home should look to its children and match Home /hometypo should match Not Found /home/wrongParam should match <Navigate ... />

Actual Behavior

/ matches Root (OK) /home looks to its children and matches Home (OK) /hometypo matched Home (NOT OK, RR is too greedy) /home/wrongParam redirects to <Navigate /> (OK but the redirect path is inconsistent with <Route path />)

Referring to #7335, I agree that <Route path /> should implement a . for the root of the subcomponent instead of the forward slash.

<Route path="home">
  <Route path="/" element={<p>Home</p>} />
  <Route path="*" element={<Navigate to={"."} />} />
</Route>

When having <Route path /> and <Navigate to /> side by side, it becomes confusing to match the root of the parent route with a forward slash instead of a .

Sep
15
2 months ago
Activity icon
issue

eakl issue comment uiwjs/react-codemirror

eakl
eakl

Make basicSetup and indentWithTab optional

Could you make basicSetup and indentWithTab optional?

I am building a Tag Input component with CodeMirror and this use case doesn't require any styling or package overhead. It also increase the level of customization.

useCodeMirror.ts

let getExtensions = [basicSetup, keymap.of([indentWithTab]), updateListener, defaultThemeOption];
Sep
14
2 months ago
Activity icon
issue

eakl issue uiwjs/react-codemirror

eakl
eakl

Make basicSetup and indentWithTab optional

Could you make basicSetup and indentWithTab optional?

I am building a Tag Input component with CodeMirror and I need a plain CodeMirror without the overhead.

let getExtensions = [basicSetup, keymap.of([indentWithTab]), updateListener, defaultThemeOption];
Sep
6
2 months ago
started
started time in 2 months ago
started
started time in 2 months ago
started
started time in 2 months ago
Aug
31
2 months ago
started
started time in 2 months ago
Activity icon
issue

eakl issue comment remix-run/react-router

eakl
eakl

[Bug v6]: navigate() and <Navigate> doesn't produce the same result

What version of React Router are you using?

17.0.1

Steps to Reproduce

CSB: https://codesandbox.io/s/react-router-useparams-lcn4d?file=/src/App.js

This CSB reproduces what I have in local but - I don't know why - useParams() doesn't capture the parameter.

The whole code to reproduce the bug is short though

You need to comment/uncomment the following lines

navigate(`..`, { replace: true });
// navigate(`/main`, { replace: true });
// return <Navigate to={`..`} replace={true} />;
// return <Navigate to={`/main`} replace={true} />;

Expected Behavior / Actual behavior

Path: /main/12345 Action: Both navigate('..', { replace: true }) and navigate('/main', { replace: true }) Expected behavior: redirect to /main Actual behavior: stays at /main/12345

If you replace navigate(...) by: return <Navigate to={'..'} replace={true} /> or return <Navigate to={'/models'} replace={true} />

it redirects to /main as expected.

Activity icon
issue

eakl issue comment remix-run/react-router

eakl
eakl

[Bug v6]: navigate() and <Navigate> doesn't produce the same result

What version of React Router are you using?

17.0.1

Steps to Reproduce

CSB: https://codesandbox.io/s/react-router-useparams-lcn4d?file=/src/App.js

This CSB reproduces what I have in local but - I don't know why - useParams() doesn't capture the parameter.

The whole code to reproduce the bug is short though

You need to comment/uncomment the following lines

navigate(`..`, { replace: true });
// navigate(`/main`, { replace: true });
// return <Navigate to={`..`} replace={true} />;
// return <Navigate to={`/main`} replace={true} />;

Expected Behavior / Actual behavior

Path: /main/12345 Action: Both navigate('..', { replace: true }) and navigate('/main', { replace: true }) Expected behavior: redirect to /main Actual behavior: stays at /main/12345

If you replace navigate(...) by: return <Navigate to={'..'} replace={true} /> or return <Navigate to={'/models'} replace={true} />

it redirects to /main as expected.

eakl
eakl

Thanks @timdorr. Why does navigate(...) can't work outside useEffect, in an event handler in response to a user action? Any reason?

Aug
30
3 months ago
Activity icon
issue

eakl issue comment react-hook-form/react-hook-form

eakl
eakl

[Bug]: setValue drops all other properties of an default

Version Number

7.1.0

Codesandbox/Expo snack

https://codesandbox.io/s/setvalue-svek6?file=/src/Header.js

Steps to reproduce

Just observe the behavior in the code

I have 3 useEffect

  1. One to set the default values with reset
  2. One to set the value property when the dates changes
  3. One to update another field when the metric array changes using the current metric values

Expected behaviour

metrics.0.value is a controlled input that changes the value of the metrics.0 object.

When the value updates with setValue('metrics.0.value', ...) the other keys of metrics.0 should stay unchanged.

Current behavior, they disappear

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct
eakl
eakl

The CSB is fixed.

Can you reopen the ticket?

Activity icon
issue

eakl issue react-hook-form/react-hook-form

eakl
eakl

[Bug]: setValue drops all other properties of an default

Version Number

7.1.0

Codesandbox/Expo snack

https://codesandbox.io/s/setvalue-svek6

Steps to reproduce

Just observe the behavior in the code

I have 3 useEffect

  1. One to set the default values with reset
  2. One to set the value property when the dates changes
  3. One to update another field when the metric array changes using the current metric values

Expected behaviour

metrics.0.value is a controlled input that changes the value of the metrics.0 object.

When the value updates with setValue('metrics.0.value', ...) the other keys of metrics.0 should stay unchanged.

Current behavior, they disappear

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct