Проблемы с отображением вложенных данных

На какое-то время застрял, пытаясь понять это и выдергивая волосы, потому что это должно быть просто, но я не могу понять, как правильно это реализовать.

Я использую GatsbyJS с Contentful в качестве CMS.

Я хочу иметь простой способ для администраторов, использующих Contentful, для добавления новых документов и для отображения этих документов на сайте в разделах (также добавленных администратором).

Таким образом, администраторы будут видеть такой раздел, как «Протоколы документов», и под ним они смогут сначала добавить новый раздел Год, например 2018 < / strong> затем в этом разделе соответствующий документ (ссылка на файл PDF) под заголовком Месяц, в котором был выпущен этот документ, например, Январь.

На сайте я бы хотел, чтобы это отображалось, например, так:

Протоколы Документы

2018

  • Янв
  • Фев

так далее...

2017

  • Янв
  • Фев

так далее...

Таким образом, администратор может добавить столько разделов года, сколько ему нужно, в эти 12 файлов с заголовками по месяцам.

Самое большее, что мне удалось сделать до сих пор, - это возможность отображать массив всех добавленных мной документов, но я пока не могу понять, как лучше всего разделить их по заголовкам разделов на каждый год.

Мой текущий код выглядит так:

Запрос документа GrahpQL:

export const query = graphql`
  query NMODocs {
    allContentfulDocument {
      edges {
        node {
          id
          publishDate(formatString: "MMMM, YYYY")
          title
          file {
            file {
              url
            }
          }
        }
      }
    }
  }
`;

У меня есть массив:

    <ul>
      {data.allContentfulDocument.edges.map(({ node }) => (
        <DocListing key={node.id} doc={node} />
      ))}
    </ul>

И компонент DocLising:

import React from 'react';

const DocListing = ({ doc }) => (
  <li>
    <a title={doc.title} href={doc.file.file.url}>
      {doc.publishDate}
    </a>
  </li>
);

export default DocListing;

В настоящее время это приводит к списку дат, которые ссылаются на соответствующие файлы документов. Итак, повторяя свой вопрос, мне интересно, как лучше всего отобразить эти данные под заголовками соответствующих годовых разделов?

Приносим извинения, если это плохо объяснено, так как я все еще учусь и пытаюсь разобраться во множестве новых для меня вещей в этом проекте. Так что я открыт для любых предложений или советов о том, как к этому подойти.


reactjs gatsby graphql
person James    schedule 30.07.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Предполагая, что у вас есть массив с доступными датами, вы можете сгруппировать их с помощью небольшой вспомогательной функции.

const list = ['2018-08-12', '2018-07-12', '2017-08-12'];

const groupedList = list.reduce((acc, item) => {
  const year = item.split('-')[0];

  if (!acc[year]) {
    acc[year] = []
  }

  acc[year].push(item);
  return acc;
}, {});

В результате будет объект, включающий ключи на каждый год.

Я не уверен, что это возможно с запросом GraphQL.

Также, если вы полагаетесь на дату публикации в содержательном, это немного рискованно, потому что я думаю, что она меняется, когда контент обновляется до последней даты публикации (пожалуйста, проверьте дважды). Возможно, имеет смысл разделить его на отдельный тип контента, чтобы вы могли сами установить дату и быть уверенными.

Надеюсь, это поможет. :)

person stefan judis    schedule 01.08.2018