Add disable state for buttons

projkov · Jun 27, 2024 · 35db16d · 35db16d
1 parent a73a154
commit 35db16d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/App.css b/src/App.css
@@ -55,6 +55,11 @@ button:hover {
   cursor: pointer;
 }
 
+button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 .input {
   width: 100%;
   padding: 10px;

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,7 +10,7 @@ import Loader from './components/loader';
 const App: React.FC = () => {
   const { url, handleUrlChange, handleFetch,
     resource, expression, setExpression, setResource,
-    handleExecute, result, handleShare, isLoading } = useFHIRPathUI();
+    handleExecute, result, handleShare, isLoading, isExecuteActive, isGetResourceActive, isShareActive } = useFHIRPathUI();
 
   return (
     <div className="App">
@@ -19,7 +19,7 @@ const App: React.FC = () => {
         <>
           <div className="resourceBlock">
             <input className="input" type="url" value={url} onChange={handleUrlChange} />
-            <button onClick={handleFetch}><FileArrowDown fontSize={24}/></button>
+            <button onClick={handleFetch} disabled={!isGetResourceActive}><FileArrowDown fontSize={24}/></button>
           </div>
           <Editor height="100vh" defaultLanguage="json" value={resource} onChange={(value) => setResource(value as string)} />
         </>
@@ -31,8 +31,8 @@ const App: React.FC = () => {
         </div>
       </Allotment>
       <div className="buttonsBlock">
-        <button onClick={handleExecute}><Play fontSize={24} /></button>
-        <button onClick={handleShare}><ShareFat fontSize={24} /></button>
+        <button onClick={handleExecute} disabled={!isExecuteActive}><Play fontSize={24} /></button>
+        <button onClick={handleShare} disabled={!isShareActive}><ShareFat fontSize={24} /></button>
       </div>
     </div>
   );

diff --git a/src/hooks.ts b/src/hooks.ts
@@ -11,6 +11,9 @@ export function useFHIRPathUI() {
     const [result, setResult] = useState<string>('');
     const [shareLink, setShareLink] = useState<string>('');
     const [isLoading, setIsLoading] = useState<boolean>(false);
+    const isGetResourceActive = url !== ''
+    const isExecuteActive = resource !== '' && expression !== ''
+    const isShareActive = url !== '' && expression !== ''
 
     const handleFetch = async () => {
         setIsLoading(true)
@@ -74,5 +77,8 @@ export function useFHIRPathUI() {
         setResource,
         setExpression,
         isLoading,
+        isExecuteActive,
+        isGetResourceActive,
+        isShareActive
     }
 }