date-fns#parseJSON TypeScript Examples

config: IFieldConfig = {
  type: FieldType.dateTime,
  name: "Time & Date",
  dataType: "firebase.firestore.Timestamp",
  initialValue: null,
  initializable: true,
  icon: <DateTimeIcon />,
  description:
    "Time and Date can be written as YYYY/MM/DD hh:mm (am/pm) or input using a picker module.",
  TableCell: withHeavyCell(BasicCell, TableCell),
  TableEditor: NullEditor,
  SideDrawerField,
  csvImportParser: (value) => parseJSON(value).getTime(),
}

deserialize(value: any): Date | null {
    if (value) {
      if (typeof value === 'string') {
        if (this.options?.useUtc) {
          return parseJSON(value);
        }
        return parseISO(value);
      }
      if (typeof value === 'number') {
        return toDate(value);
      }
      if (value instanceof Date) {
        return this.clone(value as Date);
      }
      return null;
    }
    return null;
  }

describe('NgxDateFnsDateAdapter with NGX_MAT_DATEFNS_DATE_ADAPTER_OPTIONS override', () => {
  describe('use UTC', () => {
    let adapter: NgxDateFnsDateAdapter;

    beforeEach(
      waitForAsync(() => {
        TestBed.configureTestingModule({
          imports: [NgxMatDateFnsDateModule],
          providers: [
            {
              provide: NGX_MAT_DATEFNS_DATE_ADAPTER_OPTIONS,
              useValue: { useUtc: true },
            },
          ],
        }).compileComponents();
      })
    );

    beforeEach(inject([DateAdapter], (d: NgxDateFnsDateAdapter) => {
      adapter = d;
    }));

    it('should create date in UTC', () => {
      const expectedDate = parseJSON('2017-01-02T00:00:00Z');
      expect(adapter.createDate(2017, JAN, 2)).toEqual(expectedDate);
    });

    it('should create today in UTC', () => {
      const today = new Date();
      const todayUTCString = `${today.getFullYear()}-${(today.getMonth() + 1)
        .toString()
        .padStart(2, '0')}-${today
        .getDate()
        .toString()
        .padStart(2, '0')}T00:00:00Z`;
      const expectedDate = parseJSON(todayUTCString);
      expect(adapter.today()).toEqual(expectedDate);
    });

    it('should parse dates to UTC', () => {
      const expectedDate = parseJSON('2017-01-02T00:00:00Z');
      expect(adapter.parse('1/2/2017', 'MM/dd/yyyy')).toEqual(expectedDate);
    });

    it('should return UTC date when deserializing', () => {
      const expectedDate = parseJSON('2020-04-12T23:20:50.52Z');
      expect(adapter.deserialize('2020-04-12T23:20:50.52Z')).toEqual(
        expectedDate
      );
    });
  });
});

export default function Step2NewColumns({
  csvData,
  config,
  setConfig,
  isXs,
}: IStepProps) {
  const classes = useStyles();

  const [fieldToEdit, setFieldToEdit] = useState(0);

  const handleChange = (e) => {
    const newColumns = [...config.newColumns];
    newColumns[fieldToEdit].type = e.target.value;

    setConfig((config) => ({ ...config, newColumns }));
  };

  const currentPair = _find(config.pairs, {
    columnKey: config.newColumns[fieldToEdit]?.key,
  });
  const rowData = csvData.rows.map((row) => row[currentPair?.csvKey ?? ""]);

  return (
    <>
      <div>
        <Grid container spacing={2} className={classes.typeSelectRow}>
          <Grid item xs={12} sm={6}>
            <Typography variant="overline" gutterBottom component="h2">
              New Firetable Columns
            </Typography>
            <Divider />

            <FadeList>
              {config.newColumns.map(({ key, name, type }, i) => (
                <li key={key}>
                  <ButtonBase
                    className={classes.buttonBase}
                    onClick={() => setFieldToEdit(i)}
                    aria-label={`Edit column ${key}`}
                    focusRipple
                  >
                    <Column
                      label={name}
                      type={type}
                      active={i === fieldToEdit}
                      secondaryItem={i === fieldToEdit && <ChevronRightIcon />}
                    />
                  </ButtonBase>
                </li>
              ))}
            </FadeList>
          </Grid>
          <Grid item xs={12} sm={6}>
            <Typography
              variant="overline"
              noWrap
              component="h2"
              className={classes.typeHeading}
            >
              Column Type: {config.newColumns[fieldToEdit].name}
            </Typography>

            <FieldsDropdown
              value={config.newColumns[fieldToEdit].type}
              onChange={handleChange}
              hideLabel
              options={SELECTABLE_TYPES}
            />
          </Grid>
        </Grid>
      </div>

      <div>
        <Grid container spacing={3}>
          {!isXs && (
            <Grid item xs={12} sm={6}>
              <Typography variant="overline" gutterBottom component="h2">
                Raw Data
              </Typography>
            </Grid>
          )}
          <Grid item xs={12} sm={6}>
            <Typography variant="overline" gutterBottom component="h2">
              Column Preview
            </Typography>
          </Grid>
        </Grid>

        <Divider className={classes.previewDivider} />

        <Grid container spacing={3}>
          {!isXs && (
            <Grid item xs={12} sm={6}>
              <Column label={config.newColumns[fieldToEdit].key} />
            </Grid>
          )}
          <Grid item xs={12} sm={6}>
            <Column
              label={config.newColumns[fieldToEdit].name}
              type={config.newColumns[fieldToEdit].type}
            />
          </Grid>
        </Grid>

        <FadeList classes={{ list: classes.previewList }}>
          {rowData.slice(0, 20).map((cell, i) => (
            <Grid container key={i} wrap="nowrap">
              {!isXs && (
                <Grid item xs className={classes.cellContainer}>
                  <Cell
                    field={config.newColumns[fieldToEdit].key}
                    value={(JSON.stringify(cell) || "")
                      .replace(/^"/, "")
                      .replace(/"$/, "")}
                    type={FieldType.shortText}
                  />
                </Grid>
              )}

              {!isXs && <Grid item className={classes.previewSpacer} />}

              <Grid item xs className={classes.cellContainer}>
                <Cell
                  field={config.newColumns[fieldToEdit].key}
                  value={
                    config.newColumns[fieldToEdit].type === FieldType.date ||
                    config.newColumns[fieldToEdit].type === FieldType.dateTime
                      ? parseJSON(cell).getTime()
                      : cell
                  }
                  type={config.newColumns[fieldToEdit].type}
                  name={config.newColumns[fieldToEdit].name}
                />
              </Grid>
            </Grid>
          ))}
        </FadeList>
      </div>
    </>
  );
}