From bd06f07b290f8875e5f28254c55fa9ead9323980 Mon Sep 17 00:00:00 2001
From: Mauro de Souza <maurodesouza2017@hotmail.com>
Date: Tue, 25 Apr 2023 20:33:01 -0300
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9A=A1=20=20chore:=20add=20disabled=20st?=
 =?UTF-8?q?yles=20to=20simple=20input?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/inputs/simple-input/styles.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/inputs/simple-input/styles.ts b/src/components/inputs/simple-input/styles.ts
index 9626e6e..24913c4 100644
--- a/src/components/inputs/simple-input/styles.ts
+++ b/src/components/inputs/simple-input/styles.ts
@@ -63,5 +63,10 @@ export const Input = styled.input<InputProps>`
     padding: 8px 12px;
 
     ${as === 'textarea' && inputModifiers.textarea(theme)};
+
+    &:disabled {
+      opacity: 0.8;
+      cursor: not-allowed;
+    }
   `}
 `;

From 18501d057fd7f382298feff140a4c44d36ed55c9 Mon Sep 17 00:00:00 2001
From: Mauro de Souza <maurodesouza2017@hotmail.com>
Date: Tue, 25 Apr 2023 20:33:56 -0300
Subject: [PATCH 2/2] =?UTF-8?q?=E2=9A=A1=20=20chore:=20improve=20github=20?=
 =?UTF-8?q?username=20submit?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sections/guard/index.tsx | 18 +++++++++++-------
 src/components/sections/guard/styles.ts |  2 +-
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/sections/guard/index.tsx b/src/components/sections/guard/index.tsx
index d94ccee..d2ba610 100644
--- a/src/components/sections/guard/index.tsx
+++ b/src/components/sections/guard/index.tsx
@@ -1,15 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
+import { FormEvent, useEffect, useRef, useState } from 'react';
 
 import { events } from 'app';
 import { useCanvas, useSettings } from 'hooks';
 
 import { CanvasStatesEnum } from 'types';
-import { debounce } from 'utils';
-
 import * as S from './styles';
 
 const BASE_URL = 'https://api.github.com/users/';
-const DEBOUNCE_TIMEOUT = 500;
 
 type GuardSectionProps = {
   sectionId: string;
@@ -20,19 +17,26 @@ const GuardSection = ({ children, sectionId }: GuardSectionProps) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
 
   const { previewMode } = useCanvas();
   const { settings } = useSettings();
 
   const { github } = settings.user;
 
-  const handleCheckGithubUsername = async () => {
+  const handleCheckGithubUsername = async (event: FormEvent) => {
+    event.preventDefault();
+
     const { value = '' } = inputRef.current!;
 
     if (!value) return;
 
+    setIsLoading(true);
+
     const response = await fetch(`${BASE_URL}${value}`);
 
+    setIsLoading(false);
+
     if (!response.ok) {
       setError('User not found');
 
@@ -64,7 +68,7 @@ const GuardSection = ({ children, sectionId }: GuardSectionProps) => {
       {github ? (
         <>{children}</>
       ) : (
-        <S.Container>
+        <S.Container onSubmit={handleCheckGithubUsername}>
           <S.AlertIcon size={24} />
 
           <S.Text>
@@ -78,7 +82,7 @@ const GuardSection = ({ children, sectionId }: GuardSectionProps) => {
             ref={inputRef}
             label="Github username"
             placeholder="Your github username"
-            onChange={debounce(handleCheckGithubUsername, DEBOUNCE_TIMEOUT)}
+            disabled={isLoading}
           />
         </S.Container>
       )}
diff --git a/src/components/sections/guard/styles.ts b/src/components/sections/guard/styles.ts
index c9eaa97..2d33fde 100644
--- a/src/components/sections/guard/styles.ts
+++ b/src/components/sections/guard/styles.ts
@@ -3,7 +3,7 @@ import { AlertCircle } from '@styled-icons/feather';
 
 import { SimpleInput } from 'components/inputs';
 
-export const Container = styled.div`
+export const Container = styled.form`
   ${({ theme }) => css`
     width: min(100%, 30rem);
     margin-inline: auto;