Merge pull request #7 from consdu/bugfix/few-bugfixes

Bugfix/few bugfixes
consdu · Nov 6, 2023 · a2134d7 · a2134d7
2 parents 7182ee6 + a3a49a8
commit a2134d7
Show file tree

Hide file tree

Showing 10 changed files with 131 additions and 140 deletions.
diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx
@@ -1,13 +1,18 @@
-import { render, screen } from "@testing-library/react";
+import { act, render, screen } from "@testing-library/react";
 import Loading from "./Loading";
+import { vi } from "vitest";
 
 describe("Given a Loading Component", () => {
   describe("When rendered", () => {
     test("Then it should show a loading animation", () => {
+      vi.useFakeTimers();
+
       const loadingAnimationName = "loading animation";
 
       render(<Loading />);
 
+      act(() => vi.advanceTimersByTime(200));
+
       const loadingAnimation = screen.getByLabelText(loadingAnimationName);
 
       expect(loadingAnimation).toBe;

diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
@@ -1,10 +1,25 @@
+import React, { useState, useEffect } from "react";
 import LoadingStyled from "./LoadingStyled";
 
 const Loading = (): React.ReactElement => {
+  const [showLoading, setShowLoading] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowLoading(true);
+    }, 200);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
-    <LoadingStyled>
-      <div className="loader" aria-label="loading animation"></div>
-    </LoadingStyled>
+    <>
+      {showLoading && (
+        <LoadingStyled>
+          <div className="loader" aria-label="loading animation"></div>
+        </LoadingStyled>
+      )}
+    </>
   );
 };
 

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,5 +1,3 @@
-import { ContactStructure } from "./types";
-
 export const paths = {
   userLogin: "/user/login",
   login: "/login",
@@ -32,23 +30,3 @@ export const responseMesssages = {
   deleteSuccessful: "Contact deleted succesfully",
   updateSuccessful: "Contact updated succesfully",
 };
-
-export const emptySelectedContact: ContactStructure = {
-  id: "",
-  user: "",
-  address: "",
-  avatar:
-    "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIHZpZXdCb3g9IjAgMCA4MCA4MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBvcGFjaXR5PSIwLjIiIGN4PSI0MCIgY3k9IjQwIiByPSI0MCIgZmlsbD0iI0YxRjhGNCIvPgo8L3N2Zz4K",
-  birthday: "01-01-2000",
-  email: "",
-  name: "﹒",
-  surname: "",
-  phoneNumber: {
-    mobile: "",
-  },
-  socials: {
-    twitter: "",
-    instagram: "",
-    linkedin: "",
-  },
-};
diff --git a/src/fonts.ts b/src/fonts.ts
@@ -0,0 +1,4 @@
+import "@fontsource/sora/300.css";
+import "@fontsource/sora/400.css";
+import "@fontsource/sora/600.css";
+import "@fontsource/sora/700.css";
diff --git a/src/main.tsx b/src/main.tsx
@@ -9,10 +9,7 @@ import GlobalStyle from "./styles/GlobalStyle/GlobalStyle";
 import theme from "./styles/theme/theme";
 import appRouter from "./routers/appRouter/appRouter";
 import "react-toastify/dist/ReactToastify.min.css";
-import "@fontsource/sora/300.css";
-import "@fontsource/sora/400.css";
-import "@fontsource/sora/600.css";
-import "@fontsource/sora/700.css";
+import "./fonts";
 import Loading from "./components/Loading/Loading";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(

diff --git a/src/mocks/contacts/contactsStateMocks.ts b/src/mocks/contacts/contactsStateMocks.ts
@@ -1,12 +1,11 @@
-import { emptySelectedContact } from "../../constants";
 import { contactsMock } from "../../factories/contacts/contactsFactory";
-import { ContactsStateStructure } from "../../types";
+import { ContactStructure, ContactsStateStructure } from "../../types";
 
 export const emptyContactsStateMock: ContactsStateStructure = {
   contactsData: [],
   limit: 10,
   totalCount: 0,
-  selectedContact: emptySelectedContact,
+  selectedContact: {} as ContactStructure,
 };
 
 export const fullContactsStateMock: ContactsStateStructure = {

diff --git a/src/pages/ContactDetailsPage/ContactDetailsPage.tsx b/src/pages/ContactDetailsPage/ContactDetailsPage.tsx
@@ -24,12 +24,6 @@ import { paths } from "../../constants";
 const ContactDetailsPage = (): React.ReactElement => {
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
-  const selectedContact = useAppSelector(
-    (state) => state.contacts.selectedContact
-  );
-  const isLogged = useAppSelector((state) => state.user.isLogged);
-  const { contactId } = useParams();
-  const { getContact } = useContacts();
   const {
     avatar,
     name,
@@ -39,7 +33,10 @@ const ContactDetailsPage = (): React.ReactElement => {
     address,
     birthday,
     socials,
-  } = selectedContact;
+  } = useAppSelector((state) => state.contacts.selectedContact);
+  const isLogged = useAppSelector((state) => state.user.isLogged);
+  const { contactId } = useParams();
+  const { getContact } = useContacts();
 
   const birthdayDate = new Date(birthday);
 
@@ -54,17 +51,6 @@ const ContactDetailsPage = (): React.ReactElement => {
           dispatch(
             loadSelectedContactActionCreator(contact as ContactStructure)
           );
-
-          const avatar = (contact as ContactStructure).avatar;
-
-          const preloadLink = document.createElement("link");
-          preloadLink.rel = "preload";
-          preloadLink.as = "image";
-          preloadLink.href = avatar;
-
-          const head = document.head;
-          const firstChild = head.firstChild;
-          head.insertBefore(preloadLink, firstChild);
         } else {
           navigate(paths.contacts);
         }
@@ -75,85 +61,89 @@ const ContactDetailsPage = (): React.ReactElement => {
     <ContainerStyled>
       <main>
         <ContactDetailsPageStyled>
-          <article className="contact">
-            <header className="contact__header">
-              <img
-                src={`${avatar}`}
-                alt={`Avatar of ${name} ${surname}`}
-                width={80}
-                height={80}
-                className="contact__avatar"
-              />
-              <h2 className="contact__fullname">{`${name} ${surname}`}</h2>
-              <button
-                className="contact__update-button"
-                aria-label="update contact"
-                onClick={() => navigate("/update-contact")}
-              >
-                <IoPencilSharp />
-              </button>
-            </header>
-            <address>
-              <ul className="contact__details">
-                <li className="contact__detail">
-                  <span className="contact__detail-icon">
-                    <IoCall />
-                  </span>
-                  <a href={`tel:${phoneNumber.mobile}`}>{phoneNumber.mobile}</a>
-                </li>
-                <li className="contact__detail">
-                  <span className="contact__detail-icon">
-                    <IoAtSharp />
-                  </span>
-                  <a href={`mailto:${email}`}>{email}</a>
-                </li>
-                <li className="contact__detail">
-                  <span className="contact__detail-icon">
-                    <IoLocationSharp />
-                  </span>
-                  <span>{address}</span>
-                </li>
-                <li className="contact__detail">
-                  <span className="contact__detail-icon">
-                    <IoGift />
-                  </span>
-                  <time dateTime={birthdayDate.toLocaleString().slice(0, 10)}>
-                    {birthdayDate.toLocaleDateString("en-UK", {
-                      day: "numeric",
-                      month: "long",
-                      year: "numeric",
-                    })}
-                  </time>
-                </li>
-              </ul>
-              <footer className="contact__socials">
-                {socials.twitter && (
-                  <a
-                    href={`https://twitter.com/${socials.twitter}`}
-                    aria-label="twitter profile"
-                  >
-                    <IoLogoTwitter />
-                  </a>
-                )}
-                {socials.linkedin && (
-                  <a
-                    href={`https://linkedin.com/in/${socials.linkedin}`}
-                    aria-label="linkedin profile"
-                  >
-                    <IoLogoLinkedin />
-                  </a>
-                )}
-                {socials.instagram && (
-                  <a
-                    href={`https://instagram.com/${socials.instagram}`}
-                    aria-label="instagram profile"
-                  >
-                    <IoLogoInstagram />
-                  </a>
-                )}
-              </footer>
-            </address>
-          </article>
+          {name && (
+            <article className="contact">
+              <header className="contact__header">
+                <img
+                  src={`${avatar}`}
+                  alt={`Avatar of ${name} ${surname}`}
+                  width={80}
+                  height={80}
+                  className="contact__avatar"
+                />
+                <h2 className="contact__fullname">{`${name} ${surname}`}</h2>
+                <button
+                  className="contact__update-button"
+                  aria-label="update contact"
+                  onClick={() => navigate("/update-contact")}
+                >
+                  <IoPencilSharp />
+                </button>
+              </header>
+              <address>
+                <ul className="contact__details">
+                  <li className="contact__detail">
+                    <span className="contact__detail-icon">
+                      <IoCall />
+                    </span>
+                    <a href={`tel:${phoneNumber.mobile}`}>
+                      {phoneNumber.mobile}
+                    </a>
+                  </li>
+                  <li className="contact__detail">
+                    <span className="contact__detail-icon">
+                      <IoAtSharp />
+                    </span>
+                    <a href={`mailto:${email}`}>{email}</a>
+                  </li>
+                  <li className="contact__detail">
+                    <span className="contact__detail-icon">
+                      <IoLocationSharp />
+                    </span>
+                    <span>{address}</span>
+                  </li>
+                  <li className="contact__detail">
+                    <span className="contact__detail-icon">
+                      <IoGift />
+                    </span>
+                    <time dateTime={birthdayDate.toLocaleString().slice(0, 10)}>
+                      {birthdayDate.toLocaleDateString("en-UK", {
+                        day: "numeric",
+                        month: "long",
+                        year: "numeric",
+                      })}
+                    </time>
+                  </li>
+                </ul>
+                <footer className="contact__socials">
+                  {socials.twitter && (
+                    <a
+                      href={`https://twitter.com/${socials.twitter}`}
+                      aria-label="twitter profile"
+                    >
+                      <IoLogoTwitter />
+                    </a>
+                  )}
+                  {socials.linkedin && (
+                    <a
+                      href={`https://linkedin.com/in/${socials.linkedin}`}
+                      aria-label="linkedin profile"
+                    >
+                      <IoLogoLinkedin />
+                    </a>
+                  )}
+                  {socials.instagram && (
+                    <a
+                      href={`https://instagram.com/${socials.instagram}`}
+                      aria-label="instagram profile"
+                    >
+                      <IoLogoInstagram />
+                    </a>
+                  )}
+                </footer>
+              </address>
+            </article>
+          )}
         </ContactDetailsPageStyled>
       </main>
     </ContainerStyled>

diff --git a/src/pages/ContactsPage/ContactsPage.tsx b/src/pages/ContactsPage/ContactsPage.tsx
@@ -7,16 +7,15 @@ import {
   clearLimitActionCreator,
   loadContactsActionCreator,
   loadMoreContactsActionCreator,
-  loadSelectedContactActionCreator,
   resetLimitActionCreator,
+  resetSelectedContactActionCreator,
 } from "../../store/contacts/contactsSlice";
 import Loading from "../../components/Loading/Loading";
 import SearchBar from "../../components/SearchBar/SearchBar";
 import NoContactsFound from "../../components/NoContactsFound/NoContactsFound";
 import LoadMore from "../../components/LoadMore/LoadMore";
 import ContactsPageStyled from "./ContactsPageStyled";
 import _debounce from "debounce";
-import { emptySelectedContact } from "../../constants";
 
 const ContactsPage = (): React.ReactElement => {
   const contacts = useAppSelector((state) => state.contacts.contactsData);
@@ -30,7 +29,7 @@ const ContactsPage = (): React.ReactElement => {
   const { getContacts, searchContacts } = useContacts();
 
   useEffect(() => {
-    dispatch(loadSelectedContactActionCreator(emptySelectedContact));
+    dispatch(resetSelectedContactActionCreator());
   });
 
   useEffect(() => {

diff --git a/src/pages/UpdateContactPage/UpdateContactPage.tsx b/src/pages/UpdateContactPage/UpdateContactPage.tsx
@@ -8,15 +8,15 @@ import { ContactStructure } from "../../types";
 import AddContactPageStyled from "../shared/FormPageStyled";
 
 const UpdateContactPage = (): React.ReactElement => {
-  const contact = useAppSelector(
+  const selectedContact = useAppSelector(
     (state) => state.contacts.selectedContact
   ) as ContactStructure;
   const { updateContact } = useContacts();
   const navigate = useNavigate();
 
-  const formContact = {
-    ...contact,
-    birthday: contact?.birthday.slice(0, 10),
+  const formContact: ContactStructure = {
+    ...selectedContact,
+    birthday: selectedContact?.birthday.slice(0, 10),
   };
 
   const handleFormSubmit = async (contactData: Partial<ContactStructure>) => {
@@ -38,7 +38,7 @@ const UpdateContactPage = (): React.ReactElement => {
         <ContainerStyled>
           <ContactForm
             buttonText="Update"
-            contact={formContact as ContactStructure}
+            contact={formContact}
             onFormSubmit={handleFormSubmit}
           />
         </ContainerStyled>