Merge branch 'develop' into forgotten-password

README.md

@@ -1,27 +1,87 @@
-# ITA-LANDING
 
-IT Academy fullstack project with php and React
+# ITA LANDING FRONTEND
 
-## Installation
+Welcome to the ITA LANDING GitHub repository! 
 
-Install npm packages:
+This repository houses the source code for the IT Academy's landing page and the accompanying administrative backoffice. 
+IT Academy is a leading educational institution dedicated to providing tech education. 
 
-```bash
-npm i
-```
+**The code is developed by students who have completed the IT Academy Bootcamp** and are currently in the project phase. In these projects, there is a Product Owner and a Scrum Master to enable students to apply their knowledge in a real-world environment.
+
+
+## Demo
+
+https://it-academy-landing.netlify.app/
 
-## Run
 
-```bash
+## Screenshots
+
+![App Screenshot](https://user-images.githubusercontent.com/92028251/272572895-7ca2d8a7-71e0-4f3c-bee6-a47194030b6a.png)
+
+
+## Instalation
+
+```console
+git clone https://github.com/IT-Academy-BCN/ita-landing-frontend.git
+npm i
 npm run dev
 ```
 
-## Contributing
 
-- Create the components in the /components folder. 
-- If it is necessary to create a page, it must be done in the /pages folder.
-- Logic and API calls should not be implemented in components. Context or Redux must be used for this purpose.
+## Contribution Guidelines
+
+Contributions are always welcome!
+
+
+To ensure a smooth and organized development process, please follow these guidelines when contributing:
+
+### Folder Structure
+Components: All React components should be created within the /components folder. These components should focus solely on rendering and presenting data. They should not contain any logic or API calls.
+
+Pages: If it is necessary to create a new page, please do so within the /pages folder. Pages should serve as the top-level components that define the structure of a route and may contain a composition of components. Keep pages clean and avoid adding complex logic directly to them.
+
+### Separation of Concerns
+Logic and API Calls: Components should not contain logic or make API calls directly. For handling application logic and data fetching, utilize either the React Context API or Redux state management. Create separate files for actions, reducers, and selectors as needed within the Redux structure.
+
+Redux: If you're working on state management, follow the Redux pattern for actions and reducers. Ensure that reducers are pure functions and keep state updates predictable.
+
+### Git Workflow
+
+1. Branches: When working on a new feature or bug fix, create a new branch from the dev branch with a descriptive name, such as feature/add-user-profile. Make your changes within this branch.
+
+2. Commits: Make frequent, well-documented commits. Use clear and concise commit messages that describe the purpose of each commit.
+
+3. Pull Requests: Submit a pull request when your feature or bug fix is ready for review. Include a description of your changes in the pull request, and reference any related issues, if applicable.
+
+### Code Quality
+
+1. Code Style: Maintain a consistent code style throughout the project. Use appropriate naming conventions, indentation, and follow any established coding standards.
+
+2. Code Reviews: Be open to feedback during code reviews. Reviewers may suggest improvements or changes to ensure code quality and maintainability.
+
+
+By following these contribution guidelines, you'll help maintain a clean and organized codebase,
+
+
+## Used By
+
+This project is being used by IT Academy at Barcelona Activa
+
+
+
+
+## Acknowledgements
+
+To all the students whose hard work makes these projects possible and move forward.
+
+## FAQ
+
+#### What are the requirements to participate in projects?
+
+Complete the React specialization at IT Academy.
+
+
+#### Why should I collaborate on this project?
 
-## License
+Because it provides a real-world environment to apply all the concepts learned in the bootcamp. It also allows for learning more advanced concepts and facing real-life situations that may occur in a company.
 
-[MIT](https://choosealicense.com/licenses/mit/)

src/components/BackOfficeComponent.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import FAQs from "./faqs/FAQsComponent";
 import ProjectsComponent from "./apps/ProjectsComponent";
 import menu from "../assets/img/menu.png";
+import { AdminButtons } from "./faqs/faqsAdminView/AdminButtons";
 
 function ViewBackOffice({
   setIsLogged,
@@ -40,17 +41,21 @@ function ViewBackOffice({
   }
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [windowWidth] = useWindowSize();
+  const size = useWindowSize();
+  const [hiddenAdminButtons, sethiddenAdminButtons] = useState(false);
 
   const toggleDropdown = ():void=> {
       setIsDropdownOpen(!isDropdownOpen);
     };
 
   useEffect(() => {
-    if(windowWidth>=1024){
+    if(size[1]>=1024){
       setIsDropdownOpen(false)
+      sethiddenAdminButtons(false)
+    }else{
+      sethiddenAdminButtons(true)
     }
-  }, [windowWidth]);
+  }, [size[1]]);
 
 
 return (
@@ -87,11 +92,12 @@ return (
 
 
 
-          <div className="lg:col-span-5 col-span-6 m-5 bg-white rounded-md">
+          <div className="lg:col-span-5 col-span-6 m-5">
 
               {/* Mobile */}
               <div className='lg:hidden'>
                   <div className="flex justify-end mt-4 mr-4 cursor-pointer">
+                      <AdminButtons />
                       <img src={menu} className="h-8 w-8" onClick={toggleDropdown}/>
                   </div>
               </div>
@@ -115,17 +121,17 @@ return (
                       <div>
                           <button className="py-2 my-4 ml-2">Instrucciones</button>
                       </div>
-
-                      {/* <div onClick={()=>{ setIsDropdownOpen(false)}} className="opacity-25 fixed inset-0 z-40 bg-black"></div> */}
                   </div>                    
               )}
               {!isDropdownOpen && (
                   <>
-                      <div className={`mt-20 ${state.faqs ? 'component hidden' : 'component'}`}>
-                          <FAQs />
+                      <div className={`${state.faqs ? 'component hidden' : 'component'}`}>
+                          {!hiddenAdminButtons && <AdminButtons />}
+                          <FAQs />    
                       </div>
 
                       <div className={state.projectsComponent ? 'component hidden' : 'component'}>
+                          {!hiddenAdminButtons && <AdminButtons />}
                           <ProjectsComponent />
                       </div>
                   </>

src/components/apps/Apps.tsx

@@ -0,0 +1,87 @@
+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 { 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"
+
+declare global {
+    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 handleSendApiInfo = (id: number) => {
+        apiCallAppsInfo(dispatch, id, acces_token);
+    };
+
+    const dispatch = useDispatch();
+
+    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"
+                } 
+                ${app.state === "SOON" ? "bg-soon" : "bg-building"}
+                flex flex-col rounded-xl mx-5 my-3 min-h-[296px]`}
+              >
+                    {window.location.pathname === "/backoffice" && (
+                        <div className="flex place-content-end gap-2">
+                            <button className="bg-white px-4 py-1 mt-4" onClick={() => {window.my_modal_1?.showModal(); handleSendApiInfo(app.id); }}>Editar</button>
+                            <a className="flex mt-4 mr-4" onClick={() => 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 place-content-end px-4 py-1 mt-4" target="_blank">
+                            <img src={githubLogo} alt="github_link" />
+                        </a>
+                    )}
+                    <h2 className="text-start ml-6 text-xl font-bold">{app.title}</h2>
+                    <p className="flex-grow text-left ml-4 mr-8 my-4 line-clamp-4 leading-7 text-[#7e7e7e]">{app.description}</p>
+                    <a href={app.url} className="flex mb-4 mx-4 btn btn-outline bg-base-100 border-none normal-case" target="_blank">
+                    Ir a app <FaArrowRight />
+                    </a>
+              </div>
+            );
+        })}
+        <ModalApps
+        newInfoApps={newInfoApps}
+        setNewInfoApps={setNewInfoApps}
+        />
+    </>
+  )
+}
+
+export default Apps