Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add Husky Pre-Commit Hook for Code Styling and ESLint Enforcement #784

Closed
wants to merge 1 commit into from
Closed

Add Husky Pre-Commit Hook for Code Styling and ESLint Enforcement #784

wants to merge 1 commit into from

Conversation

konavivekramakrishna
Copy link
Contributor

This PR adds Husky as a pre-commit hook, which is commonly used and preferred for enforcing linting stages. It further formats the code using Prettier and enforces rules using ESLint.

This ensures consistent code styling, removing blank spaces and additional formatting. ESLint will also flag any unused variables or functions, thereby improving efficiency by eliminating unnecessary imports and unused variables.

Implementing this can streamline the code review process significantly.

@konavivekramakrishna
Copy link
Contributor Author

@mozzy11

can you please review this pr

as Far as our fronted code is concerned there are many unnecessary imports present in the code which causes the build takes more time and less efficiency and no pre-formatting

husky performs lint so that if there any unused imports in the staging files it rejects the git commit and also formats the code before commit so there by no unnecessary blank spaces will be there

can you please let me know your suggestions

@mozzy11
Copy link
Collaborator

mozzy11 commented Mar 19, 2024

Thanks @konavivekramakrishna .
The docker build fails probably because of Husky enforcing rules.
it will require cleaning out all those errors for the build to pass.
see logs here https://github.com/I-TECH-UW/OpenELIS-Global-2/actions/runs/8338958896/job/22820126387?pr=784

@konavivekramakrishna konavivekramakrishna mentioned this pull request Mar 20, 2024
Merged
@github-actions GitHub Actions
Copy link

👋 Hi, @konavivekramakrishna,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

@github-actions github-actions bot added merge conflict Merge Conflicts and removed merge conflict Merge Conflicts labels Mar 20, 2024
mozzy11
mozzy11 reviewed Mar 21, 2024
View reviewed changes
frontend/package.json Outdated Show resolved Hide resolved
mozzy11
mozzy11 requested changes Mar 21, 2024
View reviewed changes
Copy link
Collaborator

@mozzy11 mozzy11 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@konavivekramakrishna ,
we can not use /* eslint-disable */ .

@konavivekramakrishna
Copy link
Contributor Author

@mozzy11

Yes the intention is to remove the unused variables iterations wise

@konavivekramakrishna
Copy link
Contributor Author

currently there are many i.e 100's of imports or variables which are declared but not using in the code so removing all in a go
so risky and may lead to possible failures

I am thinking to remove the un used variables in mutiple pr and there by remvoing /* eslint-disable */

@konavivekramakrishna
Copy link
Contributor Author

@mozzy11

image

Could you please review the implementation in the image above? I introduced temp.js with unused variables, which caused the Git commit to exit and the pre-formatting to fail.

Also, if this pull request gets merged before setting up contributors, they should run the following command:

npm install --legacy-peer-deps

This is because husky and prettier are devDependencies. In order for them to work, we need to install the devDependencies.

@konavivekramakrishna
Copy link
Contributor Author

konavivekramakrishna commented Mar 21, 2024 •
edited
Loading

@mozzy11

can you please review it

I have fixed the build failure now working fine maybe we should introduce

npm install --legacy-peer-deps

in the Readme so that the rules are enforced

@github-actions github-actions bot added the merge conflict Merge Conflicts label Mar 21, 2024
@github-actions GitHub Actions
Copy link

👋 Hi, @konavivekramakrishna,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

@github-actions github-actions bot removed the merge conflict Merge Conflicts label Mar 21, 2024
@konavivekramakrishna konavivekramakrishna changed the title Implementing Husky for Pre-Commit Hooks to Enforce Code Consistency and Efficiency Add Husky Pre-Commit Hook for Code Styling and ESLint Enforcement Mar 22, 2024
@Ankit-Matth
Copy link
Contributor

Hey @konavivekramakrishna,
It seems like the Docker build is still failing, possibly due to Husky enforcing rules. If you're currently working on fixing it, that's great! However, if you don't mind, I'd like to take a look and see if I can help resolve the issue. Feel free to let me know if you'd like me to give it a try.

@konavivekramakrishna
Copy link
Contributor Author

Hey @Ankit-Matth,

Let me explain in detail about everything.

Currently, when we commit, technically Husky will enforce rules using the command npx lint-staged to check for any unused variables or if we're conditionally using React hooks, which is not preferred.

for example :

if (props.isTrue === true){
  const [val, setVal] = useState(true);
}

In such cases, Husky will prevent the commit and also format before committing, ensuring code consistency.

To achieve this behavior, we have to modify the eslintconfig. If you review our frontend codebase, you'll notice many unused variables, imports, functions, and even instances of conditionally using hooks. Therefore, before this PR can be functional, we need to remove all unused variables and functions from the frontend codebase, which constitutes a significant part of our changes.

If you understand the above and are willing to contribute, please drop a comment indicating your willingness. I'll open an issue, and through multiple PRs, we'll carefully evaluate and remove all unused variables and functions, as well as eliminate conditionally used hooks.

cc : @mozzy11

@konavivekramakrishna
Copy link
Contributor Author 

[eslint] 
src/App.js
  Line 50:10:   'locale' is assigned a value but never used  no-unused-vars
  Line 164:57:  Unexpected empty arrow function              @typescript-eslint/no-empty-function
  Line 166:62:  Unexpected empty arrow function              @typescript-eslint/no-empty-function

src/components/addOrder/AddOrder.js
  Line 81:12:  'handleBillReferenceNo' is defined but never used  no-unused-vars

src/components/addOrder/Index.js
  Line 48:7:    'initializePanelTests' is assigned a value but never used          no-unused-vars
  Line 49:7:    'allTestsMap' is assigned a value but never used                   no-unused-vars
  Line 50:7:    'panelTestsMap' is assigned a value but never used                 no-unused-vars
  Line 51:7:    'crossTestSampleTypeTestIdMap' is assigned a value but never used  no-unused-vars
  Line 52:7:    'sampleTypeTestIdMap' is assigned a value but never used           no-unused-vars
  Line 53:7:    'sampleTypeOrder' is assigned a value but never used               no-unused-vars
  Line 54:7:    'crossSampleTypeMap' is assigned a value but never used            no-unused-vars
  Line 55:7:    'crossSampleTypeOrderMap' is assigned a value but never used       no-unused-vars
  Line 56:7:    'CrossPanels' is assigned a value but never used                   no-unused-vars
  Line 57:7:    'CrossTests' is assigned a value but never used                    no-unused-vars
  Line 91:23:   Unexpected empty arrow function                                    @typescript-eslint/no-empty-function
  Line 269:13:  Unexpected empty arrow function                                    @typescript-eslint/no-empty-function
  Line 280:13:  Unexpected empty arrow function                                    @typescript-eslint/no-empty-function
  Line 418:9:   'panelTestsMap' is assigned a value but never used                 no-unused-vars
  Line 504:9:   'newCrossPanel' is assigned a value but never used                 no-unused-vars
  Line 512:9:   'newCrossTest' is assigned a value but never used                  no-unused-vars

src/components/addOrder/SampleType.js
  Line 117:9:   'handleRemoveSampleTest' is assigned a value but never used      no-unused-vars
  Line 215:12:  'addReferralRequest' is defined but never used                   no-unused-vars
  Line 229:12:  'removeReferralRequest' is defined but never used                no-unused-vars
  Line 587:37:  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities
  Line 587:55:  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities
  Line 687:36:  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities
  Line 687:53:  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities

src/components/admin/calculatedValue/CalculatedValueForm.tsx
  Line 1:17:    'useCallback' is defined but never used   @typescript-eslint/no-unused-vars
  Line 41:11:   An empty interface is equivalent to `{}`  @typescript-eslint/no-empty-interface
  Line 67:9:    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 237:8:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 253:17:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 273:15:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 297:44:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 305:8:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 345:32:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 573:8:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/admin/labNumber/LabNumberManagement.js
  Line 4:3:  'FormLabel' is defined but never used  no-unused-vars

src/components/admin/menu/CommonProperties.js
  Line 50:60:  'err' is defined but never used  no-unused-vars

src/components/admin/menu/GlobalMenuManagement.js
  Line 34:19:  'setLoading' is assigned a value but never used  no-unused-vars
  Line 75:9:   'findIndex' is assigned a value but never used   no-unused-vars

src/components/admin/menu/MenuUtil.js
  Line 5:41:  'newMenus' is defined but never used  no-unused-vars
  Line 5:51:  'field' is defined but never used     no-unused-vars
  Line 5:58:  'value' is defined but never used     no-unused-vars
  Line 5:68:  Unexpected empty arrow function       @typescript-eslint/no-empty-function

src/components/admin/menu/NonConformityMenuManagement.js
  Line 34:19:  'setLoading' is assigned a value but never used  no-unused-vars

src/components/admin/menu/PatientMenuManagement.js
  Line 11:3:  'Checkbox' is defined but never used  no-unused-vars

src/components/admin/menu/StudyMenuManagement.js
  Line 35:19:   'setLoading' is assigned a value but never used  no-unused-vars
  Line 100:11:  'body' is assigned a value but never used        no-unused-vars

src/components/admin/reflexTests/ReflexRuleForm.js
  Line 14:3:   'RadioButtonGroup' is defined but never used                      no-unused-vars
  Line 15:3:   'RadioButton' is defined but never used                           no-unused-vars
  Line 234:9:  'handleAddNotificationChange' is assigned a value but never used  no-unused-vars

src/components/common/CustomNotification.js
  Line 28:25:  'event' is defined but never used  no-unused-vars
  Line 31:36:  'event' is defined but never used  no-unused-vars

src/components/common/QuestionnaireResponse.js
  Line 16:40:  'index' is defined but never used  no-unused-vars

src/components/cytology/CytologyCaseView.js
  Line 175:17:  'e' is defined but never used           no-unused-vars
  Line 601:56:  Unexpected empty function 'noRefCheck'  @typescript-eslint/no-empty-function
  Line 630:35:  'e' is defined but never used           no-unused-vars
  Line 789:56:  Unexpected empty function 'noRefCheck'  @typescript-eslint/no-empty-function
  Line 848:35:  'e' is defined but never used           no-unused-vars
  Line 947:63:  Unexpected empty arrow function         @typescript-eslint/no-empty-function

src/components/eOrder/EOrder.js
  Line 29:11:   'configurationProperties' is assigned a value but never used  no-unused-vars
  Line 33:10:   'entering' is assigned a value but never used                 no-unused-vars
  Line 33:20:   'setEntering' is assigned a value but never used              no-unused-vars
  Line 37:19:   Unexpected empty arrow function                               @typescript-eslint/no-empty-function
  Line 50:12:   'markRowOutOfSync' is defined but never used                  no-unused-vars
  Line 50:29:   'index' is defined but never used                             no-unused-vars
  Line 194:29:  'row' is defined but never used                               no-unused-vars

src/components/eOrder/EOrderSearch.js
  Line 5:3:    'Form' is defined but never used                       no-unused-vars
  Line 16:37:  'injectIntl' is defined but never used                 no-unused-vars
  Line 22:17:  'eOrders' is defined but never used                    no-unused-vars
  Line 34:25:  'setStatusOptions' is assigned a value but never used  no-unused-vars

src/components/home/Dashboard.tsx
  Line 31:11:   An empty interface is equivalent to `{}`     @typescript-eslint/no-empty-interface
  Line 86:10:   'url' is assigned a value but never used     @typescript-eslint/no-unused-vars
  Line 86:15:   'setUrl' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 365:29:  'row' is defined but never used              @typescript-eslint/no-unused-vars

src/components/immunohistochemistry/ImmunohistochemistryCaseView.js
  Line 1057:58:  Unexpected empty function 'noRefCheck'  @typescript-eslint/no-empty-function
  Line 1115:37:  'e' is defined but never used           no-unused-vars

src/components/layout/Header.js
  Line 15:8:    'config' is defined but never used  no-unused-vars
  Line 211:58:  'path' is defined but never used    no-unused-vars

src/components/modifyOrder/EditOrder.js
  Line 40:10:  'phoneFormat' is assigned a value but never used   no-unused-vars
  Line 76:12:  'handleBillReferenceNo' is defined but never used  no-unused-vars

src/components/modifyOrder/EditOrderEntryAdditionalQuestions.js
  Line 1:28:   'useRef' is defined but never used                 no-unused-vars
  Line 3:3:    'FilterableMultiSelect' is defined but never used  no-unused-vars
  Line 4:3:    'Select' is defined but never used                 no-unused-vars
  Line 5:3:    'SelectItem' is defined but never used             no-unused-vars
  Line 6:3:    'TextInput' is defined but never used              no-unused-vars
  Line 10:28:  'useIntl' is defined but never used                no-unused-vars

src/components/modifyOrder/EditSampleType.js
  Line 103:9:   'handleRemoveSampleTest' is assigned a value but never used      no-unused-vars
  Line 201:12:  'addReferralRequest' is defined but never used                   no-unused-vars
  Line 215:12:  'removeReferralRequest' is defined but never used                no-unused-vars
  Line 560:38:  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities
  Line 560:56:  `"` can be escaped with `"`, `“`, `"`, `”`  react/no-unescaped-entities

src/components/modifyOrder/ModifyOrder.js
  Line 2:10:  'useParams' is defined but never used  no-unused-vars
  Line 8:3:   'Section' is defined but never used    no-unused-vars
  Line 9:3:   'Tag' is defined but never used        no-unused-vars

src/components/modifyOrder/SearchOrder.js
  Line 3:26:  'TextInput' is defined but never used  no-unused-vars

src/components/pathology/PathologyCaseView.js
  Line 141:17:  'e' is defined but never used           no-unused-vars
  Line 458:56:  Unexpected empty function 'noRefCheck'  @typescript-eslint/no-empty-function
  Line 511:35:  'e' is defined but never used           no-unused-vars
  Line 628:35:  'e' is defined but never used           no-unused-vars
  Line 794:56:  Unexpected empty function 'noRefCheck'  @typescript-eslint/no-empty-function
  Line 823:35:  'e' is defined but never used           no-unused-vars

src/components/patient/CreatePatientForm.js
  Line 6:3:     'getFromOpenElisServerSync' is defined but never used  no-unused-vars
  Line 808:41:  Unexpected empty arrow function                        @typescript-eslint/no-empty-function
  Line 836:41:  Unexpected empty arrow function                        @typescript-eslint/no-empty-function
  Line 862:41:  Unexpected empty arrow function                        @typescript-eslint/no-empty-function
  Line 890:41:  Unexpected empty arrow function                        @typescript-eslint/no-empty-function

src/components/patient/resultsViewer/commons/empty-state/empty-data-illustration.component.tsx
  Line 3:41:  'width' is missing in props validation   react/prop-types
  Line 3:55:  'height' is missing in props validation  react/prop-types

src/components/patient/resultsViewer/commons/error-state/error-state.component.tsx
  Line 9:10:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/patient/resultsViewer/commons/framework/ConfigurableLink.tsx
  Line 7:20:  'interpolateUrl' is defined but never used  @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/commons/framework/navigation/interpolate-string.ts
  Line 3:10:  'trimTrailingSlash' is defined but never used  @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/commons/framework/navigation/navigate.ts
  Line 6:10:  'trimTrailingSlash' is defined but never used  @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/commons/types/index.ts
  Line 30:27:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 35:36:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/patient/resultsViewer/commons/types/test-results.ts
  Line 13:16:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 17:16:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 23:16:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/patient/resultsViewer/commons/utils/helpers.tsx
  Line 20:63:  Unexpected any. Specify a different type             @typescript-eslint/no-explicit-any
  Line 24:7:   'TimeSlotsInner' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 27:9:   'className' is defined but never used                @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/filter/filter-context.tsx
  Line 30:21:  Unexpected empty method 'initialize'      @typescript-eslint/no-empty-function
  Line 31:20:  Unexpected empty method 'toggleVal'       @typescript-eslint/no-empty-function
  Line 32:23:  Unexpected empty method 'updateParent'    @typescript-eslint/no-empty-function
  Line 33:20:  Unexpected empty method 'resetTree'       @typescript-eslint/no-empty-function
  Line 39:10:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 45:11:  't' is assigned a value but never used    @typescript-eslint/no-unused-vars
  Line 84:54:  'entry' is defined but never used         @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/filter/filter-set.tsx
  Line 10:10:  'TreeViewAlt' is defined but never used         @typescript-eslint/no-unused-vars
  Line 10:40:  'SearchIcon' is defined but never used          @typescript-eslint/no-unused-vars
  Line 33:11:  'resetTree' is assigned a value but never used  @typescript-eslint/no-unused-vars
  Line 65:63:  Unexpected empty arrow function                 @typescript-eslint/no-empty-function

src/components/patient/resultsViewer/filter/filter-types.ts
  Line 22:16:   Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 104:15:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 105:14:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 106:17:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 111:18:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/patient/resultsViewer/grouped-timeline/grouped-timeline.tsx
  Line 12:25:   'testResultsBasePath' is defined but never used        @typescript-eslint/no-unused-vars
  Line 37:3:    'showShadow' is defined but never used                 @typescript-eslint/no-unused-vars
  Line 42:3:    'title' is missing in props validation                 react/prop-types
  Line 43:3:    'range' is missing in props validation                 react/prop-types
  Line 44:3:    'units' is missing in props validation                 react/prop-types
  Line 45:3:    'conceptUuid' is missing in props validation           react/prop-types
  Line 46:3:    'shadow' is missing in props validation                react/prop-types
  Line 47:3:    'isString' is missing in props validation              react/prop-types
  Line 103:8:   Unexpected any. Specify a different type               @typescript-eslint/no-explicit-any
  Line 105:7:   'sortedTimes' is missing in props validation           react/prop-types
  Line 105:20:  'obs' is missing in props validation                   react/prop-types
  Line 105:25:  'zebra' is missing in props validation                 react/prop-types
  Line 107:18:  'sortedTimes.map' is missing in props validation       react/prop-types
  Line 112:24:  'obs[].value' is missing in props validation           react/prop-types
  Line 113:34:  'obs[].interpretation' is missing in props validation  react/prop-types
  Line 232:3:   'parent' is missing in props validation                react/prop-types
  Line 233:3:   'subRows' is missing in props validation               react/prop-types
  Line 234:3:   'xScroll' is missing in props validation               react/prop-types
  Line 235:3:   'setXScroll' is missing in props validation            react/prop-types
  Line 236:3:   'panelName' is missing in props validation             react/prop-types
  Line 237:3:   'setPanelName' is missing in props validation          react/prop-types
  Line 238:3:   'groupNumber' is missing in props validation           react/prop-types
  Line 244:7:   'rowData' is assigned a value but never used           @typescript-eslint/no-unused-vars
  Line 253:25:  'parent.display' is missing in props validation        react/prop-types
  Line 272:33:  'observer' is defined but never used                   @typescript-eslint/no-unused-vars
  Line 293:40:  'parent.display' is missing in props validation        react/prop-types
  Line 326:9:   'tablet' is assigned a value but never used            @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/grouped-timeline/useObstreeData.ts
  Line 38:17:  'setError' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/helpers.ts
  Line 4:51:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
  Line 4:61:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/patient/resultsViewer/loadPatientTestData/helpers.ts
  Line 171:32:  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

src/components/patient/resultsViewer/overview/common-datatable.component.tsx
  Line 45:9:  'isTablet' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/results-viewer.tsx
  Line 3:3:     'Heading' is defined but never used           @typescript-eslint/no-unused-vars
  Line 6:3:     'Section' is defined but never used           @typescript-eslint/no-unused-vars
  Line 10:3:    'Tag' is defined but never used               @typescript-eslint/no-unused-vars
  Line 19:10:   'FormattedMessage' is defined but never used  @typescript-eslint/no-unused-vars
  Line 19:28:   'injectIntl' is defined but never used        @typescript-eslint/no-unused-vars
  Line 166:11:  't' is assigned a value but never used        @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/tablet-overlay/tablet-overlay.component.tsx
  Line 3:21:  'Close' is defined but never used  @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/tree-view/tree-view.component.tsx
  Line 25:3:  'testUuid' is defined but never used  @typescript-eslint/no-unused-vars
  Line 27:3:  'expanded' is defined but never used  @typescript-eslint/no-unused-vars
  Line 28:3:  'type' is defined but never used      @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/trendline/trendline-resource.tsx
  Line 45:17:  'setError' is assigned a value but never used         @typescript-eslint/no-unused-vars
  Line 46:24:  'setIsValidating' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/components/patient/resultsViewer/trendline/trendline.component.tsx
  Line 14:10:   'testResultsBasePath' is defined but never used            @typescript-eslint/no-unused-vars
  Line 38:3:    'patientUuid' is missing in props validation               react/prop-types
  Line 38:3:    'patientUuid' is defined but never used                    @typescript-eslint/no-unused-vars
  Line 39:3:    'title' is missing in props validation                     react/prop-types
  Line 40:3:    'referenceRange' is missing in props validation            react/prop-types
  Line 41:3:    'isValidating' is missing in props validation              react/prop-types
  Line 42:3:    'showBackToTimelineButton' is missing in props validation  react/prop-types
  Line 80:3:    'basePath' is defined but never used                       @typescript-eslint/no-unused-vars
  Line 277:6:   'tableData' is missing in props validation                 react/prop-types
  Line 277:17:  'tableHeaderData' is missing in props validation           react/prop-types

src/components/reports/routine/Index.js
  Line 4:10:   'Heading' is defined but never used                          no-unused-vars
  Line 4:19:   'Grid' is defined but never used                             no-unused-vars
  Line 4:25:   'Column' is defined but never used                           no-unused-vars
  Line 4:33:   'Section' is defined but never used                          no-unused-vars
  Line 5:22:   'FormattedMessage' is defined but never used                 no-unused-vars
  Line 14:9:   'intl' is assigned a value but never used                    no-unused-vars
  Line 15:11:  'setNotificationVisible' is assigned a value but never used  no-unused-vars
  Line 15:35:  'addNotification' is assigned a value but never used         no-unused-vars

src/components/reports/routine/PatientStatusReport.js
  Line 19:3:   'Loading' is defined but never used                       no-unused-vars
  Line 42:3:   'AlertDialog' is defined but never used                   no-unused-vars
  Line 53:11:  'notificationVisible' is assigned a value but never used  no-unused-vars
  Line 79:10:  'loading' is assigned a value but never used              no-unused-vars
  Line 361:9:  'breadcrumbs' is assigned a value but never used          no-unused-vars

src/components/reports/routine/ReferredOut.js
  Line 22:10:  'loading' is assigned a value but never used              no-unused-vars
  Line 23:10:  'notificationVisible' is assigned a value but never used  no-unused-vars

src/components/reports/routine/StatisticsReport.js
  Line 9:3:    'Loading' is defined but never used                       no-unused-vars
  Line 16:10:  'AlertDialog' is defined but never used                   no-unused-vars
  Line 18:8:   'PageBreadCrumb' is defined but never used                no-unused-vars
  Line 43:10:  'loading' is assigned a value but never used              no-unused-vars
  Line 44:10:  'notificationVisible' is assigned a value but never used  no-unused-vars
  Line 111:9:  'breadcrumbs' is assigned a value but never used          no-unused-vars

src/components/reports/study/common/ReportByDateCSV.js
  Line 1:14:   Insert `·`  prettier/prettier
  Line 18:74:  Delete `⏎`  prettier/prettier

src/components/reports/study/index.js
  Line 5:3:    'Heading' is defined but never used                          no-unused-vars
  Line 6:3:    'Grid' is defined but never used                             no-unused-vars
  Line 7:3:    'Column' is defined but never used                           no-unused-vars
  Line 8:3:    'Section' is defined but never used                          no-unused-vars
  Line 9:3:    'Breadcrumb' is defined but never used                       no-unused-vars
  Line 10:3:   'BreadcrumbItem' is defined but never used                   no-unused-vars
  Line 13:22:  'FormattedMessage' is defined but never used                 no-unused-vars
  Line 24:11:  'setNotificationVisible' is assigned a value but never used  no-unused-vars
  Line 24:35:  'addNotification' is assigned a value but never used         no-unused-vars
  Line 29:10:  'source' is assigned a value but never used                  no-unused-vars
  Line 29:18:  'setSource' is assigned a value but never used               no-unused-vars

src/components/resultPage/ResultSearch.js
  Line 3:40:  'useIntl' is defined but never used  no-unused-vars

src/components/resultPage/SearchResultForm.js
  Line 1223:7:  'greaterThanOrLessThan' is assigned a value but never used  no-unused-vars
  Line 1236:9:  'isSpecialCase' is assigned a value but never used          no-unused-vars

src/components/validation/Index.js
  Line 1:39:  'useEffect' is defined but never used   no-unused-vars
  Line 7:10:  'injectIntl' is defined but never used  no-unused-vars

src/components/validation/SearchForm.js
  Line 6:3:     'FormLabel' is defined but never used              no-unused-vars
  Line 7:3:     'Heading' is defined but never used                no-unused-vars
  Line 8:3:     'Row' is defined but never used                    no-unused-vars
  Line 9:3:     'Section' is defined but never used                no-unused-vars
  Line 11:3:    'TextInput' is defined but never used              no-unused-vars
  Line 126:9:   'handleChange' is assigned a value but never used  no-unused-vars
  Line 126:30:  Unexpected empty arrow function                    @typescript-eslint/no-empty-function
  Line 238:11:  'errors' is defined but never used                 no-unused-vars
  Line 239:11:  'touched' is defined but never used                no-unused-vars

src/components/validation/Validation.js
  Line 7:3:     'DatePicker' is defined but never used                       no-unused-vars
  Line 8:3:     'DatePickerInput' is defined but never used                  no-unused-vars
  Line 12:3:    'Select' is defined but never used                           no-unused-vars
  Line 13:3:    'SelectItem' is defined but never used                       no-unused-vars
  Line 15:3:    'TextInput' is defined but never used                        no-unused-vars
  Line 24:10:   'getFromOpenElisServer' is defined but never used            no-unused-vars
  Line 115:23:  'values' is defined but never used                           no-unused-vars
  Line 146:28:  'rowId' is defined but never used                            no-unused-vars
  Line 147:19:  'id' is assigned a value but never used                      no-unused-vars
  Line 153:9:   'handleDatePickerChange' is assigned a value but never used  no-unused-vars
  Line 160:30:  'rowId' is defined but never used                            no-unused-vars
  Line 161:19:  'id' is assigned a value but never used                      no-unused-vars
  Line 172:9:   'validateResults' is assigned a value but never used         no-unused-vars
  Line 176:43:  'id' is defined but never used                               no-unused-vars
  Line 228:19:  'field' is defined but never used                            no-unused-vars
  Line 245:19:  'field' is defined but never used                            no-unused-vars
  Line 394:21:  'errors' is defined but never used                           no-unused-vars
  Line 394:29:  'touched' is defined but never used                          no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

@konavivekramakrishna
Copy link
Contributor Author

adding to it we can also

convert all the js extension to jsx while removing the react import, this can reduce the build time

@Ankit-Matth
Copy link
Contributor

Ankit-Matth commented Mar 30, 2024 •
edited
Loading

Hey @Ankit-Matth,

Let me explain in detail about everything.

Currently, when we commit, technically Husky will enforce rules using the command npx lint-staged to check for any unused variables or if we're conditionally using React hooks, which is not preferred.

for example :

if (props.isTrue === true){
  const [val, setVal] = useState(true);
}

In such cases, Husky will prevent the commit and also format before committing, ensuring code consistency.

To achieve this behavior, we have to modify the eslintconfig. If you review our frontend codebase, you'll notice many unused variables, imports, functions, and even instances of conditionally using hooks. Therefore, before this PR can be functional, we need to remove all unused variables and functions from the frontend codebase, which constitutes a significant part of our changes.

If you understand the above and are willing to contribute, please drop a comment indicating your willingness. I'll open an issue, and through multiple PRs, we'll carefully evaluate and remove all unused variables and functions, as well as eliminate conditionally used hooks.

cc : @mozzy11

Hey @konavivekramakrishna,

You're absolutely correct; there are indeed many unused variables, imports, functions, and even instances of conditionally using hooks in our frontend codebase. However, it seems the current Docker build failure might be unrelated and likely due to a mismatch between the package.json and lock file. Below, I've attached some screenshots of the build-and-push-image logs for reference:

build-and-push-image-1

build-and-push-image-2

To address this issue, you need to update the lock file by running npm install locally to ensure it reflects the dependencies specified in our package.json.

While it's crucial to remove all unused variables and functions from the frontend codebase before this PR can be functional, it's also imperative to address the current build failure due to a mismatch between the package.json and lock file.

Regarding the removal of these unused variables, imports, functions, and even instances of conditionally using hooks, I agree with your approach. It's essential to involve @mozzy11 in this discussion to gather their insights and perspectives. Collaboratively approaching this task will help us consider various viewpoints and potential risks involved.

@konavivekramakrishna
Copy link
Contributor Author

@Ankit-Matth

This PR is not yet completed. I reverted the changes in eslintconfig and package.json. This PR can be merged, but it won't be useful until correctly configured with eslint. Additionally, in package.json, the lint-staged configuration should be modified as follows:

 "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "prettier --write --ignore-unknown",
      "eslint --fix",
      "git update-index --again"
    ]
  },

@konavivekramakrishna konavivekramakrishna closed this by deleting the head repository Apr 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mozzy11 mozzy11 mozzy11 requested changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@konavivekramakrishna @mozzy11 @Ankit-Matth