github.com/freiheit-com/kuberpult@v1.24.2-0.20240328135542-315d5630abe6/services/frontend-service/src/ui/components/Releases/Releases.tsx (about)

     1  /*This file is part of kuberpult.
     2  
     3  Kuberpult is free software: you can redistribute it and/or modify
     4  it under the terms of the Expat(MIT) License as published by
     5  the Free Software Foundation.
     6  
     7  Kuberpult is distributed in the hope that it will be useful,
     8  but WITHOUT ANY WARRANTY; without even the implied warranty of
     9  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    10  MIT License for more details.
    11  
    12  You should have received a copy of the MIT License
    13  along with kuberpult. If not, see <https://directory.fsf.org/wiki/License:Expat>.
    14  
    15  Copyright 2023 freiheit.com*/
    16  import classNames from 'classnames';
    17  import { Release } from '../../../api/api';
    18  import { useReleasesForApp } from '../../utils/store';
    19  import { ReleaseCardMini } from '../ReleaseCardMini/ReleaseCardMini';
    20  import './Releases.scss';
    21  
    22  export type ReleasesProps = {
    23      className?: string;
    24      app: string;
    25  };
    26  
    27  const dateFormat = (date: Date): string => {
    28      const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    29      return `${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
    30  };
    31  
    32  const getReleasesForAppGroupByDate = (releases: Array<Release>): [Release, ...Release[]][] => {
    33      if (releases === undefined) {
    34          return [];
    35      }
    36      const releaseGroupedByCreatedAt = releases.reduce(
    37          (previousReleases: { [key: string]: [Release, ...Release[]] }, curRelease: Release) => {
    38              const createdAt = curRelease.createdAt;
    39              if (createdAt) {
    40                  const rels = previousReleases[createdAt.toDateString()] || [];
    41                  previousReleases[createdAt.toDateString()] = rels;
    42                  rels.push(curRelease);
    43              }
    44              return previousReleases;
    45          },
    46          {}
    47      );
    48      return Object.values(releaseGroupedByCreatedAt);
    49  };
    50  
    51  export const Releases: React.FC<ReleasesProps> = (props) => {
    52      const { app, className } = props;
    53      const releases = useReleasesForApp(app);
    54      const rel = getReleasesForAppGroupByDate(releases);
    55      return (
    56          <div className={classNames('timeline', className)}>
    57              <h1 className={classNames('app_name', className)}>{'Releases | ' + app}</h1>
    58              {rel.map((release) => (
    59                  <div key={release[0].version} className={classNames('container right', className)}>
    60                      <div className={classNames('release_date', className)}>
    61                          {release[0].createdAt ? dateFormat(release[0].createdAt) : ''}
    62                      </div>
    63                      {release.map((rele) => (
    64                          <div key={rele.version} className={classNames('content', className)}>
    65                              <ReleaseCardMini app={app} version={rele.version} />
    66                          </div>
    67                      ))}
    68                  </div>
    69              ))}
    70          </div>
    71      );
    72  };