javascript - Using react.js, putting strange numbers in database

Question

I have a stopwatch in react.js. After the stopwatch ends, the user can put their time in a database. In the index.js file, I call <App /> which is below, along with util.js.

App.js

import React from 'react';
import { addName } from "./util";

function App() {
  const [name, setName] = React.useState("")

  function handleUpdate(evt) {
    setName(evt.target.value);
  }

  async function handleAddName(evt) {
    await addName(name);
  }

  return <div>
    <p><input type='text' value={name} onChange={handleUpdate} /></p>
    <button className='button-style' onClick={handleAddName}>Add Name</button>
  </div>
}

export default App;

util.js

import "isomorphic-fetch"

export function addName(name) {
    return fetch('http://localhost:3001/addtime', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, time: Date.now() })
    })
}

It puts their name and the time in the database, but they're weird times.

Each of these times was between 1 and 2 seconds on the stopwatch. I have the following in my node server.js file:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
...
app.post("/addtime", cors(), async (req,res) => {
    const name = req.body.name;
    const time = req.body.time;
    // const timeStamp = dateFormat(time, dateFormat.masks.isoDateTime);
    
    const template = 'INSERT INTO times (name,time) VALUES ($1,$2)';
    const response = await pool.query(template, [name,time]);
    
    res.json({name: name, time: time});

});

I can't understand why it is putting these weird numbers in the database

Answer 1

So the numbers you're seeing in the database is simply the milliseconds from January 1, 1970 00:00:00 UTC, which is a useful number that you'll use fairly often when keeping track of when something happened. Right now I get 1610330957356. So the number's aren't unusual.

The issue I suspect you have however is likely just the logic and I'm guessing you're expecting to see a number in the order of seconds (in milliseconds perhaps) since you mentioned this is a stopwatch of some sort, which means you need to send the difference in time, from the start of when the stopwatch starts, until it's stopped.

How you'll go about this will still be using Date.now() but in a manner described below.

const start_time = Date.now(); // 1610330952000
// ... wait for stopwatch to stop or other events ...
// when the stop has triggered you need
const stop_time = Date.now(); // 1610330957000 after exactly 5 seconds of waiting
const difference = stop_time - start_time // 5000 for 5 seconds

Then your body will instead be JSON.stringify({ name, time: difference })

Naturally you can compress these into fewer lines, but I just wanted the steps to be clear.

Edit: for more clarity here is what the docs say is returned

A Number representing the milliseconds elapsed since the UNIX epoch.

Date.now Documentation from MDN