Johann Alvares
8 Sep 2022
React js
//Calendar.tsx
import React from 'react';
import React,{useState,useEffect, useRef} from 'react'
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import Popup from "../calendar/FreeTimeModal";
import axios from "axios";
import "@fullcalendar/core/main.css";
import config from '../../env.json';
import moment from 'moment';
import './CalenderComponent.css';
import BlockUI from '../../layouts/bockUi/BlockUI';
import "@fullcalendar/daygrid/main.css";
export default function CalendarComponent(props) {
const events = [{ title: "today's event", date: new Date() }];
const [modalShow, setModalShow] = React.useState(false);
const [freetimeval,setFreeTimeVal]=useState({});
const [freetime,setFreeTime]=useState([]);
const [event,setEvent]=useState([]);
const [info,setInfo]=useState([{
freetime:[],
event:[]
}])
const [nextflag,setNextFlag]=useState(false);
const [tempNext,setTempNext]=useState([]);
const [result,setResult]=useState([]);
const [date, setDate]=useState("");
const start:any=new Date();
const end:any=new Date();
const [block,setBlock]=useState(false);
const [startdate, setStartDate]=useState(new Date());
const [enddate, setEndDate]=useState(new Date());
useEffect(() => {
if(props.refresh)
{
getFreeTime(moment(startdate).subtract(2,'M').format(),moment(enddate).add(2, 'M').format());
getEvents(moment(startdate).subtract(2,'M').format(),moment(enddate).add(2, 'M').format());
}
}, [props.refresh])
useEffect(() => {
const temp=event.concat(freetime);
setResult([...temp]);
console.log(JSON.stringify(result));
}, [event,freetime])
const getFreeTime=(start,end)=>{
setBlock(true);
debugger;
console.log(new Date())
console.log(start,end);
setStartDate(start);
setEndDate(end);
start=moment(start).toISOString();
end=moment(end).toISOString();
console.log(start, end);
axios
.get(
config.REACT_APP_CALENDAR_API_BASE+"/freetime?PageSize=&Page=0&StartDate="+start+"&EndDate="+end,
)
.then((res) => {
setBlock(false);
props.stoprefresh();
console.log(res.data.data);
let ftime=res.data.data;
ftime=ftime.map((x:any)=>{
console.log(moment(x.AvailabilityStart_DtTm).format());
x.start= moment(x.AvailabilityStart_DtTm).format();
x.end =moment(x.AvailabilityEnd_DtTm).format();
x.title=x.Subject_Val ;
return x;
})
setFreeTime(ftime);
handleCloseParent(true)
})
.catch((err)=>{
console.log("Freetime Error:"+err);
})
}
const getEvents=(start,end)=>{
debugger;
setBlock(true);
setStartDate(start);
setEndDate(end);
start=moment(start).toISOString();
end=moment(end).toISOString();
axios
.get(
config.REACT_APP_CALENDAR_API_BASE+"/calendarevent?PageSize=&Page=&Status_Val=accept&StartDate="+start+"&EndDate="+end,
)
.then((res) => {
setBlock(false);
console.log(res.data.data);
let ftime=res.data.data;
ftime=ftime.map((x:any)=> {
console.log(moment(x.AvailabilityStart_DtTm).format());
x.start= moment(x.RequestStart_DtTm).format();
x.end =moment(x.RequestedEnd_DtTm).format();
x.title=x.Subject_Val ;
return x;
})
setEvent(ftime);
})
.catch((err)=>{
console.log("Freetime Error:"+err);
})
}
const handleMonthChange=(eventdata)=>{
debugger;
console.log(event);
setNextFlag(true);
setEvent([]);
setFreeTime([]);
getFreeTime(moment(eventdata.start).startOf('month').format(),moment(eventdata.start).endOf('month').format());
getEvents(moment(eventdata.start).startOf('month').format(),moment(eventdata.start).endOf('month').format());
getFreeTime(moment(eventdata.start).subtract(2,'M').format(),moment(eventdata.end).add(2, 'M').format());
getEvents(moment(eventdata.start).subtract(2,'M').format(),moment(eventdata.end).add(2, 'M').format());
console.log(event,freetime);
const temp=event.concat(freetime);
}
const handleDateClick = (event) => {
debugger;
console.log(event.dateStr);
setModalShow(true);
setDate(event.date.toISOString());
debugger;
}
return (
<>
{setModalShow(false);if(x){getFreeTime(startdate,enddate);getEvents(startdate,enddate);}}} end={end} value={true} dateval={date} />
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
dayMaxEventRows= {2}
initialView="dayGridMonth"
headerToolbar={
{
left: 'dayGridMonth,timeGridWeek',
center: 'title',
right: 'prev,next'
}
}
datesSet= {(e)=> handleMonthChange(e) }
eventBackgroundColor={"#3788d8"}
eventColor={'#3788d8'}
displayEventEnd={true}
events={result}
nowIndicator
eventTextColor='white'
dateClick={(e) => handleDateClick(e)}
/>
{
block?:null
}
)
}
Calendar.test.tsx
import {store} from '../app/newStore';
import FreeTimeModal from "../components/calendar/FreeTimeModal";
import { CalendarDataManager } from "@fullcalendar/react";
import { mount } from "enzyme";
// const ReduxWrapper = ({ children }) => (
//
// {children}
//
// );
// This component helps get rid of the following error :: react-i18next
jest.mock('react-i18next', () => ({
useTranslation: () => ({t: key => key})
}));
test("Snapshot for Calendar Component", () => {
const Component = renderer.create(
)
.toJSON()
expect(Component).toMatchSnapshot()
})
describe("Snapshot testing of FreeTimeModal.tsx", () => {
test("Snapshot for FreeTimeModal Component", () => {
const renderedComponent = renderer
.create()
.toJSON()
expect(renderedComponent).toMatchSnapshot()
})
})
© 2023 Copyrights reserved for web-brackets.com