packages/drive-store/components/revisions/RevisionList.tsx

   1 import { fromUnixTime, isToday } from 'date-fns';
   2 import { c } from 'ttag';
   3
   4 import type { DriveFileRevision } from '../../store';
   5 import RevisionListItem from './RevisionListItem';
   6 import type { CategorizedRevisions } from './getCategorizedRevisions';
   7
   8 interface Props {
   9     currentRevision: DriveFileRevision;
  10     categorizedRevisions: CategorizedRevisions;
  11 }
  12
  13 const RevisionList = ({ currentRevision, categorizedRevisions }: Props) => {
  14     const currentRevisionFormat = isToday(fromUnixTime(currentRevision.createTime)) ? 'time' : 'date';
  15     return (
  16         <ul className="unstyled">
  17             <li data-testid="current-revision">
  18                 <span className="text-lg text-semibold revisions-modal-list-title--current">{c('Info')
  19                     .t`Current version`}</span>
  20
  21                 <ul className="unstyled my-4 ml-4">
  22                     <RevisionListItem formatType={currentRevisionFormat} revision={currentRevision} isCurrent />
  23                 </ul>
  24             </li>
  25             {!!categorizedRevisions.size ? (
  26                 <>
  27                     <li tabIndex={-1}>
  28                         <hr className="mb-5 revisions-modal-list-separator" />
  29                     </li>
  30                     {[...categorizedRevisions.entries()].map(([key, revisionCategory]) => {
  31                         return (
  32                             <li data-testid="previous-revisions" key={key}>
  33                                 <span className="text-lg text-semibold color-weak">{revisionCategory.title}</span>
  34                                 <ul className="unstyled my-3 ml-4">
  35                                     {revisionCategory.list.map((revision) => (
  36                                         <RevisionListItem
  37                                             key={revision.id}
  38                                             formatType={key === 'today' || key === 'yesterday' ? 'time' : 'date'}
  39                                             revision={revision}
  40                                         />
  41                                     ))}
  42                                 </ul>
  43                             </li>
  44                         );
  45                     })}
  46                 </>
  47             ) : null}
  48         </ul>
  49     );
  50 };
  51
  52 export default RevisionList;