src/driven/utils/components/buttons/primary-button/PrimaryButton.tsx

@@ -4,12 +4,14 @@ interface IPrimaryButtonProps {
   title: string;
   onClick: (e: React.MouseEvent) => void;
   className?: string;
+  isDisabled?: boolean;
 }
 
 export default function PrimaryButton(props: IPrimaryButtonProps) {
-  const { onClick, title, className } = props;
+  const { onClick, title, className, isDisabled = false } = props;
   return (
     <button
+      disabled={isDisabled}
       onClick={onClick}
       className={`py-1 px-5 transition-all hover:bg-primary-300 bg-primary-main rounded-lg text-white text-center ${className}`}
     >

src/driving/main/pages/index.tsx

@@ -1,5 +1,5 @@
 import { AxiosError } from 'axios';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { HTTPPovider } from '~/driven/boundaries/http-boundary/httpBoundary';
 import { HttpOptionsType } from '~/driven/boundaries/http-boundary/protocols';
 import Notification from '~/driven/utils/components/Notification/Notification';
@@ -16,7 +16,7 @@ export default function index() {
   const [selectedPlaceRowId, setSelectedPlaceRowId] = useState<string>('');
   const { accessTokenUpdateHandler, notLoginAuth, userData } = useGetNavigatorAndTokenUpdater();
   const [error, setError] = useState<{ message: string; type: 'error' | 'success' }>({ message: '', type: 'error' });
-
+  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
   const onSubmitMember = async (e: React.FormEvent) => {
     e.preventDefault();
     try {
@@ -51,6 +51,12 @@ export default function index() {
       }
     }
   };
+
+  useEffect(() => {
+    if (selectedUserRowId && selectedPlaceRowId) setIsSubmitDisabled(false);
+    else setIsSubmitDisabled(true);
+  }, [selectedUserRowId, selectedPlaceRowId]);
+
   return (
     <>
       {Boolean(error.message) && (
@@ -63,7 +69,12 @@ export default function index() {
       <PageTitle className='px-4 py-5' title={staticMessages.global.users} />
       <div className='container mx-auto px-4'>
         <form onSubmit={onSubmitMember} className='w-full flex flex-row-reverse items-center py-2 sticky top-0'>
-          <PrimaryButton className='text-sm' title={staticMessages.global.submit} onClick={() => null} />
+          <PrimaryButton
+            isDisabled={isSubmitDisabled}
+            className='text-sm disabled:opacity-25'
+            title={staticMessages.global.submit}
+            onClick={() => null}
+          />
         </form>
         <div className='md:grid-cols-2 gap-x-4 grid grid-cols-1 mx-auto'>
           <UsersList selectedRowId={selectedUserRowId} setSelectedRowId={setSelectedUserRowId} />