TimeAgo de una fecha 구현

Al Mostrar una fecha pasada solemos ver los meses, días o año en el siguiente formato mes/día/año hora:minuto:segundo es una manera correcta, sin embargo a veces sería mejor mostrar de una formaigmable en

헤이스 3분

헤이스 5 호라스

헤이스 6 메시

Al observar páginas o alicaciones de redes sociales es común observar esta forma deimplementación.

😄 Ahora, Cómo lo 구현?

Existe una API de javascript llamada Intl con el que podemos dar formato a fechas, horas, numeros y más de manera internacional para poder usarla en distintos idiomas. Puedes ver mas información de la API Intl en esta documentación. 바스탄테 인터에산테.
Lo que usaremos en esta opportunidad es el constructor RelativeTimeFormat del objeto Intl para darle formato relativo al tiempo.

🧭 RelativeTimeFormat과 함께 사용하세요.

1. API 인스턴스

기본적으로 필요한 사항은 지역에 따라 지정되지 않으며 Intl.RleativeTimeFormat은 지역에 따라 지정됩니다. En este caso usamos es, tambíen se puede usar en para hacer referencencia a la localización inglesa.

const relativeTimeFormat = new Intl.RelativeTimeFormat("es");

2. Definir los formatos de tiempo

En este paso crearemos un array de objetos pasando como valores el formato y los segundos que tieene. Los formatos siguientes son años, meses, días, horas, minutos y segundos.

const FORMAT_OPTIONS = [
  {
    format: "years",
    seconds: 60 * 60 * 24 * 30 * 12
  },
  {
    format: "months",
    seconds: 60 * 60 * 24 * 30
  },
  {
    format: "days",
    seconds: 60 * 60 * 24
  },
  {
    format: "hours",
    seconds: 60 * 60
  },
  {
    format: "minutes",
    seconds: 60
  },
  {
    format: "seconds",
    seconds: 1
  }
];

3. Fortear el resultado de acuerdo a la fecha ingresada

El siguiente paso es definir una función con un parametro para obtener una fecha.

function timeAgo(pastDatetime) {
  // siguientes pasos
}
export default timeAgo;

Una vez creada la función el siguiente paso es obtener la fecha real así como la fecha pasada, para obtener la fecha real usamos el objeto Date y para obtener la otra fecha asignada a una variable pastDate tambíen creamos un objesato con la di un valor recibido por 생성자. 새로운 날짜를 정의할 수 있는 날짜를 입력하십시오.

const date = new Date("01/25/2021");

실제와 같이 실제적인 시간을 보내야 하고, 현재 사용하고 있는 방법도 .getTime() 사용자에게만 제공됩니다.
Bien, la resta la dividiremos entre 1000 para convertir de milisegundos a segundos y se pueda manipular mucho más sencillo 😃.

  const now = new Date();
  const pastDate = new Date(pastDatetime);
  const pastSeconds = (now.getTime() - pastDate.getTime()) / 1000;

Lo siguiente será recorrer el arreglo que se definió anteriormente y compar si los segundos pasados ​​con respecto a la fecha real es mayor que los segundos de cada formato definido, en laprimera condición que se cumpla segundos pasados ​​con repinido .
Como puedes observar se usa una estructura en la cuál iteramos directamente sobre los valores😅.

  for (const { format, seconds } of FORMAT_OPTIONS) {
    if (pastSeconds > seconds) {
       // retornar valor formateado
    }
  }

Como último paso una vez comprobado la validación retornaremos el valor formateado usando el metodo del objeto relativeTimeFormat con dos parametros, el primero es el valor de roundDate cual toma como paravalor los segundosentrepasado. El segundo viene a ser un formato como segundo, minuto, hora 등
El valor roundDate se pasa con el signo (-) para poder obtener un formato con fecha pasada ya que si no usamos el signo negativo podría dar como resultado por ejemplo Dentro de 4 días.

for (const { format, seconds } of FORMAT_OPTIONS) {
  if (pastSeconds > seconds) {
    const roundDate = Math.floor(pastSeconds / seconds);
    return relativeTimeFormat.format(-roundDate, format);
  }
}

Ahora juntando todo la función final quedaría de esta manera y es momento de probar que tal va.

function timeAgo(pastDatetime) {
  const now = new Date();
  const pastDate = new Date(pastDatetime);
  const pastSeconds = (now.getTime() - pastDate.getTime()) / 1000;
  for (const { format, seconds } of FORMAT_OPTIONS) {
    if (pastSeconds > seconds) {
      const roundDate = Math.floor(pastSeconds / seconds);
      return relativeTimeFormat.format(-roundDate, format);
    }
  }
}

⌛😊 Realizando pruebas con la función...

codesanbox

import timeAgo from "./timeAgo";

// mes/día/año hora:minuto:segundo

console.log(timeAgo("01/30/2021 18:44:00")); // Hace 20 segundos
console.log(timeAgo("01/30/2021 18:30")); // Hace 15 minutos
console.log(timeAgo("01/30/2021 17:00")); // Hace 5 horas
console.log(timeAgo("01/25/2021")); // Hace 5 días
console.log(timeAgo("10/01/2020")); // Hace 4 meses
console.log(timeAgo("01/12/2020")); // Hace 1 año