Fix errors with modal when document is undefined

[multiwebinc]

Fixes #591
Fixes #573

Description

document is undefined when the component is first rendered and that creates an error. This checks for the existence of document before using it.

Also, all hooks need to be executed before any other code in the component, so I have moved some hooks up.

Type of change

Please delete options that are not relevant.

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

Works for me when using the component. I didn't perform any actual tests except for usage.

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have checked my code and corrected any misspellings

[multiwebinc]

I'm not sure why Prettier is failing. It's working for me locally:

❯ npx prettier --check --config .prettierrc app/lib/components/Modal/Modal.tsx
Checking formatting...
All matched files use Prettier code style!

❯ cat .prettierrc                            
{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "all"
}

[rluders]

I'm not sure why Prettier is failing. It's working for me locally:

❯ npx prettier --check --config .prettierrc app/lib/components/Modal/Modal.tsx
Checking formatting...
All matched files use Prettier code style!

❯ cat .prettierrc                            
{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "all"
}

You don't need to fix it manually, just run the prettier:fix (https://github.com/themesberg/flowbite-react/blob/main/package.json#L38)

[multiwebinc]

My point is that the formatting looks good to me. prettier:fix does not modify the file.

[rluders]

Well, this is just weird. @tulup-conner can you check it?

[osilkin98]

@multiwebinc The issue you're probably running into is that package.json has a target for prettier which appends any arguments to that command. I was able to get prettier to fix the issue by deleting the target temporarily and then running yarn prettier --write src/lib/components/Modal/.

If you replace line 2 with in src/lib/components/Modal/Modal.tsx the following, it should pass the prettier CI gate:

import { ComponentProps, FC, MouseEvent, PropsWithChildren, useEffect, useRef, useState } from 'react';

[tulup-conner]

Is this still an issue if you use flowbite-react as of e88cdab? This may not be a problem anymore but we haven't published the new version to a tag available via yarn install, so you will need to test by building the main branch locally.

[multiwebinc]

@rluders @osilkin98

The issue you're probably running into is that package.json has a target for prettier which appends any arguments to that command.

I figured out the problem. I was missing the following dependencies:

"prettier-plugin-organize-imports": "^3.2.2",
"prettier-plugin-tailwindcss": "^0.2.3",

[multiwebinc]

@tulup-conner If you could test that for me, it would be a lot easier since I'm not exactly sure how to do it. However reviewing the code it looks like it would work.

[rluders]

@multiwebinc you basically need to rebase your PR with the upstream/main branch.

[multiwebinc]

@rluders This seems to fix the issues for me.

[codecov]

Codecov Report

Base: 99.31% // Head: 99.20% // Decreases project coverage by -0.11% ⚠️

Coverage data is based on head (2d795ac) compared to base (f00628f).
Patch coverage: 69.56% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #606      +/-   ##
==========================================
- Coverage   99.31%   99.20%   -0.11%     
==========================================
  Files         131      131              
  Lines        6419     6428       +9     
  Branches      477      479       +2     
==========================================
+ Hits         6375     6377       +2     
- Misses         44       51       +7     

Impacted Files	Coverage Δ
src/lib/components/Modal/Modal.tsx	95.39% <69.56%> (-4.61%)	⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[osilkin98]

Thank you so much for this PR @multiwebinc, it's much appreciated!