chore: rename React components

src/assets/js/components/options/signed-in.jsx → 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);
 

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>

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();
   };

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>
 );

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>
 );