feat: update frontend

TeamMrWeb · Oct 11, 2022 · 4f6a5b5 · 4f6a5b5
1 parent 014ab49
commit 4f6a5b5
Show file tree

Hide file tree

Showing 121 changed files with 4,351 additions and 0 deletions.
diff --git a/frontend/README.md b/frontend/README.md
@@ -0,0 +1,44 @@
+# Parches Front-end 🌌
+
+Esta rama contiene la página web de Parches Chat
+
+## Tecnologías usadas 💫
+[![React](https://img.shields.io/badge/-React-blue?style=for-the-badge&logo=React)](https://es.reactjs.org/)
+[![Redux](https://img.shields.io/badge/-Redux-764ABC?style=for-the-badge&logo=Redux)](https://es.redux.js.org/)
+[![TypeScript](https://img.shields.io/badge/-TypeScript-white?style=for-the-badge&logo=Typescript)](https://www.typescriptlang.org/)
+[![Javascript](https://img.shields.io/badge/-Javascript-critical?style=for-the-badge&logo=Javascript)](https://developer.mozilla.org/es/docs/Web/JavaScript)
+[![SASS](https://img.shields.io/badge/-sass-white?style=for-the-badge&logo=sass)](https://sass-lang.com/)
+[![GraphQL](https://img.shields.io/badge/-GraphQL-E10098?style=for-the-badge&logo=Graphql)](https://graphql.org/)
+[![Apollo Client](https://img.shields.io/badge/-Apollo%20Client-311C87?style=for-the-badge&logo=Apollo%20GraphQL)](https://www.apollographql.com/docs/react/)
+
+
+## Instalación ⚒
+Clonar, cambiar de rama e instalar
+```bash
+git clone https://github.com/TeamParches/parches-chat.git
+cd parches-chat
+git checkout frontend
+npm i
+```
+Para ejecutar la aplicación
+```bash
+npm run dev
+```
+
+> ***Aviso:*** Se necesita clonar y ejecutar el servidor de la rama backend para utilizar esta página correctamente. [Ir a la rama backend](https://github.com/TeamParches/parches-chat/tree/backend)
+
+## Despliegue 🚀
+Puedes utilizar esta página sin necesidad de instalar nada. Has click [aquí](https://parches-chat.vercel.app/) para ir al despliegue.
+
+## Usuarios de prueba 🚻
+Si no quieres crear una cuenta o agregar a amigos, simplemente utiliza alguno de estos usuarios de prueba.
+<br/>
+
+- `Usuario1:`
+
+      Email: [email protected]
+      Password: exampleuser123
+- `Usuario2:`
+
+      Email: [email protected]
+      Password: exampleuser123
diff --git a/frontend/index.html b/frontend/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/icons/parches-chat-icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Parches Chat</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+  <script>
+    window.global = window
+  </script>
+</html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "vite-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "start": "npm i && npm run build"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.6.9",
+    "@reduxjs/toolkit": "^1.8.5",
+    "emoji-picker-react": "^3.6.1",
+    "graphql": "^16.6.0",
+    "graphql-ws": "^5.11.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-infinite-scroll-component": "^6.1.0",
+    "react-loader-spinner": "^5.3.4",
+    "react-redux": "^8.0.2",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.8.3",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^2.0.1",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.7"
+  }
+}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -0,0 +1,42 @@
+import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"
+import { useSelector } from "react-redux"
+import { ShowChatProvider } from "./contexts/ShowChatContext"
+import VerifyAccount from "./components/VerifyAccount/VerifyAccount"
+import AlertMessage from "./components/AlertMessage/AlertMessage"
+import Loader from "./components/Loader/Loader"
+import ChatIndex from "./sections/ChatIndex/ChatIndex"
+import NotFound from "./sections/NotFound/NotFound"
+import Register from "./sections/Register/Register"
+import Login from "./sections/Login/Login"
+import LoaderSpinner from "./components/LoaderSpinner/LoaderSpinner"
+
+function App() {
+  const alertMessage = useSelector((state: any) => state.alertMessage)
+  const loader = useSelector((state: any) => state.loader)
+  const loaderSpinner = useSelector((state: any) => state.loaderSpinner)
+  return (
+    <div className="App">
+      <ShowChatProvider>
+        {alertMessage.visible && <AlertMessage />}
+        {loader.status && <Loader progress={loader.progress} />}
+        {loaderSpinner.status && <LoaderSpinner />}
+        <BrowserRouter>
+          <Routes>
+            <Route path="/accounts/*">
+              <Route path="login" element={<Login />} />
+              <Route path="register" element={<Register />} />
+              <Route path="verify/:token" element={<VerifyAccount />} />
+            </Route>
+            <Route path="/login" element={<Navigate to="/accounts/login" />} />
+            <Route path="/register" element={<Navigate to="/accounts/register" />} />
+            <Route path="/" element={<Navigate to="/accounts/login" />} />
+            <Route path="/chat" element={<ChatIndex />} />
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </ShowChatProvider>
+    </div>
+  )
+}
+
+export default App
diff --git a/frontend/src/apollo/useComunication.ts b/frontend/src/apollo/useComunication.ts
@@ -0,0 +1,41 @@
+import { ApolloClient, ApolloLink, HttpLink, InMemoryCache, split } from "@apollo/client"
+import { GraphQLWsLink } from "@apollo/client/link/subscriptions"
+import { getMainDefinition } from "@apollo/client/utilities"
+import { createClient } from "graphql-ws"
+
+export const useComunication = () => {
+  const httpLink = new HttpLink({
+    uri: import.meta.env.VITE_HTTP_LINK
+  })
+
+  const authLink = new ApolloLink((operation, forward) => {
+    operation.setContext(() => ({
+      headers: {
+        auth: localStorage.getItem("auth")
+      }
+    }))
+    return forward(operation)
+  })
+
+  const wsLink = new GraphQLWsLink(
+    createClient({
+      url: import.meta.env.VITE_WS_LINK
+    })
+  )
+
+  const splitLink = split(
+    ({ query }) => {
+      const definition = getMainDefinition(query)
+      return definition.kind === "OperationDefinition" && definition.operation === "subscription"
+    },
+    wsLink,
+    authLink.concat(httpLink)
+  )
+
+  const client = new ApolloClient({
+    cache: new InMemoryCache(),
+    link: splitLink
+  })
+
+  return { client }
+}
diff --git a/frontend/src/apollo/useFetchingMethod.ts b/frontend/src/apollo/useFetchingMethod.ts
@@ -0,0 +1,28 @@
+import { useDispatch } from "react-redux"
+import { useLazyQuery, useMutation } from "@apollo/client"
+import { createAlertMessage } from "../slicers/alertMessageSlice"
+
+export const useFetchingMethod = (gqlType: any, setState?: any) => {
+  const dispatch = useDispatch()
+  const fetchingMethod = gqlType.definitions[0].operation === "mutation" ? (useMutation as any) : (useLazyQuery as any)
+
+  const [lazyQueryMethod, { ...props }] = fetchingMethod(gqlType, {
+    onCompleted: (data: any) => {
+      if (!setState) return
+      setState.name === "actionCreator" ? dispatch(setState(data)) : setState(data)
+    },
+    onError: (error: any) => {
+      console.log(error)
+      dispatch(
+        createAlertMessage({
+          title: `Ha ocurrido un error inesperado`,
+          description: error.message,
+          type: "error",
+          visible: true
+        })
+      )
+    }
+  })
+
+  return { lazyQueryMethod, ...props }
+}
diff --git a/frontend/src/assets/fonts/Inter-Black.woff2 b/frontend/src/assets/fonts/Inter-Black.woff2
diff --git a/frontend/src/assets/fonts/Inter-Bold.woff2 b/frontend/src/assets/fonts/Inter-Bold.woff2
diff --git a/frontend/src/assets/fonts/Inter-ExtraBold.woff2 b/frontend/src/assets/fonts/Inter-ExtraBold.woff2
diff --git a/frontend/src/assets/fonts/Inter-ExtraLight.woff2 b/frontend/src/assets/fonts/Inter-ExtraLight.woff2
diff --git a/frontend/src/assets/fonts/Inter-Light.woff2 b/frontend/src/assets/fonts/Inter-Light.woff2
diff --git a/frontend/src/assets/fonts/Inter-Medium.woff2 b/frontend/src/assets/fonts/Inter-Medium.woff2
diff --git a/frontend/src/assets/fonts/Inter-Regular.woff2 b/frontend/src/assets/fonts/Inter-Regular.woff2
diff --git a/frontend/src/assets/fonts/Inter-SemiBold.woff2 b/frontend/src/assets/fonts/Inter-SemiBold.woff2
diff --git a/frontend/src/assets/fonts/Inter-Thin.woff2 b/frontend/src/assets/fonts/Inter-Thin.woff2
diff --git a/frontend/src/assets/icons/add-friend-icon.svg b/frontend/src/assets/icons/add-friend-icon.svg
diff --git a/frontend/src/assets/icons/back-icon.svg b/frontend/src/assets/icons/back-icon.svg
diff --git a/frontend/src/assets/icons/close-icon.svg b/frontend/src/assets/icons/close-icon.svg
diff --git a/frontend/src/assets/icons/configuration-icon.svg b/frontend/src/assets/icons/configuration-icon.svg