time-convertor-ts

Convert time across timezones (typescript)
git clone http://git.hanabi.in/repos/time-convertor-ts.git
Log | Files | Refs | README | LICENSE

CreateEvent.tsx (3027B)

      1 import React from "react";
      2 import moment from "moment-timezone";
      3 
      4 import TimezoneInput from "../comps/TimezoneInput";
      5 
      6 import { HM, localTimezone, MAX_DATE, YMD } from "../../utils";
      7 
      8 function CreateEvent() {
      9   const { protocol, host } = window.location;
     10   const url = `${protocol}//${host}/`;
     11   const now = moment(Date.now());
     12   const defaults = {
     13     date: now.format(YMD),
     14     stamp: now.unix(),
     15     time: now.format(HM),
     16   };
     17   const [fullurl, setFullurl] = React.useState<string>("");
     18   const [date, setDate] = React.useState<string>(defaults.date);
     19   const [time, setTime] = React.useState<string>(defaults.time);
     20   const [timezone, setTimezone] = React.useState<string>(localTimezone);
     21   let textArea: HTMLInputElement | null;
     22 
     23   function copyToClipboard(): void {
     24     const el = textArea;
     25     el?.select();
     26     document.execCommand("copy");
     27   }
     28 
     29   function generateLink(): void {
     30     const instance = moment.tz(`${date} ${time}`, timezone).unix();
     31     setFullurl(`${url}${instance}`);
     32   }
     33 
     34   function handleDateChange(e: React.ChangeEvent<HTMLInputElement>): void {
     35     setDate(e.target.value);
     36     setFullurl("");
     37   }
     38 
     39   function handleTimeChange(e: React.ChangeEvent<HTMLInputElement>): void {
     40     setTime(e.target.value);
     41     setFullurl("");
     42   }
     43 
     44   function handleTimezoneChange(tz: React.SetStateAction<string>): void {
     45     setTimezone(tz);
     46     setFullurl("");
     47   }
     48 
     49   return (
     50     <main className="container">
     51       <h1 className="mb-3 text-center">
     52         Select the date, time and timezone of your event.
     53       </h1>
     54       <label htmlFor="event-date">Event date</label>
     55       <input
     56         aria-describedby="event-date"
     57         className="form-control mb-4"
     58         id="event-date"
     59         max={MAX_DATE}
     60         name="event-date"
     61         onChange={handleDateChange}
     62         placeholder="Enter date"
     63         type="date"
     64         value={date}
     65       />
     66       <label htmlFor="event-time">Event time</label>
     67       <input
     68         aria-describedby="event-time"
     69         className="form-control mb-4"
     70         id="event-time"
     71         name="event-time"
     72         onChange={handleTimeChange}
     73         placeholder="Enter time"
     74         type="time"
     75         value={time}
     76       />
     77       <label htmlFor="event-timezone">Set timezone</label>
     78       <TimezoneInput
     79         autofocus={false}
     80         changeValue={handleTimezoneChange}
     81         id="event-timezone-input"
     82         placeholder="Time zone"
     83         TZ={timezone}
     84       />
     85       <h1 className="mt-5">Share link!</h1>
     86       <div className="input-group">
     87         <div className="input-group-prepend" onClick={generateLink}>
     88           <span className="input-group-text">Click to create link!</span>
     89         </div>
     90         <input
     91           className="form-control"
     92           id="event-url"
     93           onClick={copyToClipboard}
     94           readOnly={true}
     95           ref={(text) => (textArea = text)}
     96           style={{
     97             background: "white",
     98           }}
     99           type="text"
    100           value={fullurl}
    101         />
    102       </div>
    103     </main>
    104   );
    105 }
    106 
    107 export default CreateEvent;