App.js
Published: 2023-12-06 16:30:43

```
import React from "react";
import { Box } from '@mui/material';
import Header from "./components/Header";
import Datetime from "./components/Datetime";
import { useState } from "react";
import Epoch from "./components/Epoch";
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
import tz from 'dayjs/plugin/timezone'


function App() {
  const date_format = 'MM/DD/YYYY HH:mm:ss'
  dayjs.extend(utc)
  dayjs.extend(tz)
  const [isDatetimeActive, setIsDatetimeActive] = useState()
  const [isleftChange, setIsLeftChange] = useState(true)
  
  // datetime related states 
  let leftDatetimeDefault = dayjs(dayjs().tz('Asia/Kolkata').format(date_format))
  let rightDatetimeDefault = dayjs(dayjs().tz('America/New_York').format(date_format))
  const [leftTz, setLeftTz] = useState('Asia/Kolkata')
  const [rightTz, setRightTz] = useState('America/New_York')
  const [leftDatetime, setLeftDatetime] = useState(leftDatetimeDefault)
  const [rightDatetime, setRightDatetime] = useState(rightDatetimeDefault)
  
  // epoch related states 
  const[epoch,setEpoch]=useState(dayjs().unix())
  const [epochRightTz, setEpochRightTz] = useState('America/New_York')
  const [epochRightDatetime, setEpochRightDatetime] = useState(rightDatetimeDefault)


  const datetimeHandler = (side, datetime) => {

    if (side === "left") {
      let curr_datetime = datetime
      console.log(curr_datetime.format(date_format))
      curr_datetime = dayjs.tz(curr_datetime.format(date_format), leftTz).tz(rightTz)
      curr_datetime = dayjs(curr_datetime.format(date_format))
      console.log(curr_datetime.format(date_format))
      setRightDatetime(curr_datetime)
      setIsLeftChange(true)
    }
    else {
      let curr_datetime = datetime
      console.log(curr_datetime.format(date_format))
      curr_datetime = dayjs.tz(curr_datetime.format(date_format), rightTz).tz(leftTz)
      curr_datetime = dayjs(curr_datetime.format(date_format))
      console.log(curr_datetime.format(date_format))
      setLeftDatetime(curr_datetime)
      setIsLeftChange(false)
    }
  }


  const timezoneHandler = (side, timezone) => {
    if (side === "left") {
      setLeftTz(timezone)
      if (isleftChange) {
        let curr_datetime = leftDatetime
        curr_datetime = dayjs.tz(curr_datetime.format(date_format), timezone)
        curr_datetime = curr_datetime.tz(rightTz)
        curr_datetime = dayjs(curr_datetime.format(date_format))
        setRightDatetime(curr_datetime)
      }
      else {
        let curr_datetime = rightDatetime
        curr_datetime = dayjs.tz(curr_datetime.format(date_format), rightTz)
        curr_datetime = curr_datetime.tz(timezone)
        curr_datetime = dayjs(curr_datetime.format(date_format))
        setLeftDatetime(curr_datetime)
      }
    }
    else {
      setRightTz(timezone)
      if (isleftChange) {
        let curr_datetime = leftDatetime
        curr_datetime = dayjs.tz(curr_datetime.format(date_format), leftTz)
        curr_datetime = curr_datetime.tz(timezone)
        curr_datetime = dayjs(curr_datetime.format(date_format))
        setRightDatetime(curr_datetime)
      }
      else {
        let curr_datetime = rightDatetime
        curr_datetime = dayjs.tz(curr_datetime.format(date_format), timezone)
        curr_datetime = curr_datetime.tz(leftTz)
        curr_datetime = dayjs(curr_datetime.format(date_format))
        setLeftDatetime(curr_datetime)
      }
    }
  }


  const epochHandler=(value)=>{
    setIsLeftChange(true)
    if (value>0){
      let curr_datetime =dayjs.unix(value).tz(epochRightTz)
      curr_datetime =dayjs(curr_datetime.format(date_format))
      setEpochRightDatetime(curr_datetime)
      setEpoch(value)
    }
    else{
      console.log("error")
    }
  }
  const epochDatetimeHandler=(side ,datetime_)=>{
    setIsLeftChange(false)
    let curr_datetime =datetime_
    curr_datetime =dayjs.tz(curr_datetime.format(date_format),epochRightTz)
    let unix_time =curr_datetime.unix()
    setEpoch(unix_time)
  }
  const epochTimezoneHandler=(side, timezone)=>{
    if (isleftChange){
      if (epoch>0){
        let curr_datetime =dayjs.unix(epoch).tz(epochRightTz)
        curr_datetime =dayjs(curr_datetime.format(date_format))
        setEpochRightDatetime(curr_datetime)
      }
      else{
        console.log("error")
      }
    }else{
      let curr_datetime =epochRightDatetime
      curr_datetime =dayjs.tz(curr_datetime.format(date_format),epochRightTz)
      let unix_time =curr_datetime.unix()
      setEpoch(unix_time)
    }
    setEpochRightTz(timezone)
  }
  

  return (


    <div className="w-screen h-screen bg-gradient-to-r from-indigo-300 via-violet-600 to-blue-300">
      <Box >
        <Header isDatetimeActive={isDatetimeActive} setIsDatetimeActive={setIsDatetimeActive} />
        <Box sx={{ display: "flex", justifyContent: "space-evenly", mt: "100px", flexFlow: "row", flexWrap: "wrap" }}>
          {isDatetimeActive && <Datetime datetime={leftDatetime} datetimeHandler={datetimeHandler} timezone={leftTz} timezoneHandler={timezoneHandler} side={"left"} />}
          {isDatetimeActive && <Datetime datetime={rightDatetime} datetimeHandler={datetimeHandler} timezone={rightTz} timezoneHandler={timezoneHandler} side={"right"} />}
          {!isDatetimeActive && <Epoch epoch={epoch} epochHandler={epochHandler}/>}
          {!isDatetimeActive && <Datetime datetime={epochRightDatetime} datetimeHandler={epochDatetimeHandler} timezone={epochRightTz} timezoneHandler={epochTimezoneHandler} side={"right"} />}
        </Box>
      </Box>
    </div>

  );
}

export default App;



```