freeCodeCamp icon indicating copy to clipboard operation
freeCodeCamp copied to clipboard

fix: circular dependencies

Open Nirajn2311 opened this issue 3 years ago • 6 comments

Checklist:

  • [x] I have read freeCodeCamp's contribution guidelines.
  • [x] My pull request has a descriptive title (not a vague title like Update index.md)
  • [x] My pull request targets the main branch of freeCodeCamp.
  • [ ] I have tested these changes either locally on my machine, or GitPod.

Closes #45307 Closes #45277

So I'm taking a stab at this.

Currently in ESLint config, I've set the maxDepth for the no-cycle rule to 2. The command lint:js took 50s to run in my system and here's the current output:

Click to expand
> @freecodecamp/[email protected] lint:js
> eslint --max-warnings 0 .


/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/accept-terms-saga.js
  7:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/codeally-saga.js
  5:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/donation-saga.js
  19:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/failed-updates-epic.js
  18:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/fetch-user-saga.js
  5:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/ga-saga.js
  6:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/index.js
   8:1  error  Dependency cycle detected  import/no-cycle
  11:1  error  Dependency cycle detected  import/no-cycle
  12:1  error  Dependency cycle detected  import/no-cycle
  13:1  error  Dependency cycle detected  import/no-cycle
  14:1  error  Dependency cycle detected  import/no-cycle
  15:1  error  Dependency cycle detected  import/no-cycle
  18:1  error  Dependency cycle detected  import/no-cycle
  20:1  error  Dependency cycle detected  import/no-cycle
  22:1  error  Dependency cycle detected  import/no-cycle
  23:1  error  Dependency cycle detected  import/no-cycle
  24:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/report-user-saga.js
  7:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/save-challenge-saga.js
   3:1  error  Dependency cycle via ../../../redux:6  import/no-cycle
  16:1  error  Dependency cycle detected              import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/settings/danger-zone-saga.js
  9:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/settings/index.js
  3:1  error  Dependency cycle detected  import/no-cycle
  4:1  error  Dependency cycle detected  import/no-cycle
  5:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/settings/settings-sagas.js
  33:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/settings/update-email-saga.js
  8:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/show-cert-saga.js
  6:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/update-complete-epic.js
  5:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/redux/user-token-saga.js
  5:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/templates/Challenges/redux/code-storage-epic.js
  13:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/templates/Challenges/redux/completion-epic.js
  27:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/templates/Challenges/redux/create-question-epic.js
  6:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/templates/Challenges/redux/current-challenge-saga.js
  6:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/templates/Challenges/redux/execute-challenge-saga.js
  38:1  error  Dependency cycle detected  import/no-cycle

/Users/niraj/Desktop/FCC/freeCodeCamp/client/src/templates/Challenges/redux/index.js
   6:1  error  Dependency cycle via ./save-challenge-saga:24  import/no-cycle
  10:1  error  Dependency cycle detected                      import/no-cycle
  11:1  error  Dependency cycle detected                      import/no-cycle
  12:1  error  Dependency cycle detected                      import/no-cycle
  13:1  error  Dependency cycle detected                      import/no-cycle
  14:1  error  Dependency cycle detected                      import/no-cycle

✖ 40 problems (40 errors, 0 warnings)

From the above output all the errors are connected through mainly 3 files:

  1. /client/src/redux/index.js
  2. /client/src/redux/settings/index.js
  3. /client/src/templates/Challenges/redux/index.js

With the example of commit(843d643), I'll explain why circular dependencies are happening.

The circular loop here is that both index.js(same directory) and code-lock-epic.js are importing each other. So I moved the Redux action for unlockCode to code-lock-epic.js to get rid of the import which is causing the error. Now index.js is only importing the respective epic(codeLockEpic) and no circular loops are present. Basically the loops are happening because the epics are imported from the individual epic files to their respective index.js and those individual files import index.js again for the Redux action to be used in the same epic.

I have a solution in mind for the remaining files, which is we move all the Redux actions to their respective epic files. Yes by doing this the Actions will be split out and stored in a lot of files instead of being stored in one single file but we get rid of the circular dependencies.

Nirajn2311 avatar Jun 23 '22 18:06 Nirajn2311

gitpod-io[bot] avatar Jun 23 '22 18:06 gitpod-io[bot]

:eyes: Review this PR in a CodeSee Review Map

View the CodeSee Map of this change

Review these changes using an interactive CodeSee Map

Legend

CodeSee Map Legend

codesee-maps[bot] avatar Jun 23 '22 18:06 codesee-maps[bot]

Currently I've set the maxDepth value to 1 so the test passes without running out of memory.

Nirajn2311 avatar Jul 15 '22 18:07 Nirajn2311

@Sboonny,

Can you confirm you intended to mark this for review because the checks aren't passing yet?

raisedadead avatar Aug 03 '22 14:08 raisedadead

@raisedadead

I was assigned immediately after this came to my attention, when it came to my attention the test were still running so I didn't know about them failing sorry about the label.

About the review, I don't know how to test it and you seemed the best to review it and give guidance.

Sboonny avatar Aug 03 '22 15:08 Sboonny

cc - @ojeytonwilliams

Nirajn2311 avatar Aug 10 '22 14:08 Nirajn2311

Apologies if this didn't get reviews when it was ready @Nirajn2311, but there's some conflicts now so I changed the label.

moT01 avatar Oct 03 '22 18:10 moT01