From 0a0a6ecc82e968f95b1f859d0388ae8c38953183 Mon Sep 17 00:00:00 2001
From: nicomiguelino <nicomiguelino2014@gmail.com>
Date: Tue, 3 Dec 2024 16:17:40 -0800
Subject: [PATCH] chore: rename React components

---
 ...signed-in.jsx => authenticated-options.jsx} |  2 +-
 src/assets/js/components/options/sign-in.jsx   | 18 +++++++++---------
 src/assets/js/components/popup/sign-in.jsx     |  2 +-
 src/assets/js/options.jsx                      | 14 ++++++++------
 src/assets/js/popup.jsx                        |  8 ++++----
 5 files changed, 23 insertions(+), 21 deletions(-)
 rename src/assets/js/components/options/{signed-in.jsx => authenticated-options.jsx} (96%)

diff --git a/src/assets/js/components/options/signed-in.jsx b/src/assets/js/components/options/authenticated-options.jsx
similarity index 96%
rename from src/assets/js/components/options/signed-in.jsx
rename to src/assets/js/components/options/authenticated-options.jsx
index 195dd18..50ea786 100644
--- a/src/assets/js/components/options/signed-in.jsx
+++ b/src/assets/js/components/options/authenticated-options.jsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { useState } from 'react';
 import { signOut } from '@/features/auth/authSlice';
 
-export const SignedIn = () => {
+export const AuthenticatedOptionsView = () => {
   const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState(false);
 
diff --git a/src/assets/js/components/options/sign-in.jsx b/src/assets/js/components/options/sign-in.jsx
index 6050b62..0da4259 100644
--- a/src/assets/js/components/options/sign-in.jsx
+++ b/src/assets/js/components/options/sign-in.jsx
@@ -6,7 +6,7 @@ import { callApi } from '@/main';
 import { signIn } from '@/features/auth/authSlice';
 import { TokenHelpText } from '@/components/options/token-help-text';
 
-const SignInError = () => {
+const SignInFormError = () => {
   return (
     <div className='alert alert-danger mt-2' role='alert'>
       Unable to sign in. Check your credentials and internet connectivity,
@@ -15,9 +15,9 @@ const SignInError = () => {
   );
 }
 
-export const SignIn = () => {
+export const SignInForm = () => {
   const [isLoading, setIsLoading] = useState(false);
-  const [showSignInError, setShowSignInError] = useState(false);
+  const [showSignInFormError, setShowSignInFormError] = useState(false);
   const [token, setToken] = useState('');
   const dispatch = useDispatch();
 
@@ -27,7 +27,7 @@ export const SignIn = () => {
     return `${baseUrl}?${queryParams}`;
   };
 
-  const handleSignIn = async (event) => {
+  const handleSignInForm = async (event) => {
     event.preventDefault();
     setIsLoading(true);
 
@@ -41,10 +41,10 @@ export const SignIn = () => {
 
       await browser.storage.sync.set({ token: token });
 
-      setShowSignInError(false);
+      setShowSignInFormError(false);
       dispatch(signIn());
     } catch (error) {
-      setShowSignInError(true);
+      setShowSignInFormError(true);
     } finally {
       setIsLoading(false);
     }
@@ -66,7 +66,7 @@ export const SignIn = () => {
           className="btn btn-primary w-100"
           id="sign-in-submit"
           type="submit"
-          onClick={handleSignIn}
+          onClick={handleSignInForm}
         >
           {
             isLoading
@@ -82,8 +82,8 @@ export const SignIn = () => {
         <TokenHelpText />
 
         {
-          showSignInError
-            ? <SignInError />
+          showSignInFormError
+            ? <SignInFormError />
             : null
         }
       </form>
diff --git a/src/assets/js/components/popup/sign-in.jsx b/src/assets/js/components/popup/sign-in.jsx
index eb5c04d..9a3a66f 100644
--- a/src/assets/js/components/popup/sign-in.jsx
+++ b/src/assets/js/components/popup/sign-in.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export const PopupSignIn = () => {
+export const SignInCallToAction = () => {
   const handleSignIn = (event) => {
     browser.runtime.openOptionsPage();
   };
diff --git a/src/assets/js/options.jsx b/src/assets/js/options.jsx
index bc470d9..3c3e5c1 100644
--- a/src/assets/js/options.jsx
+++ b/src/assets/js/options.jsx
@@ -12,13 +12,15 @@ import {
 import 'bootstrap/scss/bootstrap.scss';
 import '@/scss/style.scss';
 
-import { SignIn } from '@/components/options/sign-in';
-import { SignedIn } from '@/components/options/signed-in';
+import { SignInForm } from '@/components/options/sign-in';
+import {
+  AuthenticatedOptionsView
+} from '@/components/options/authenticated-options';
 
 import { store } from '@/store';
 import { signIn } from '@/features/auth/authSlice';
 
-const Options = () => {
+const OptionsPage = () => {
   const signedIn = useSelector((state) => state.auth.signedIn);
   const dispatch = useDispatch();
 
@@ -39,8 +41,8 @@ const Options = () => {
 
         {
           signedIn
-            ? <SignedIn />
-            : <SignIn />
+            ? <AuthenticatedOptionsView />
+            : <SignInForm />
         }
       </div>
     </div>
@@ -50,6 +52,6 @@ const Options = () => {
 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(
   <Provider store={store}>
-    <Options />
+    <OptionsPage />
   </Provider>
 );
diff --git a/src/assets/js/popup.jsx b/src/assets/js/popup.jsx
index d532985..c75dfcb 100644
--- a/src/assets/js/popup.jsx
+++ b/src/assets/js/popup.jsx
@@ -13,7 +13,7 @@ import 'bootstrap/scss/bootstrap.scss';
 import '@/scss/style.scss';
 import '@/scss/sweetalert-icons.scss';
 
-import { PopupSignIn } from '@/components/popup/sign-in';
+import { SignInCallToAction } from '@/components/popup/sign-in';
 import { Success } from '@/components/popup/success';
 import { Proposal } from '@/components/popup/proposal';
 
@@ -24,7 +24,7 @@ import {
   setShowProposal,
 } from '@/features/popup/popupSlice';
 
-const Popup = () => {
+const PopupPage = () => {
   const dispatch = useDispatch();
 
   const showSignIn = useSelector((state) => state.popup.showSignIn);
@@ -42,7 +42,7 @@ const Popup = () => {
 
   return (
     <>
-      {showSignIn && <PopupSignIn />}
+      {showSignIn && <SignInCallToAction />}
       {showProposal && <Proposal />}
       {showSuccess && <Success />}
     </>
@@ -52,6 +52,6 @@ const Popup = () => {
 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(
   <Provider store={store}>
-    <Popup />
+    <PopupPage />
   </Provider>
 );