Contact Us requires refactoring #41

rathorevaibhav · 2023-06-02T10:18:16Z

rathorevaibhav
Jun 2, 2023
Maintainer

Description

This is a trimmed-down version of the code of a "Contact Us" page built with React with Inertia/Laravel in the backend.

Questions

How many lines of code do you see that have been duplicated?
Why do you think this duplication came into place?
If you're building this page and following the DRY principle, how will you code it? Share your version of the code.

import ContactLayout from "@/Layouts/ContactLayout";
import InputError from "@/Components/InputError";
import Footer from "@/Components/Footer";
import Authenticated from "@/Layouts/AuthenticatedLayout";
import { Head, useForm } from "@inertiajs/inertia-react";
import Guest from "@/Layouts/GuestLayout";
import Input from "@/Components/Input";
import TextArea from "@/Components/TextArea";

export default function Contact({ auth }) {
    let initialValues = {
        email: "",
        message: ""
    }
    if (auth.user) {
        const { ...authData } = auth.user;
        initialValues = {
            ...authData
        };
    }
    const { data, setData, post, processing, errors } = useForm(initialValues);

    const submit = (e) => {
        e.preventDefault();
        post(route("contact.store"));
    };

    let labelClass = 'peer-focus:font-medium absolute text-sm duration-300 transform -translate-y-6 scale-75 top-2 -z-10 origin-[0] peer-focus:left-0 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6';
    let inputClass = 'block py-2.5 px-0 w-full bg-transparent border-0 border-b-2 appearance-none focus:outline-none focus:ring-0 peer';

    return (
        <>
            {auth.user != null ? (
                <Authenticated>
                    <Head title="Contact Us" />
                    <ContactLayout>
                        <form onSubmit={submit} className="mb-4 mt-4">
                            <div className="relative z-0 w-full mb-6 group">
                                <label htmlFor="email" className={labelClass}>Email*</label>
                                <span className={inputClass}>{auth.user.email}</span>
                            </div>
                            <div className="relative z-0 mt-16 w-full mb-6 group">
                                <TextArea name="message" id="message" value={data.message} onChange={val => setData({ ...data, message: val })} required label="Message*" mode="light" />
                                <InputError message={errors.message} className="mt-2" />
                            </div>
                            <div className="flex items-center justify-start mt-4">
                                <button className="mt-4 inline-flex items-center px-4 py-2 bg-custom border border-transparent font-semibold text-xs text-white uppercase hover:bg-custom_hover cursor-pointer" processing={processing} disabled={processing}>
                                    Submit
                                </button>
                            </div>
                        </form>
                    </ContactLayout>
                </Authenticated>
            ) : (
                <Guest>
                    <Head title="Contact Us" />
                    <ContactLayout>
                        <form onSubmit={submit} className="mb-4 mt-4">
                            <div className="relative z-0 w-full mb-6 group">
                                <Input id="email" name="email" value={data.email} onChange={val => setData({ ...data, email: val })} label="Email*" required mode="light" />
                                <InputError message={errors.email} className="mt-2" />
                            </div>
                            <div className="relative z-0 mt-16 w-full mb-6 group">
                                <TextArea name="message" id="message" value={data.message} onChange={val => setData({ ...data, message: val })} required label="Message*" mode="light" />
                                <InputError message={errors.message} className="mt-2" />
                            </div>
                            <div className="flex items-center justify-start mt-4">
                                <button className="mt-4 inline-flex items-center px-4 py-2 bg-custom border border-transparent font-semibold text-xs text-white uppercase hover:bg-custom_hover cursor-pointer" processing={processing} disabled={processing}>
                                    Submit
                                </button>
                            </div>
                        </form>
                    </ContactLayout>
                </Guest>
            )}
            <Footer />
        </>
    );
}

LavishRawat · 2023-06-03T16:11:50Z

LavishRawat
Jun 3, 2023

The line of code that is duplicate are-

<Head title="Contact Us" />
<ContactLayout>
    <form onSubmit={submit} className="mb-4 mt-4">
       <div className="relative z-0 w-full mb-6 group">
          
        </div>
        <div className="relative z-0 mt-16 w-full mb-6 group">
           <TextArea name="message" id="message" value={data.message} onChange={val => setData({ ...data, message: val })} required label="Message*" mode="light" />
           <InputError message={errors.message} className="mt-2" />
         </div>
         <div className="flex items-center justify-start mt-4">
            <button className="mt-4 inline-flex items-center px-4 py-2 bg-custom border border-transparent font-semibold text-xs text-white uppercase hover:bg-custom_hover cursor-pointer" processing={processing} disabled={processing}>
                  Submit
            </button>
       </div>
    </form>
</ContactLayout>

I think that duplication occurred when Developer was trying to create separate sections for Authenticated and Guest users.
The condition auth.user != null can be simply written as auth.user.
we can also change the component rendered based on a condition. Here is the code-

const Component = auth.user ? Authenticated : Guest;
 
 return (
   <>
     <Head title="Contact Us" />
     <Component>
       <ContactLayout>
         <form onSubmit={submit} className="mb-4 mt-4">
           <div className="relative z-0 w-full mb-6 group">
             {auth.user ? (
               <>
                 <label htmlFor="email" className={labelClass}>Email*</label>
                 <span className={inputClass}>{auth.user.email}</span>
               </>
             ) : (
               <>
                 <Input id="email" name="email" value={data.email} onChange={val => setData({ ...data, email: val })} label="Email*" required mode="light" />
                 <InputError message={errors.email} className="mt-2" />
               </>
             )}
           </div>
           <div className="relative z-0 mt-16 w-full mb-6 group">
             <TextArea name="message" id="message" value={data.message} onChange={val => setData({ ...data, message: val })} required label="Message*" mode="light" />
             <InputError message={errors.message} className="mt-2" />
           </div>
           <div className="flex items-center justify-start mt-4">
             <button className="mt-4 inline-flex items-center px-4 py-2 bg-custom border border-transparent font-semibold text-xs text-white uppercase hover:bg-custom_hover cursor-pointer" processing={processing} disabled={processing}>
               Submit
            </button>
           </div>
         </form>
      </ContactLayout>
     </Component>
     <Footer />
   </>
 );
}

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Contact Us requires refactoring #41

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Contact Us requires refactoring #41

Uh oh!

Uh oh!

rathorevaibhav Jun 2, 2023 Maintainer

Description

Questions

Replies: 1 comment

Uh oh!

Uh oh!

LavishRawat Jun 3, 2023

rathorevaibhav
Jun 2, 2023
Maintainer

LavishRawat
Jun 3, 2023