Contentful logo

Contentful Community

Wootric: Warning: Invalid created_at, expecting 10-digit Unix timestamp in seconds

I’m making a custom Contentful app that replaces an entry field in one of my content models. The app is working fine except for this odd error thrown in vendors~app-0d034c707e9aefff213c.js:15.

Wootric: Warning: Invalid created_at, expecting 10-digit Unix timestamp in seconds.

This error is thrown about a dozen times when the entry and app loads and then again any time the state of the entry is modified (i.e. any time I modify one of the fields my app replaced).

Anyone encountered this warning before or know how to fix it?

Here’s my app file:

import React, { useEffect, useState } from 'react';
import {
  SelectField,
  Spinner,
  Option,
  FormLabel,
  Pill
} from '@contentful/forma-36-react-components';
import axios from 'axios';

const RM_INTEGRATION_ENDPOINT = 'secretSauce';
const ContentfulField = props => {
  const [val, setValue] = useState(props.sdk.field.getValue() || []);
  const [hasLoaded, setHasLoaded] = useState(false);
  const [selectValue, setSelectValue] = useState('');
  const [products, setProducts] = useState([]);

  const compare = (a, b) => {
    const pA = a.title.toUpperCase();
    const pB = b.title.toUpperCase();
    if (pA > pB) return 1;
    else if (pA < pB) return -1;
    return 0;
  };

  useEffect(() => {
    props.sdk.window.startAutoResizer();

    const getProducts = async () => {
      let tempProducts = [];
      let page = 1;
      let totalProducts = 0;

      do {
        const res = await axios.get(RM_INTEGRATION_ENDPOINT + '/product/products', {
          params: {
            page
          }
        });
        const refinedProducts = res.data.results
          .map(p => ({
            id: p.id,
            title: p.title
          }))
          .sort(compare)
          .filter(x => !val.map(y => y.id).includes(x.id)); // Make sure products that have already been selected don't show up in the list
        tempProducts.push(...refinedProducts);

        page++;
        totalProducts = res.data.results_size;
      } while (tempProducts.length < totalProducts - val.length);

      setProducts(tempProducts);
      setHasLoaded(true);
    };

    getProducts();
  }, []);

  const onChange = async e => {
    const v = {
      id: e.currentTarget.value,
      title: e.currentTarget[e.currentTarget.selectedIndex].text
    };
    const newValue = val.concat(v);
    setValue(newValue);
    setSelectValue('');
    setProducts(products.filter(x => x.id !== v.id));
    if (v) {
      props.sdk.field.setValue(newValue);
    }
  };

  const removeProduct = id => {
    const newVal = val.filter(x => x.id !== id);
    setValue(newVal);
    props.sdk.field.setValue(newVal);
  };

  if (!hasLoaded) return <Spinner />;

  return (
    <>
      {val && val.length > 0 && (
        <>
          <FormLabel htmlFor="someInput">Selected Products</FormLabel>
          <div>
            {val.map(x => (
              <Pill
                key={x.id}
                label={x.title}
                onClose={() => removeProduct(x.id)}
                style={{ marginLeft: '10px', marginTop: '5px' }}
              />
            ))}
          </div>
        </>
      )}

      <SelectField
        id="products"
        name="products"
        labelText="Select Product"
        value={selectValue}
        onChange={onChange}>
        <Option value="">Select a Product</Option>
        {products.map(product => {
          return (
            <Option key={product.id} value={product.id}>
              {product.title}
            </Option>
          );
        })}
      </SelectField>
    </>
  );
};

export default ContentfulField;