yari new feature dayjs null error

https://github.com/mdn/yari/pull/4369

missing translations by peterbe · Pull Request #4369 · mdn/yari

@peterbe 님이 아래 두 가지에 기반해서 content와 translated content 저장소 사이의 차이를 보여주는 기능을 만들어주셨다.

• Translation differences
• Missing translations

 

사용 도중에 아래 링크의 동영상과 같은 에러가 발생했다. 

• link: https://github.com/mdn/yari/pull/4369#issuecomment-890036598

Problem: dayjs(null): when edits.modified is null, error occurs

---

해결 과정

1. An error occurred in modified.toISOString()

2. It printed console.log for modified and modified.toISOString().

function LastModified({ edits }: { edits: DocumentEdits }) {
  const modified = dayjs(edits.modified);
  const parentModified = dayjs(edits.parentModified);
  console.log(modified)
  console.log(modified.toISOString())
  return (
    <span
      className={`last_modified ${
        parentModified < modified ? "ahead" : "behind"
      }`}
    >
      <a href={edits.commitURL} target="_blank" rel="noreferrer">
        <time dateTime={modified.toISOString()} title={modified.toISOString()}>
          {modified.fromNow()}
        </time>
      </a>
      <br />
      <a href={edits.parentCommitURL} target="_blank" rel="noreferrer">
        <small>
          <time
            dateTime={parentModified.toISOString()}
            title={parentModified.toISOString()}
          >
            en-US {parentModified.fromNow()}
          </time>
        </small>
      </a>
    </span>
  );
}

 

3. RangeError: Invalid time value has occurred. Also, you can see that the return value of dayjs is strange.

4. modified has a null value. (API: http://localhost:3000/_translations/differences/?locale=ko)

5. Day.js treats dayjs(null) as an invalid input.

• https://day.js.org/docs/en/parse/now

6. I wrote null guard code. For some reason, there seems to be room for parentModified, so I guarded it together.

function LastModified({ edits }: { edits: DocumentEdits }) {
  const modified = dayjs(edits.modified || '2019-01-25T02:00:00.000');
  const parentModified = dayjs(edits.parentModified);

---

Demo

 

 

https://github.com/peterbe/yari/pull/14

fix: dayjs null err, LastModified component by hochan222 · Pull Request #14 · peterbe/yari