Conflicts & Smells resolved

src/App.css

@@ -81,4 +81,8 @@ background-image: none;
 .card-body {
   padding: 0px;
   text-align: left;
+}
+
+.faqs-shadow{
+  box-shadow: 0px 5px 20px 4px lightgrey;
 }

src/components/Collaborators.tsx

@@ -7,9 +7,9 @@ function Collaborators() {
   // Aconsejo quitarlo, debajo está el resultado solo con el useState de arriba const [selectedItem, setSelectedItem] = useState(1);
   const VT = "Ver Todos >";
   const btnActive =
-    " px-6 lg:mb-0 mb-5 ml-2 btn btn-ghost text-sm normal-case rounded-3xl bg-[#025E7E] text-white  ";
+    " px-6 lg:mb-0 mb-5 ml-2 btn btn-ghost text-sm normal-case rounded-3xl bg-pink-it text-white  ";
   const btnInactive =
-    "px-6 lg:mb-0 mb-5 ml-2 btn btn-ghost text-sm normal-case rounded-3xl active:bg-[#025E7E] active:text-white border-solid lg:border-transparent border-2 border-indigo-900 min-w-10  ";
+    "px-6 lg:mb-0 mb-5 ml-2 btn btn-ghost text-sm normal-case rounded-3xl active:bg-pink-it active:text-white border-solid lg:border-transparent border-2 border-indigo-900 min-w-10  ";
 
   return (
     <section className="my-10  ">
@@ -27,48 +27,33 @@ function Collaborators() {
                 setActive("AngularCard");
               }}
             >
-              Angular
+
+              Wiki
             </a>
             <a
               className={active === "ReactCard" ? btnActive : btnInactive}
               onClick={() => {
                 setActive("ReactCard");
               }}
             >
-              React
+              Challenges
             </a>
             <a
               className={active === "PHPCard" ? btnActive : btnInactive}
               onClick={() => {
                 setActive("PHPCard");
               }}
             >
-              PHP
+              Landing
             </a>
             <a
               className={active === "NodeCard" ? btnActive : btnInactive}
               onClick={() => {
                 setActive("NodeCard");
               }}
             >
-              Node
-            </a>
-            <a
-              className={active === "JavaCard" ? btnActive : btnInactive}
-              onClick={() => {
-                setActive("JavaCard");
-              }}
-            >
-              Java
-            </a>
-            <a
-              className={active === "DataScienceCard" ? btnActive : btnInactive}
-              onClick={() => {
-                setActive("DataScienceCard");
-              }}
-            >
-              Data Science
-            </a>
+              Profile
+            </a> 
           </div>
         </div>
       </div>

src/components/CollaboratorsCard.tsx

@@ -1,9 +1,49 @@
+import { useDispatch, useSelector, } from "react-redux";
+import { getCollaboratorsData } from "../store/reducers/CollaboratorsCall/getCollaboratorsData";
+import { useEffect,useState } from "react";
+import CollaboratorsCardIndividual from "./CollaboratorsCardIndividual";
+import { RootState } from "../store/store";
 const CollaboratorsCard = ({title}: {title: string}) => {
+//variables del componente
+
+const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+//Variables Redux//
+ const dispatch =  useDispatch();
+
+ const {collaborators, maxWidth} = useSelector((state:RootState)=> state.getCollaboratorsFunctionality);
+
+//Inicialization of the api//
+   useEffect(()=>{
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    dispatch(getCollaboratorsData() as any);
+    const handleResize = () => {
+        setWindowWidth(window.innerWidth);
+      };
+
+    window.addEventListener('resize', handleResize);
+
+   },[dispatch]);
+
+//collaborators function
+
+const collaboratorsDataSlice =()=>{
+
+    //Colocar el 750 centralizado en redux en una variable//
+    if(windowWidth>maxWidth && title !='modal'){
+        return collaborators.slice(0,15)
+    }else if(windowWidth<maxWidth && title !='modal'){
+        return collaborators.slice(0,4)
+    }
+        return collaborators;
+}
     return (
-        <div className="card">
-            <p>{title}</p>
-        </div>
+    <div className="grid grid-cols-1 gap-y-5 md:w-11/12 m-auto md:grid-cols-3 lg:grid-cols-3">
+
+         <CollaboratorsCardIndividual collaboratorsDataSlice={collaboratorsDataSlice}/>  
+    </div>
     )
 }
 
+
 export default CollaboratorsCard;

src/components/CollaboratorsCardIndividual.tsx

@@ -0,0 +1,20 @@
+import { collaborator } from "../interfaces/interfaces";
+
+interface CollaboratorsCardIndividualProps {
+  collaboratorsDataSlice: () => collaborator[];
+}
+export  const CollaboratorsCardIndividual: React.FC<CollaboratorsCardIndividualProps> = ({ collaboratorsDataSlice }) => {  return (
+    <>
+
+            {
+                collaboratorsDataSlice().map((a:collaborator, index:number)=>{
+
+                    {/**Colocar en un componente card */}
+                    return  <div className="w-2/3 m-auto"   key={index} > <a  className="flex items-center justify-center "href={a.url} target="_blank"  >  <img className="w-32 md:w-20 rounded-full" src={a.photo} alt={a.name+ ' photo'} /> <p className="ms-5  w-full text-start">{a.name}</p> </a> </div>
+                })
+            }
+    </>
+  )
+}
+
+export default CollaboratorsCardIndividual;

src/components/CollaboratorsModal.tsx

@@ -1,4 +1,7 @@
+import CollaboratorsCard from "./CollaboratorsCard";
+
 function CollaboratorsModal() {
+
   return (
     <>
       <input type="checkbox" id="CollaboratorsModal" className="modal-toggle" />
@@ -10,21 +13,8 @@ function CollaboratorsModal() {
           >
             ✕
           </label>
-          <h3 className="font-bold text-lg">Collaborators</h3>
-          <p className="py-4">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur
-            quidem excepturi nemo tempore architecto laudantium quos atque?
-            Impedit quibusdam, similique veniam consequuntur iste repudiandae,
-            voluptatum eaque, officia enim quos voluptatem!
-          </p>
-          <div className="modal-action flex justify-center">
-            <label
-              htmlFor="CollaboratorsModal"
-              className="btn bg-[#BA007C] hover:bg-[#B91879] hover:bg-opacity-30 active:bg-white active:bg-opacity-30 text-white"
-            >
-              Entendido
-            </label>
-          </div>
+          <h3 className="font-bold text-lg mb-5 py-5">Collaboradores wiki</h3>
+            <CollaboratorsCard title ='modal'/>
         </div>
       </div>
     </>

src/components/LoginComponent.tsx

@@ -9,7 +9,7 @@ import {
   ChildComponentProps,
   RootState,
   ApiPostRegisterState,
-  FormDataEvent
+  FormDataEvent,
 } from "../interfaces/interfaces";
 
 export default function LoginComponent({
@@ -22,7 +22,7 @@ export default function LoginComponent({
   const { messageError, isLoadingMessageError }: ApiPostRegisterState =
     useSelector((state: RootState) => state.apiPostRegister);
 
-  const submitInformation = (e:FormDataEvent ) => {
+  const submitInformation = (e: FormDataEvent) => {
     handleSubmit(dispatch, e, 2, navegador);
   };
 
@@ -67,18 +67,15 @@ export default function LoginComponent({
                 type="submit"
                 className="mt-5 btn btn-block bg-pink-it text-white"
               >
-                Login
+                {/* Icono de carga */}
+                {!isLoadingMessageError ? (
+                  <p className="mt-0">{messageError}</p>
+                ) : (
+                  <span className="loading loading-spinner loading-md"></span>
+                )}
+                {!isLoadingMessageError && <p>Login</p>}
               </button>
             </form>
-
-            {/* Icono de carga */}
-            {!isLoadingMessageError ? (
-              <p className="mt-0">{messageError}</p>
-            ) : (
-              <div className="flex justify-center">
-                <span className=" loading loading-spinner loading-lg "></span>
-              </div>
-            )}
             <a className="text-xs mt-5 ">
               <span
                 onClick={() => {

src/components/apps/Apps.tsx

@@ -2,10 +2,9 @@ import { RootState } from "../../store/store";
 import { createToken, ApiStateApps } from "../../interfaces/interfaces";
 import { FaArrowRight } from "react-icons/fa";
 import { useEffect, useState } from "react";
-import { apiCallApps, apiCallAppsInfo } from "../../store/reducers/appsCall/appsCallApiFunctionality";
+import { apiCallApps, apiCallAppsInfo, deleteApiApps } from "../../store/reducers/appsCall/appsCallApiFunctionality";
 import { useDispatch, useSelector } from "react-redux";
 import ModalApps from "./appsAdminView/modalApps";
-import { deleteApiApps } from "../../store/reducers/appsCall/appsCallApiFunctionality";
 import trashIcon from "../../assets/img/icon-delete-faq-backoffice.png"
 import githubLogo from "../../assets/img/githubLogo.svg"
 
@@ -49,6 +48,7 @@ const Apps = () => {
         {apps.map((app) => {
             return (
               <div
+                key={app.id}
                 className={`cards ${
                   app.state === "COMPLETED" && "bg-completed"
                 } 

src/components/faqs/FAQsComponent.tsx

@@ -133,7 +133,7 @@ const FAQs = () => {
         )}
 
         {faqsClone.map((faq:Faq, index:number) => (
-          <div className={`collapse rounded-md mb-5 shadow-xl`} key={index}>
+          <div className={`collapse rounded-md mb-5 shadow-xl`} key={faq.id}>
 
             <input type="checkbox" className="peer" id={index.toString()}/>
             <div className="collapse-title relative lg:flex rounded-b-md bg-white text-justify text-black text-4 font-poppins font-bold font-poppins peer-checked:bg-[#BA007C] peer-checked:rounded-b-[0px] peer-checked:text-secondary-content">

src/interfaces/interfaces.tsx

@@ -56,4 +56,10 @@ export interface faqContent{
 
    export interface FormDataEvent extends React.FormEvent<HTMLFormElement> {
       target: HTMLFormElement;
-    }
+    }
+
+    export interface collaborator {
+      name:string,
+      url:string
+      photo:string
+   }

src/pages/LandingPage.tsx

@@ -6,6 +6,7 @@ import Collaborators from "../components/Collaborators";
 import FAQs from "../components/faqs/FAQsComponent";
 
 function LandingPage() {
+
   return (
     <>
 

src/store/reducers/CollaboratorsCall/getCollaboratorsData.tsx

@@ -0,0 +1,19 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+
+export const getCollaboratorsData = createAsyncThunk(
+    'getinitialdataCollaborators',
+    async () => {
+        try {
+            const { data } = await axios.get('http://87.106.229.119/api/collaborators/landing');
+
+                               const dataTotal = data.sort(() => Math.random() - 0.5);
+                               return dataTotal;
+
+
+
+        } catch (error) {
+            console.log(error);
+        }
+    }
+);

src/store/reducers/CollaboratorsCall/getCollaboratorsFunctionality.tsx

@@ -0,0 +1,31 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { getCollaboratorsData } from './getCollaboratorsData'
+
+const initialState =  {
+
+  collaborators:[],
+  maxWidth:750
+
+} 
+export const apiSlice = createSlice({
+  name: 'CollaboratorsCard',
+  initialState,
+  reducers: {
+
+  },extraReducers:(builder)=>{
+
+    builder.addCase(getCollaboratorsData.fulfilled,(state,action)=>{
+      state.collaborators = action.payload;
+
+  })
+  }
+})
+
+//export const {} = apiSlice.actions;
+
+
+
+
+
+
+export default apiSlice.reducer

src/store/reducers/faqsCall/faqsReducer.tsx

@@ -72,7 +72,7 @@ export const { setFaqs } = apiSlice.actions;
 
 
   //Put //
-  export const putApiFaqs =async(faqId:number, faqContent:any, acces_token:String, dispatch:any)=>{
+  export const putApiFaqs =async(faqId:number, faqContent:any, acces_token:string, dispatch:any)=>{
     try{
       await axios.put(`http://87.106.229.119/api/faqs/${faqId}`,faqContent,{
         headers:{

src/store/store.tsx

@@ -3,11 +3,13 @@ import { configureStore } from '@reduxjs/toolkit'
  import apiPostRegister from './reducers/apiCall/apiPostRegisterLogin'
  import faqsReducer from './reducers/faqsCall/faqsReducer'
 import appsCallApiFunctionality from './reducers/appsCall/appsCallApiFunctionality'
+import getCollaboratorsFunctionality from './reducers/CollaboratorsCall/getCollaboratorsFunctionality'
 export const store = configureStore({
   reducer: {
     apiPostRegister: apiPostRegister,
     faqsReducer:faqsReducer,
-    appsCallApiFunctionality:appsCallApiFunctionality
+    appsCallApiFunctionality:appsCallApiFunctionality,
+    getCollaboratorsFunctionality:getCollaboratorsFunctionality
   },
 })