Skip to content

Update and delete #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update and delete #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d40d836
Update and delete
LuisC-web Aug 13, 2022
6ba37f5
Corrigiendo errores de typescript
LuisC-web Aug 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added favicon.ico
View file
Open in desktop
Binary file not shown.
1 change: 0 additions & 1 deletion global/global.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ const time =(month= dayjs().month())=>

});

console.log(daysMatrix);
return daysMatrix;
};

Expand Down
25 changes: 14 additions & 11 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

<head>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Task Time</title>
</head>

<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>

</html>
30 changes: 22 additions & 8 deletions src/ProviderDelCalendario.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
import dayjs from "dayjs";
import React, { createContext, useEffect, useReducer, useState } from "react";

interface State{
titulo: string,
descripcion: string,
label:string,
day:number,
id:number
}

const ContextoDelCalendario=createContext(
{


}


);
function guardarEventosReducer(state,{type,payload}){
function guardarEventosReducer(state: any[],{type,payload}: any){
switch (type) {
case "push":
return [...state,payload];

break;
case "update":
return state.map(evento=>evento.id===payload?payload:evt);
return state.map((evento: { id: unknown; })=>evento.id===payload.id?payload:evento);
case "delete":
return state.filter(evento=>evento.id!=payload);
return state.filter((evento: { id: unknown; })=>evento.id!=payload.id);

default:
throw new Error();
Expand All @@ -23,18 +34,21 @@ function guardarEventosReducer(state,{type,payload}){
}
function inicializarEventos(){

const storageEvents= localStorage.getItem("elementosGuardados");
const storageEvents= localStorage.getItem("elementosGuardados")||"";
const parsearEventos= !storageEvents?JSON.parse(storageEvents):[];
return parsearEventos;
}

const ProviderDelCalendario = ({children}) => {
// eslint-disable-next-line react/prop-types
const ProviderDelCalendario = ({children}): JSX.Element => {
const [mes, setMes] = useState(dayjs().month());
const [calendarioPequenio,setCalendarioPequenio]=useState(null);
const [diaSelecionado,setdiaSelecionado]=useState(dayjs());
const [agregarEventos,setAgregarEventos]=useState(false);
const [agregarEventos,setAgregarEventos]=useState(false);
const [guardarEventos, dispatchEventos]=useReducer(guardarEventosReducer,[],inicializarEventos);

const [eventoSelecionado,setEventoSelecionado]=useState(null);

useEffect(()=>{
if(calendarioPequenio!==null){

Expand All @@ -52,7 +66,7 @@ const ProviderDelCalendario = ({children}) => {
return (

<ContextoDelCalendario.Provider
value={{mes,setMes,calendarioPequenio,setCalendarioPequenio,diaSelecionado,setdiaSelecionado,agregarEventos,setAgregarEventos,dispatchEventos}}
value={{mes,setMes,calendarioPequenio,setCalendarioPequenio,diaSelecionado,setdiaSelecionado,agregarEventos,setAgregarEventos,dispatchEventos,guardarEventos,eventoSelecionado,setEventoSelecionado}}

>
{children}
Expand Down
101 changes: 74 additions & 27 deletions src/components/AgregarEvento.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,96 @@
import dayjs from "dayjs";
import React, { useContext, useState } from "react";
/* eslint-disable react/prop-types */
import React, { useContext, useEffect, useState } from "react";
import ContextoDelCalendario from "../ProviderDelCalendario";
import Evento from "./Evento";
import {colors} from "../../global/global";
function AgregarEvento({agregarEventos,setAgregarEventos}) {
const [titulo,setTitulo]=useState("");
const [descripcion,setDescripcion]=useState("");
const [label,setLabel]=useState("");
const {diaSelecionado,dispatchEventos}=useContext(ContextoDelCalendario);
const agregarEvento=(e)=>{

function AgregarEvento({ agregarEventos, setAgregarEventos }) {
const { diaSelecionado, dispatchEventos, eventoSelecionado,setEventoSelecionado } = useContext(
ContextoDelCalendario
);
const [titulo, setTitulo] = useState(
eventoSelecionado ? eventoSelecionado.titulo : ""
);
const [descripcion, setDescripcion] = useState(
eventoSelecionado ? eventoSelecionado.descripcion : ""
);
useEffect(() => {
if(eventoSelecionado!=null){


setDescripcion(eventoSelecionado.descripcion);
setTitulo(eventoSelecionado.titulo);

}

}, [eventoSelecionado]);

const [label, setLabel] = useState("Hello");

const agregarEvento = (e:React.FormEvent<EventTarget>) => {
e.preventDefault();
const estructuraDelEvento={
titulo:titulo,
descripcion:descripcion,
console.log(eventoSelecionado);
const estructuraDelEvento = {
titulo: titulo,
descripcion: descripcion,
label,
day:diaSelecionado.valueOf(),
id: Date.now()
day:0,
id:0

};
dispatchEventos({type:"push",payload:estructuraDelEvento});
if (eventoSelecionado) {
console.log(estructuraDelEvento);
estructuraDelEvento.day= eventoSelecionado.day;
estructuraDelEvento.id= eventoSelecionado.id;
dispatchEventos({ type: "update", payload: estructuraDelEvento });
setEventoSelecionado(null);

} else {
dispatchEventos({ type: "push", payload: estructuraDelEvento });
estructuraDelEvento.day= diaSelecionado.valueOf();
estructuraDelEvento.id= Date.now();
}
setAgregarEventos(false);
setTitulo("");
setDescripcion("");
setLabel("");
};
return (
<div
className={`agregar-evento bg-color-base flex justify-around items-center flex-col rounded-lg
${agregarEventos?"opacity":"no-opacity"}`}
${agregarEventos ? "opacity" : "no-opacity"}`}
>
<div className="flex flex-col">

<h1 className="">Agregar evento</h1>

<input className="" value={titulo} onChange={e=>setTitulo(e.target.value)} type="text" />
<input
className=""
value={titulo}
onChange={(e) => setTitulo(e.target.value)}
type="text"
/>
<p className="uppercase">
{diaSelecionado!=null?diaSelecionado.format("dddd,MMMM DD"):""}
{diaSelecionado != null ? diaSelecionado.format("dddd,MMMM DD") : ""}
</p>
</div>
<div>
{colors.red}
</div>

<textarea name="" id="" cols="20" rows="5" maxLength="100"></textarea>

<textarea
name=""
id=""
cols={20}
rows={5}
maxLength={100}
value={descripcion}
onChange={(e) => setDescripcion(e.target.value)}
></textarea>

<button onClick={(e) => agregarEvento(e)}>Guardar</button>
{eventoSelecionado?<button onClick={() => {
dispatchEventos({ type: "delete", payload: eventoSelecionado });
setAgregarEventos(false);


<button onClick={(e)=>agregarEvento(e)}>Guardar</button>
}}>Eliminar</button>:null}
</div>
);
}

export default AgregarEvento;
export default AgregarEvento;
33 changes: 30 additions & 3 deletions src/components/Day.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
import dayjs from "dayjs";
import React, { useContext } from "react";
import React, { useContext, useEffect, useState } from "react";
import ContextoDelCalendario from "../ProviderDelCalendario";

function Day({day,rowIndex}) {
const {setAgregarEventos,diaSelecionado,setdiaSelecionado}=useContext(ContextoDelCalendario);
const [dayEvents,setDayEvents]=useState([]);

const {setAgregarEventos,diaSelecionado,setdiaSelecionado,guardarEventos,setEventoSelecionado}=useContext(ContextoDelCalendario);


useEffect(() => {
const eventos=guardarEventos.filter(evento=>(
dayjs(evento.day).format("DD-MM-YY")===day.format("DD-MM-YY"))

);

setDayEvents(eventos);

}, [guardarEventos,day]);
const getCurrentDay = ()=>{
const formato="DD-MM-YY";
const diaHoy= dayjs().format(formato);
Expand All @@ -20,7 +33,7 @@ function Day({day,rowIndex}) {


};

return (
<div className="border border-gray cursor-pointer">
<header className="flex flex-col items-center">
Expand All @@ -37,8 +50,22 @@ function Day({day,rowIndex}) {
</p>


{dayEvents.map((evento,indice)=>(

<div className="bg-color-base w-3/4 text-center p-1 text-white rounded-lg"
onClick={()=>{setEventoSelecionado(evento);
setAgregarEventos(true);
}}
key={indice}
id={indice}
>
{evento.titulo}
</div>

))}
</header>


</div>
);
}
Expand Down
8 changes: 6 additions & 2 deletions src/components/ErrorF.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import React from "react";
type Props={
error:string

function ErrorF({error}) {

}
function ErrorF(props:Props) {
return (
<p className="bg-red text-white text-center p-2 rounded-lg font-bold uppercase animate-pulse">{error}</p> );
<p className="bg-red text-white text-center p-2 rounded-lg font-bold uppercase animate-pulse">{props.error}</p> );
}

export default ErrorF;
3 changes: 2 additions & 1 deletion src/components/Login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ function Login () {
<form className='bg-color-second md:w-1/4 p-4 rounded-md shadow-lg bg-opacity-50'>
{error?(<ErrorF error={error}></ErrorF>):null}
<div className='flex flex-col mt-2'>
<label htmlFor="mail">Correo</label>
<h1 className="font-bold text-center uppercase">Iniciar sesión</h1>
<label htmlFor="mail">Correo</label>
<input className="mt-2 rounded-lg p-2" type="email" name="mail" id="mail" value={email}
onChange={e=>setEmail(e.target.value)}
autoFocus/>
Expand Down
1 change: 1 addition & 0 deletions src/components/Register.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ function Register() {
<form className='bg-color-second md:w-1/4 p-4 rounded-md shadow-lg bg-opacity-50'>
{error?(<ErrorF error={error}></ErrorF>):null}
<div className='flex flex-col mt-2'>
<h1 className="font-bold text-center uppercase">Registrarse</h1>
<label htmlFor="mail">Correo</label>
<input className="mt-2 rounded-lg p-2" type="email" name="mail" id="mail" value={email}
onChange={e=>setEmail(e.target.value)}
Expand Down