refactor : Remove potential issues by replacing flushSync and passing ButtonComponents as props directly

[maxiim3]

A little improvement :

• React discourages from using flushSync
• I refactored so that Components are passed directly as props instead of children :

 {BUTTONS?.map((Comp) => {
        return (
            <CardComponent
                key={Comp.name}
                ChildComponent={Comp} />
        );
    })}

I had to make the Home component "client" to avoid SSR issues. I removed getCode function that uses flushSync. Instead I wrapped the ChildComponent (Button) into a div and added a parentRef reference. So I could target the ChildNode and extract the HTML code as string using outerHTML.

const parentRef = useRef<HTMLDivElement>(null);
//...
const onCopy = () => {
        const code = parentRef.current?.childNodes[0]!
        const htmlElement = ReactDOM.findDOMNode(code)! as Element
        const html = htmlElement.outerHTML
        //...
        navigator.clipboard.writeText(html);
        //...
    };
//....
 <div ref={parentRef}  >
      <ChildComponent />
  </div>

Node that I forgot to make a separate commit for the formatting caused by my IDE, so that there are a lot of changes due to space and formatting. Sorry about that...

TButton is just a type for the exported BUTTONS

export type TButton = (() => JSX.Element);
export const BUTTONS: TButton[] = [

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
buttons	❌ Failed (Inspect)			Feb 15, 2024 11:19am

[ibelick]

Hi @maxiim3 ,

Thanks for your contribution! I noticed you're using ReactDOM.findDOMNode, which is deprecated too. Using callback refs or forwarded refs to access the DOM node could be a better choice.