Merge pull request #110 from HunnySajid/feat/ts-improvements

Feat/ts improvements

src/_locales/localeContext.tsx

@@ -10,8 +10,12 @@ interface ILocaleContext {
 
 const LocaleContext = createContext<ILocaleContext | null>(null);
 
-export const LocaleProvider = ({ children }) => {
-  const [currentLocale, setCurrentLocale] = useState(defaultLocale);
+interface ILocaleProvider {
+  children?: React.ReactNode;
+}
+
+export const LocaleProvider = ({ children }: ILocaleProvider): JSX.Element => {
+  const [currentLocale, setCurrentLocale] = useState<string>(defaultLocale);
 
   const handleChangeLocale = async () => {
     const lang = await configService.getLanguage();
@@ -27,9 +31,10 @@ export const LocaleProvider = ({ children }) => {
     setCurrentLocale(newLocale);
   };
 
+  const selectedMessages = messages[currentLocale as keyof typeof messages];
   return (
     <LocaleContext.Provider value={{ currentLocale, changeLocale }}>
-      <IntlProvider locale={currentLocale} messages={messages[currentLocale]}>
+      <IntlProvider locale={currentLocale} messages={selectedMessages}>
         {children}
       </IntlProvider>
     </LocaleContext.Provider>

src/components/createIdentifierCard.tsx

@@ -3,9 +3,19 @@ import { useIntl } from "react-intl";
 import { Button } from "@components/ui";
 import { hasWhiteSpace, removeWhiteSpace } from "@pages/background/utils";
 
-export function CreateIdentifierCard(props): JSX.Element {
+interface ICreateIdentifierCard {
+  error?: string | JSX.Element;
+  handleCreateIdentifier: (name: string) => void;
+  isLoading?: boolean;
+}
+
+export function CreateIdentifierCard(
+  props: ICreateIdentifierCard
+): JSX.Element {
   const [name, setName] = useState("");
-  const [nameError, setNameError] = useState<string | JSX.Element>("");
+  const [nameError, setNameError] = useState<string | JSX.Element | undefined>(
+    ""
+  );
   const { formatMessage } = useIntl();
   const emptyNameError = formatMessage({ id: "identifier.error.emptyName" });
 

src/components/credentialCard.tsx

@@ -2,10 +2,22 @@ import { useIntl } from "react-intl";
 import { Text, Subtext, Card } from "@components/ui";
 
 interface ICredential {
-  credential: any;
+  issueeName: string;
+  schema: {
+    title: string;
+    credentialType: string;
+    description: string;
+  };
+  status: {
+    et: string;
+  };
 }
 
-export function CredentialCard({ credential }: ICredential): JSX.Element {
+interface ICredentialCard {
+  credential: ICredential;
+}
+
+export function CredentialCard({ credential }: ICredentialCard): JSX.Element {
   const { formatMessage } = useIntl();
 
   return (

src/components/credentialList.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { CredentialCard } from "@components/credentialCard";
-import { Loader } from "@components/loader";
-import { IMessage } from "@pages/background/types";
+import { Loader } from "@components/ui";
+import { IMessage } from "@config/types";
 
 export function CredentialList(): JSX.Element {
   const [credentials, setCredentials] = useState([]);

src/components/identifierCard.tsx

@@ -2,10 +2,13 @@ import { obfuscateString } from "@pages/background/utils";
 import { useIntl } from "react-intl";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { Card, Text, Subtext } from "@components/ui";
+import { IIdentifier } from "@config/types";
 
-interface IIdentifier {}
+interface IIdentifierCard {
+  aid: IIdentifier;
+}
 
-export function IdentifierCard({ aid }): JSX.Element {
+export function IdentifierCard({ aid }: IIdentifierCard): JSX.Element {
   const { formatMessage } = useIntl();
 
   return (

src/components/identifierList.tsx

@@ -1,11 +1,14 @@
 import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { IdentifierCard } from "@components/identifierCard";
-import { Button, Drawer, Text } from "@components/ui";
-import { Loader } from "@components/loader";
-import { IMessage } from "@pages/background/types";
+import { Button, Drawer, Text, Loader } from "@components/ui";
+import { IMessage } from "@config/types";
 import { CreateIdentifierCard } from "@components/createIdentifierCard";
 
+interface ICreateIdentifier {
+  name: string;
+}
+
 export function IdentifierList(): JSX.Element {
   const [aids, setAids] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -37,9 +40,11 @@ export function IdentifierList(): JSX.Element {
     initialFetchIdentifiers();
   }, []);
 
-  const handleCreateIdentifier = async (name) => {
+  const handleCreateIdentifier = async (name: string) => {
     setIsCreating(true);
-    const { data, error } = await chrome.runtime.sendMessage<IMessage<void>>({
+    const { data, error } = await chrome.runtime.sendMessage<
+      IMessage<ICreateIdentifier>
+    >({
       type: "create-resource",
       subtype: "identifier",
       data: { name },

src/components/selectCredential.tsx

@@ -1,9 +1,8 @@
 import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { CredentialCard } from "@components/credentialCard";
-import { Button } from "@components/ui";
-import { Loader } from "@components/loader";
-import { IMessage } from "@pages/background/types";
+import { Button, Loader } from "@components/ui";
+import { IMessage } from "@config/types";
 
 export function SelectCredential(): JSX.Element {
   const [credentials, setCredentials] = useState([]);

src/components/selectIdentifier.tsx

@@ -1,11 +1,14 @@
 import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { IdentifierCard } from "@components/identifierCard";
-import { Button, Drawer, Text } from "@components/ui";
-import { Loader } from "@components/loader";
-import { IMessage } from "@pages/background/types";
+import { Button, Drawer, Text, Loader } from "@components/ui";
+import { IMessage } from "@config/types";
 import { CreateIdentifierCard } from "@components/createIdentifierCard";
 
+interface ISelectIdentifier {
+  name: string;
+}
+
 export function SelectIdentifier(): JSX.Element {
   const [aids, setAids] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -47,9 +50,11 @@ export function SelectIdentifier(): JSX.Element {
     fetchIdentifiers();
   }, []);
 
-  const handleCreateIdentifier = async (name) => {
+  const handleCreateIdentifier = async (name: string) => {
     setIsCreating(true);
-    const { data, error } = await chrome.runtime.sendMessage<IMessage<void>>({
+    const { data, error } = await chrome.runtime.sendMessage<
+      IMessage<ISelectIdentifier>
+    >({
       type: "create-resource",
       subtype: "identifier",
       data: { name },

src/components/sidebar.tsx

@@ -79,7 +79,11 @@ interface ISidebar {
   logo?: string;
 }
 
-const StyledMenu = styled.div`
+interface IStyledMenu {
+  $isActive?: boolean;
+}
+
+const StyledMenu = styled.div<IStyledMenu>`
   background-color: ${({ $isActive, theme }) =>
     $isActive ? theme?.colors?.secondary : ""};
   color: ${({ $isActive, theme }) => ($isActive ? theme?.colors?.subtext : "")};

src/components/signinCard.tsx

@@ -1,12 +1,18 @@
 import { useIntl } from "react-intl";
-import { CustomSwitch } from "@components/customSwitch";
-import { Card, Button, Text } from "@components/ui";
+import { Card, Button, Text, Switch } from "@components/ui";
+import { ISignin } from "@config/types";
+
+interface ISigninCard {
+  signin: ISignin;
+  handleDelete: () => void;
+  handleAutoSignin: () => void;
+}
 
 export function SigninCard({
   signin,
   handleDelete,
   handleAutoSignin,
-}): JSX.Element {
+}: ISigninCard): JSX.Element {
   const { formatMessage } = useIntl();
   return (
     <Card>
@@ -61,7 +67,7 @@ export function SigninCard({
             <Text className="font-bold" $color="heading">
               {formatMessage({ id: "signin.autoSignin" })}
             </Text>
-            <CustomSwitch
+            <Switch
               isChecked={signin.autoSignin}
               handleToggle={handleAutoSignin}
             />

src/components/signinList.tsx

@@ -2,11 +2,16 @@ import { useState, useEffect } from "react";
 import { useIntl } from "react-intl";
 import { TAB_STATE } from "@pages/popup/constants";
 import { SigninCard } from "@components/signinCard";
-import { Loader } from "@components/loader";
-import { IMessage } from "@pages/background/types";
+import { Loader } from "@components/ui";
+import { IMessage, ISignin } from "@config/types";
+
+interface IResourceSignin {
+  index: number;
+  signin?: ISignin;
+}
 
 export function SigninList(): JSX.Element {
-  const [signins, setSignins] = useState([]);
+  const [signins, setSignins] = useState<ISignin[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const { formatMessage } = useIntl();
   const fetchSignins = async () => {
@@ -20,7 +25,9 @@ export function SigninList(): JSX.Element {
   };
 
   const deleteSignin = async (index: number) => {
-    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+    const { data } = await chrome.runtime.sendMessage<
+      IMessage<IResourceSignin>
+    >({
       type: "delete-resource",
       subtype: "signins",
       data: {
@@ -39,9 +46,11 @@ export function SigninList(): JSX.Element {
     }
   };
 
-  const updateAutoSignin = async (index: number, signin) => {
+  const updateAutoSignin = async (index: number, signin: ISignin) => {
     console.log("signin", signin, index);
-    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+    const { data } = await chrome.runtime.sendMessage<
+      IMessage<IResourceSignin>
+    >({
       type: "update-resource",
       subtype: "auto-signin",
       data: {

src/components/ui/button/button.tsx

@@ -1,5 +1,5 @@
 import { styled } from "styled-components";
-import { Loader } from "@components/loader";
+import { Loader } from "@components/ui";
 
 interface IButton {
   handleClick: () => void;

src/components/ui/dropdown/dropdown.tsx

@@ -1,7 +1,19 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 
-const DropdownWrapper = styled.div`
+interface IDropdownOption {
+  label: string;
+  value: string;
+}
+
+interface IDropdown {
+  options: IDropdownOption[];
+  selectedOption?: IDropdownOption;
+  onSelect: (option: IDropdownOption) => void;
+  zIndex?: number;
+}
+
+const DropdownWrapper = styled.div<Pick<IDropdown, "zIndex">>`
   position: relative;
   display: inline-block;
   width: 100%;
@@ -43,14 +55,19 @@ const DropdownItem = styled.li`
   }
 `;
 
-export const Dropdown = ({ selectedOption, options, onSelect, zIndex }) => {
+export const Dropdown = ({
+  selectedOption,
+  options,
+  onSelect,
+  zIndex,
+}: IDropdown) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const handleDropdownClick = () => {
     setIsOpen(!isOpen);
   };
 
-  const handleOptionClick = (option) => {
+  const handleOptionClick = (option: IDropdownOption) => {
     setIsOpen(false);
     onSelect(option);
   };

src/components/ui/index.ts

@@ -3,3 +3,6 @@ export * from "./drawer";
 export * from "./typography";
 export * from "./card";
 export * from "./dropdown";
+export * from "./radio";
+export * from "./switch";
+export * from "./loader";

src/components/ui/loader/index.ts

@@ -0,0 +1 @@
+export { Loader } from "./loader";

src/components/ui/radio/index.ts

@@ -0,0 +1 @@
+export { Radio } from "./radio";

src/components/customRadio.tsx → src/components/ui/radio/radio.tsx

@@ -1,16 +1,16 @@
-interface ICustomRadio {
+interface IRadio {
   id?: string;
   component?: JSX.Element;
   checked: boolean;
   onClick: () => void;
 }
 
-export function CustomRadio({
+export function Radio({
   id,
   component,
   checked,
   onClick,
-}: ICustomRadio): JSX.Element {
+}: IRadio): JSX.Element {
   return (
     <div
       onClick={onClick}

src/components/ui/switch/index.ts

@@ -0,0 +1 @@
+export { Switch } from "./switch";

src/components/customSwitch.tsx → src/components/ui/switch/switch.tsx

@@ -16,7 +16,12 @@ const icon = (
   </svg>
 );
 
-export function CustomSwitch({ handleToggle, isChecked }): JSX.Element {
+interface ISwitch {
+  isChecked: boolean;
+  handleToggle: () => void;
+}
+
+export function Switch({ handleToggle, isChecked }: ISwitch): JSX.Element {
   return (
     <button
       className={`w-12 h-6 rounded-full flex items-center transition duration-300 focus:outline-none shadow bg-gray-light ${