diff --git a/src/App.css b/src/App.css index 7a58766..e234f34 100644 --- a/src/App.css +++ b/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; } \ No newline at end of file diff --git a/src/assets/img/gitLogo.svg b/src/assets/img/gitLogo.svg new file mode 100644 index 0000000..d93c367 --- /dev/null +++ b/src/assets/img/gitLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Collaborators.tsx b/src/components/Collaborators.tsx index 9a5c693..f51ba9f 100644 --- a/src/components/Collaborators.tsx +++ b/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 (
@@ -27,7 +27,8 @@ function Collaborators() { setActive("AngularCard"); }} > - Angular + + Wiki - React + Challenges - PHP + Landing - Node - - { - setActive("JavaCard"); - }} - > - Java - - { - setActive("DataScienceCard"); - }} - > - Data Science - + Profile + diff --git a/src/components/CollaboratorsCard.tsx b/src/components/CollaboratorsCard.tsx index a0123b6..fff8edd 100644 --- a/src/components/CollaboratorsCard.tsx +++ b/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 -

{title}

- +
+ + +
) } + export default CollaboratorsCard; \ No newline at end of file diff --git a/src/components/CollaboratorsCardIndividual.tsx b/src/components/CollaboratorsCardIndividual.tsx new file mode 100644 index 0000000..c1da407 --- /dev/null +++ b/src/components/CollaboratorsCardIndividual.tsx @@ -0,0 +1,20 @@ +import { collaborator } from "../interfaces/interfaces"; + +interface CollaboratorsCardIndividualProps { + collaboratorsDataSlice: () => collaborator[]; +} +export const CollaboratorsCardIndividual: React.FC = ({ collaboratorsDataSlice }) => { return ( + <> + + { + collaboratorsDataSlice().map((a:collaborator, index:number)=>{ + + {/**Colocar en un componente card */} + return
{a.name+

{a.name}
+ }) + } + + ) +} + +export default CollaboratorsCardIndividual; \ No newline at end of file diff --git a/src/components/CollaboratorsModal.tsx b/src/components/CollaboratorsModal.tsx index 432a467..370e5f8 100644 --- a/src/components/CollaboratorsModal.tsx +++ b/src/components/CollaboratorsModal.tsx @@ -1,4 +1,7 @@ +import CollaboratorsCard from "./CollaboratorsCard"; + function CollaboratorsModal() { + return ( <> @@ -10,21 +13,8 @@ function CollaboratorsModal() { > ✕ -

Collaborators

-

- 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! -

-
- -
+

Collaboradores wiki

+ diff --git a/src/components/LoginComponent.tsx b/src/components/LoginComponent.tsx index 33967cf..bc70199 100644 --- a/src/components/LoginComponent.tsx +++ b/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 ? ( +

{messageError}

+ ) : ( + + )} + {!isLoadingMessageError &&

Login

} - - {/* Icono de carga */} - {!isLoadingMessageError ? ( -

{messageError}

- ) : ( -
- -
- )} { diff --git a/src/components/apps/Apps.tsx b/src/components/apps/Apps.tsx index 94a58fa..4647cfc 100644 --- a/src/components/apps/Apps.tsx +++ b/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 (
{ )} {faqsClone.map((faq:Faq, index:number) => ( -
+
diff --git a/src/interfaces/interfaces.tsx b/src/interfaces/interfaces.tsx index 2410b38..783b502 100644 --- a/src/interfaces/interfaces.tsx +++ b/src/interfaces/interfaces.tsx @@ -56,4 +56,10 @@ export interface faqContent{ export interface FormDataEvent extends React.FormEvent { target: HTMLFormElement; - } \ No newline at end of file + } + + export interface collaborator { + name:string, + url:string + photo:string + } \ No newline at end of file diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx index 7ce5bf8..40f3c84 100644 --- a/src/pages/LandingPage.tsx +++ b/src/pages/LandingPage.tsx @@ -6,6 +6,7 @@ import Collaborators from "../components/Collaborators"; import FAQs from "../components/faqs/FAQsComponent"; function LandingPage() { + return ( <> diff --git a/src/store/reducers/CollaboratorsCall/getCollaboratorsData.tsx b/src/store/reducers/CollaboratorsCall/getCollaboratorsData.tsx new file mode 100644 index 0000000..3167eb7 --- /dev/null +++ b/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); + } + } +); \ No newline at end of file diff --git a/src/store/reducers/CollaboratorsCall/getCollaboratorsFunctionality.tsx b/src/store/reducers/CollaboratorsCall/getCollaboratorsFunctionality.tsx new file mode 100644 index 0000000..b7cac1f --- /dev/null +++ b/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 \ No newline at end of file diff --git a/src/store/reducers/faqsCall/faqsReducer.tsx b/src/store/reducers/faqsCall/faqsReducer.tsx index 5a4de6d..d1a5289 100644 --- a/src/store/reducers/faqsCall/faqsReducer.tsx +++ b/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:{ diff --git a/src/store/store.tsx b/src/store/store.tsx index 3cacb0f..5a0650d 100644 --- a/src/store/store.tsx +++ b/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 }, })