Skip to content

Commit

Permalink
Merge pull request #138 from IT-Academy-BCN/feature/input-validation-…
Browse files Browse the repository at this point in the history 
…highlight

132-feature-input-validation-highlight
  • Loading branch information
@vicenlu
vicenlu authored Dec 13, 2023
2 parents 56bb8a3 + f8e82e5 commit 0642997
Show file tree
Hide file tree
Showing 8 changed files with 838 additions and 3,342 deletions.
3,724 changes: 560 additions & 3,164 deletions package-lock.json
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"preview": "vite preview"
},
"dependencies": {
"@hookform/resolvers": "^3.3.2",
"@reduxjs/toolkit": "^1.9.5",
"autoprefixer": "^10.4.14",
"axios": "^1.4.0",
Expand All @@ -22,11 +23,13 @@
"react": "^18.2.0",
"react-csv": "^2.2.2",
"react-dom": "^18.2.0",
"react-hook-form": "^7.48.2",
"react-i18next": "^13.5.0",
"react-icons": "^4.8.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.10.0",
"tailwindcss": "^3.3.2"
"tailwindcss": "^3.3.2",
"zod": "^3.22.4"
},
"devDependencies": {
"@types/jquery": "^3.5.16",
Expand Down
160 changes: 92 additions & 68 deletions src/components/apps/Apps.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,91 +2,115 @@ 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, deleteApiApps } 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 trashIcon from "../../assets/img/icon-delete-faq-backoffice.png"
import githubLogo from "../../assets/img/githubLogo.svg"
import trashIcon from "../../assets/img/icon-delete-faq-backoffice.png";
import githubLogo from "../../assets/img/githubLogo.svg";
import { useTranslation } from "react-i18next";


declare global {
interface Window {
my_modal_1: {
showModal: () => void;
}
}
interface Window {
my_modal_1: {
showModal: () => void;
};
}
}

const Apps = () => {
const { acces_token }: createToken = useSelector(
(state: RootState) => state.apiPostRegister
);
const { apps }: ApiStateApps = useSelector(
(state: RootState) => state.appsCallApiFunctionality
);
const [t] = useTranslation();
const handleSendApiInfo = (id: number) => {
apiCallAppsInfo(dispatch, id, acces_token);
};
);

const { apps }: ApiStateApps = useSelector(
(state: RootState) => state.appsCallApiFunctionality
);

const [t] = useTranslation();
const handleSendApiInfo = (id: number) => {
apiCallAppsInfo(dispatch, id, acces_token);
};

const dispatch = useDispatch();
const dispatch = useDispatch();

useEffect(() => {
apiCallApps(dispatch);
}, []);
const [newInfoApps, setNewInfoApps] = useState({
title: "",
description: "",
url: "",
state: "",
github: "",
});
useEffect(() => {
apiCallApps(dispatch);
}, []);

const [newInfoApps, setNewInfoApps] = useState({
title: "",
description: "",
url: "",
state: "",
github: "",
});

return (
<>
{apps.map((app) => {
return (
<div
key={app.id}
className={`cards ${
app.state === "COMPLETED" && "bg-completed"
}
{apps.map((app) => {
return (
<div
key={app.id}
className={`cards ${app.state === "COMPLETED" && "bg-completed"}
${app.state === "SOON" ? "bg-soon" : "bg-building"}
flex flex-col rounded-xl mx-3 my-3 min-h-[309px]`}
>
{/* Botones editar/eliminar superior */}
{window.location.pathname === "/backoffice" && (
<div className="flex gap-2 place-content-end h-11">
<button className="px-4 mt-3 text-sm font-semibold bg-white rounded-lg base-content" onClick={() => {window.my_modal_1?.showModal(); handleSendApiInfo(app.id); }}>{t("backofficePage.appsComponent.editButton.editButtonTitle")}</button>
<a className="flex mt-3 mr-4" onClick={() => deleteApiApps(app.id, acces_token, dispatch)} onKeyDown={(event) => { if (event.key === 'Enter') deleteApiApps(app.id, acces_token, dispatch); }}>
<img src={trashIcon} alt="eliminar" className="w-10" />
</a>
</div>
)}
{window.location.pathname === "/" && (
<a href={app.github} className="flex px-4 py-1 mt-4 place-content-end" target="_blank">
<img src={githubLogo} alt="github_link" />
</a>
)}
<h2 className="text-start mt-0 mb-1 mx-6 text-lg font-bold text-[#1C1C1E]">{app.title}</h2>
<p className="flex-grow text-left ml-6 mr-6 mt-1 mb-3 line-clamp-4 leading-relaxed text-base text-[#7e7e7e] overflow-y-auto pr-4">{app.description}</p>
<a href={app.url} className="flex mb-5 mx-5 my-1 btn text-[#1C1C1E] font-bold bg-white border-none normal-case rounded-lg hover:text-black" target="_blank">
{t("backofficePage.appsComponent.appLink")} <FaArrowRight />
</a>
>
{/* Botones editar/eliminar superior */}
{window.location.pathname === "/backoffice" && (
<div className="flex gap-2 place-content-end h-11">
<button
className="px-4 mt-3 text-sm font-semibold bg-white rounded-lg base-content"
onClick={() => {
window.my_modal_1?.showModal();
handleSendApiInfo(app.id);
}}
>
{t("backofficePage.appsComponent.editButton.editButtonTitle")}
</button>
<a
className="flex mt-3 mr-4"
onClick={() => deleteApiApps(app.id, acces_token, dispatch)}
onKeyDown={(event) => {
if (event.key === "Enter")
deleteApiApps(app.id, acces_token, dispatch);
}}
>
<img src={trashIcon} alt="eliminar" className="w-10" />
</a>
</div>
);
})}
<ModalApps
newInfoApps={newInfoApps}
setNewInfoApps={setNewInfoApps}
/>
)}
{window.location.pathname === "/" && (
<a
href={app.github}
className="flex px-4 py-1 mt-4 place-content-end"
target="_blank"
>
<img src={githubLogo} alt="github_link" />
</a>
)}
<h2 className="text-start mt-0 mb-1 mx-6 text-lg font-bold text-[#1C1C1E]">
{app.title}
</h2>
<p className="flex-grow text-left ml-6 mr-6 mt-1 mb-3 line-clamp-4 leading-relaxed text-base text-[#7e7e7e] overflow-y-auto pr-4">
{app.description}
</p>
<a
href={app.url}
className="flex mb-5 mx-5 my-1 btn text-[#1C1C1E] font-bold bg-white border-none normal-case rounded-lg hover:text-black"
target="_blank"
>
{t("backofficePage.appsComponent.appLink")} <FaArrowRight />
</a>
</div>
);
})}
<ModalApps newInfoApps={newInfoApps} setNewInfoApps={setNewInfoApps} />
</>
)
}

export default Apps
);
};

export default Apps;
66 changes: 17 additions & 49 deletions src/components/apps/appsAdminView/CreateApp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,33 @@
import { RootState } from "../../../store/store";
import { postApiApps } from "../../../store/reducers/appsCall/appsCallApiFunctionality";
import { useDispatch, useSelector } from "react-redux";
import { createToken } from "../../../interfaces/interfaces";
import { useState } from "react";
import ModalsAddApps from "./ModalsAddApps";
import plusIcon from "../../../assets/img/plus.svg"
import plusIcon from "../../../assets/img/plus.svg";
import { useTranslation } from "react-i18next";


declare global {
interface Window {
my_modal_2: {
showModal: () => void;
};
}
}

const CreateApp = () => {
const [t] = useTranslation();

const dispatch = useDispatch();

const { acces_token }: createToken = useSelector(
(state: RootState) => state.apiPostRegister
);

const [newInfoApps, setNewInfoApps] = useState({
title: "",
description: "",
url: "",
state: "",
github: "",
});

const sendInfo = () => {
console.log(newInfoApps, acces_token, dispatch)
postApiApps(newInfoApps, acces_token, dispatch);
};

return (
<>
<div className="mx-3 my-3">
<button
onClick={() => {
window.my_modal_2?.showModal();
}}
className="flex w-full min-h-[309px] md:h-full justify-center items-center rounded-xl border-dashed border-2 border-[#7e7e7e]"
onClick={() => {
if (document) {
(
document.getElementById("my_modal_2") as HTMLFormElement
).showModal();
}
}}
className="flex w-full min-h-[309px] md:h-full justify-center items-center rounded-xl border-dashed border-2 border-[#7e7e7e]"
>
<img src={plusIcon} alt="+" className="w-6" />
<p className="ml-2 font-bold text-base text-[#7e7e7e]">{t("backofficePage.appsComponent.createButton.createButtonTitle")}</p>
<img src={plusIcon} alt="+" className="w-6" />
<p className="ml-2 font-bold text-base text-[#7e7e7e]">
{t("backofficePage.appsComponent.createButton.createButtonTitle")}
</p>
</button>
</div>

<ModalsAddApps
newInfoApps={newInfoApps}
setNewInfoApps={setNewInfoApps}
sendInfo={sendInfo}
/>

<ModalsAddApps />
</>
)
}
);
};

export default CreateApp
export default CreateApp;
Loading

0 comments on commit 0642997

Please sign in to comment.