"Unorganized, magic numbers abound, decent functionality"

lang: JavaScript·31 lines

//your_submission

ChangePasswordSection.js

import { useState } from 'react';
import Button from '@/src/components/aon/Button';
import { ChangePasswordModal } from '../ChangePasswordModal';
export function PasswordSection() {
  const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false);
  return (
    <>
      <div className="flex flex-col items-start gap-8 py-4 lg:flex-row lg:items-center">
        <div className="w-full max-w-[486px] lg:w-[486px]">
          <h2 className="mb-2 text-h4 font-semibold text-aon-text2">Senha</h2>
          <p className="text-p2 text-aon-text3">
            Nesta seção, você pode alterar sua senha. Para isso, você precisará inserir a senha atual e definir uma nova, garantindo mais segurança para sua conta.
          </p>
        </div>
        <div className="w-full lg:w-[200px] lg:flex-none">
          <Button
            variant="primary"
            className="w-full px-6 py-2.5"
            onClick={() => setIsChangePasswordModalOpen(true)}
          >
            Alterar senha
          </Button>
        </div>
      </div>
      <ChangePasswordModal
        isOpen={isChangePasswordModalOpen}
        onClose={() => setIsChangePasswordModalOpen(false)}
      />
    </>
  );
}

//detailed_analysis

Unextracted Constants

The code is full of magic numbers and inline styles. Extract them into named constants to make the code easier to read and maintain. Who thought it was a good idea to write CSS in JavaScript?

Duplicate State Handlers

The code has two separate handlers for opening and closing the modal. Consolidate them into a single toggle function. Don't make me watch you repeat yourself like a broken record.

Missing Error Handling

The code assumes that the ChangePasswordModal will always work as expected. What if it fails? Add some error handling to make sure the user doesn't get stuck in an infinite loop of disappointment.

//suggested_fix

ChangePasswordSection_fixed.js

+import { useState } from 'react';

+import Button from '@/src/components/aon/Button';

+import { ChangePasswordModal } from '../ChangePasswordModal';

+const ModalButtonClassName = 'w-full px-6 py-2.5';

+const ModalButtonVariant = 'primary';

+export function PasswordSection() {

+ const [isChangePasswordModalOpen, setIsChangePasswordModalOpen] = useState(false);

+ const handleModalOpen = () => setIsChangePasswordModalOpen(true);

+ const handleModalClose = () => setIsChangePasswordModalOpen(false);

+ return (

+ <>

+ <div className="flex flex-col items-start gap-8 py-4 lg:flex-row lg:items-center">

+ <div className="w-full max-w-[486px] lg:w-[486px]">

+ <h2 className="mb-2 text-h4 font-semibold text-aon-text2">Senha</h2>

+ <p className="text-p2 text-aon-text3">

+ Nesta seção, você pode alterar sua senha. Para isso, você precisará inserir a senha atual e definir uma nova, garantindo mais segurança para sua conta.

+ </p>

+ </div>

+ <div className="w-full lg:w-[200px] lg:flex-none">

+ <Button

+ variant={ModalButtonVariant}

+ className={ModalButtonClassName}

+ onClick={handleModalOpen}

+ >

+ Alterar senha

+ </Button>

+ </div>

+ <ChangePasswordModal

+ isOpen={isChangePasswordModalOpen}

+ onClose={handleModalClose}

+ />

+ </>

+ );