Development (#8)

* feat: adicionando 'search-ip' ao projeto.

* feat: adicionando a variavel 'requestQuery'.

* feat: Adding a new link to capture the flags of the countries.

* feat: Adding the 'requestDomainAndIp' variable and passing it as a parameter to the 'serviceIpApi' function.

* feat: adding app.tsx

* feat: adding types to SearchMap

* feat: modifying types of the Data interface.

* feat: adding a Footer to the project.

* feat: adding style to the Footer.

* style: adding z-index to the 'HeaderComponent'

* feat: capitalizing the first letter of 'world connection'.

* fix: removing the 'SearchMap' file and adding 'index.tsx'.

* style: main style

* feat: adding Footer

* fix: removing the 'SearchMap' file and adding 'index.tsx'.

src/App.tsx

@@ -5,7 +5,6 @@ import { GlobalStyle } from "./styles/global";
 import theme from "./styles/theme";
 import Home from "./screens/Home";
 
-
 const App = () => {
   return (
     <IpSearchProvider>

src/components/CardResult/index.tsx

@@ -9,7 +9,7 @@ const CardResult = ({ title, phrase, flag }: CardType) => {
         {!flag ? (
           <></>
         ) : (
-          <S.FlagImage src={`https://countryflagsapi.com/svg/${flag}`} />
+          <S.FlagImage src={`https://flagsapi.com/${flag}/flat/64.png`} />
         )}
         <S.CardPhrase>
           {!phrase || phrase == undefined + "-" + undefined || undefined

src/components/SearchMap/index.tsx

@@ -0,0 +1,42 @@
+import { SearchMapProps, ViewPort } from "../../types"; 
+import { useState, useEffect } from "react";
+import Map from "react-map-gl";
+
+export const SearchMap = ({ longitude, latitude }: SearchMapProps) => {
+  const [viewPort, setViewPort] = useState<ViewPort>({
+    attributionControl: false,
+    longitude: longitude,
+    latitude: latitude,
+    zoom: 5,
+  });
+
+  const [screenWidth, setScreenWidth] = useState<number>();
+
+  useEffect(() => {
+    setScreenWidth(() => {
+      let width = window.innerWidth;
+      const getWidth = width >= 768 ? 1280 : 420;
+
+      return getWidth;
+    })
+  });
+
+  useEffect(() => {
+    setViewPort({
+      attributionControl: false,
+      longitude: longitude,
+      latitude: latitude,
+      zoom: viewPort.zoom,
+    });
+  }, [longitude, latitude]);
+
+  return (
+      <Map
+        mapLib={import("mapbox-gl")}
+        initialViewState={{ ...viewPort }}
+        style={{ width: screenWidth, height: 420}}
+        mapStyle="mapbox://styles/mapbox/streets-v10"
+        mapboxAccessToken={import.meta.env.VITE_MAPBOX_TOKEN} />
+  );
+};
+

src/contexts/ip-search.tsx

@@ -7,6 +7,7 @@ import {
 } from "react";
 import serviceIpApi from "../services/service-ip-api";
 import { Data, ipSearchType } from "../types";
+import searchIp from "../services/search-ip";
 
 export const IpSearchContext = createContext({} as ipSearchType);
 
@@ -15,8 +16,9 @@ export const IpSearchProvider = ({ children }: PropsWithChildren) => {
   const [search, setSearch] = useState("");
 
   const settingIpApi = async () => {
-    const getServiceIpApi = await serviceIpApi(search);
-    console.log("olá");
+    const query = await searchIp();
+    const requestDomainAndIp = search || query;
+    const getServiceIpApi = await serviceIpApi(requestDomainAndIp);
     setData({
       continent: getServiceIpApi.continent,
       flag: getServiceIpApi.countryCode,
@@ -46,4 +48,4 @@ export const IpSearchProvider = ({ children }: PropsWithChildren) => {
       {children}
     </IpSearchContext.Provider>
   );
-};
+};

src/screens/Home/index.tsx

@@ -1,13 +1,15 @@
 import Header from '../../templates/Header';
 import Hero from '../../templates/Hero';
 import Main from '../../templates/Main';
+import Footer from '../../templates/Footer';
 
 const Home = () => {
   return (
     <>
       <Header />
       <Hero />
       <Main />
+      <Footer />
     </>
   );
 }

src/services/search-ip.ts

@@ -1,8 +1,8 @@
-async function searchIp() {
+async function searchIp(): Promise<string | undefined>{
   try{
     const response = await fetch('https://my-ip-address.bohr.io/api');
     const data = await response.json();
-    return data.query;
+    return data.query as string;
   } catch(error) {
     console.error(error);
   }

src/services/service-ip-api.ts

@@ -1,5 +1,9 @@
-async function serviceIpApi(query?: string) {
-  const urlRequest = "https://jolly-leaf-26e7.gustavonstn.workers.dev/json/"+query+"?lang=pt-BR&fields=1061087"
+import searchIp from "./search-ip";
+
+async function serviceIpApi(query?: string | number) {
+  const requestQuery = !query ? searchIp() : query;
+
+  const urlRequest = "https://jolly-leaf-26e7.gustavonstn.workers.dev/json/"+requestQuery+"?lang=pt-BR&fields=1061087"
 
   try {
     const response = await fetch(urlRequest);

src/templates/Footer/index.tsx

@@ -0,0 +1,28 @@
+import Logo from "../../assets/images/Logo.svg";
+import BohrLogo from  "../../assets/images/bohr.svg";
+import GithubLogo from "../../assets/images/github.svg";
+
+import * as S from "./style"
+
+const Footer = () => {
+  return (
+    <S.FooterComponent>
+      <S.FooterTopComponent>
+        <img src={Logo} alt="Logo do Ipcats" />
+        <S.IconsComponent>
+          <S.Links>
+            <S.Icons src={ BohrLogo } alt="logo do bohr.io"/>
+          </S.Links>
+          <S.Links>
+            <S.Icons src={ GithubLogo } alt="logo do Github" />
+          </S.Links>
+        </S.IconsComponent>
+      </S.FooterTopComponent>
+      <S.FooterBottomComponent>
+        <p>Direitos Reservados</p>
+      </S.FooterBottomComponent>
+    </S.FooterComponent>
+  )
+}
+
+export default Footer

src/templates/Footer/style.ts

@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+export const FooterComponent = styled.footer`
+  align-items: center;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+`;
+
+export const FooterTopComponent = styled.div`
+  border-bottom: 1px #6B6B6B solid;
+  justify-content: space-between;
+  padding-bottom: 0.5rem;
+  padding: 0rem 0.5rem;
+  display: flex;
+`;
+
+export const IconsComponent = styled.div`
+  display: flex;
+  gap: 1rem;
+`;
+
+export const Links = styled.a`
+  text-decoration: none;
+`;
+
+export const Icons = styled.img`
+  width: 2.6875rem;
+  height: 2.625rem;
+`
+
+export const FooterBottomComponent = styled.div`
+  padding-top: 0.5rem;
+  text-align: center;
+  color: #FFFFFF;
+`;

src/templates/Header/style.ts

@@ -8,6 +8,7 @@ export const HeaderComponent = styled.header`
     
     position: fixed;
     width: 100%;
+    z-index: 1;
     top: 0px;
   `};
 `;

src/templates/Hero/index.tsx

@@ -1,4 +1,4 @@
-import worldConnection from '../../assets/images/worldconnection.svg';
+import WorldConnection from '../../assets/images/worldconnection.svg';
 
 import { Container } from '../../styles/global';
 import * as S from './style';
@@ -13,7 +13,7 @@ const Hero = () => {
             <S.HeroPhrase>Consiga informações de Ips e dominios de um forma simples e eficiente sem demandar tempo e sim de uma forma rápida de conseguir informaçòes, sem problemas para ter o que você quer.</S.HeroPhrase>
           </S.HeroTextContainer>
           <S.HeroImageContainer>
-            <S.Image src={worldConnection} alt="Avião viajando em um mundo conectado." />
+            <S.Image src={WorldConnection} alt="Avião viajando em um mundo conectado." />
           </S.HeroImageContainer>
         </S.HeroContainer>
       </Container>

src/templates/Main/index.tsx

@@ -1,30 +1,29 @@
-import { useEffect } from "react";
 import CardResult from "../../components/CardResult";
 import Search from "../../components/Search";
 
-import useSearch from "../../hooks/use-search";
+import { SearchMap } from "../../components/SearchMap";
 import { Container } from "../../styles/global";
+import useSearch from "../../hooks/use-search";
 import * as S from "./style";
 
 const Main = () => {
   const { data } = useSearch();
 
-  useEffect(() => {
-    console.log("Dados:", data);
-  }, [data]);
-
   return ( 
     <S.MainComponent>
       <Container>
-        <S.MainContainer>
           <S.Phrase>DIGITE O IP/DOMINIO DESEJADO:</S.Phrase>
           <Search />
+        <S.MainContainer>
           <S.ResultComponent>
             <CardResult title="Cidade, Estado:" phrase={data.city+'-'+data.state} />
             <CardResult title="Ip ou dominio:" phrase={data.reverse || data.query} />
             <CardResult title="Continente:" phrase={data.continent} />
             <CardResult title="País:" flag={data.flag} phrase={data.country} />
           </S.ResultComponent>
+          <S.ContainerSearchMap>
+            <SearchMap longitude={data.lon} latitude={data.lat}/>
+          </S.ContainerSearchMap>
         </S.MainContainer>
       </Container>
     </S.MainComponent>

src/templates/Main/style.ts

@@ -31,4 +31,15 @@ export const ResultComponent = styled.div`
     padding: 0rem 2rem;
     display: block;
   }
-`
+`;
+
+export const ContainerSearchMap = styled.div`
+  justify-content: center;
+  margin-top: 2rem;
+  display: flex;
+  height: 420px;
+
+  @media (max-width: 920px) {
+    width: 100%;
+  }
+`;

src/types/components.ts

@@ -2,4 +2,16 @@ export interface CardType {
   phrase?: string | null;
   title?: string | null;
   flag?: string | null;
+}
+
+export interface SearchMapProps {
+  longitude: number | undefined;
+  latitude: number | undefined;
+}
+
+export interface ViewPort {
+  attributionControl: boolean;
+  longitude: number | undefined;
+  latitude: number | undefined;
+  zoom: number;
 }

src/types/user.ts

@@ -1,15 +1,15 @@
 import { FormEventHandler, ChangeEvent } from "react"
 
 export interface Data {
-  continent: string | null
-  country: string | null
-  reverse: string | null
-  state: string | null
-  query: string | null
-  city: string | null
-  flag: string | null
-  lat: string | null
-  lon: string | null
+  continent: string | undefined
+  country: string | undefined
+  reverse: string | undefined
+  state: string | undefined
+  query: string | undefined
+  city: string | undefined
+  flag: string | undefined
+  lat: number | undefined
+  lon: number | undefined
 }
 export interface ipSearchType {
   handleText: (event: ChangeEvent<HTMLInputElement>) => void