Всё-таки вьюху в отдельную задачу выведу

Коммиты по первой задаче здесь - https://github.com/Pivkarta/nextjs/compare/master...linklib:beer_page?expand=1

Рзберусь, как закинуть изменения - закину) 

Всё-таки вьюху в отдельную задачу выведу Коммиты по первой задаче здесь - https://github.com/Pivkarta/nextjs/compare/master...linklib:beer_page?expand=1 Рзберусь, как закинуть изменения - закину)

Всё-таки вьюху в отдельную задачу выведу Коммиты п

RichText

Документация для специалистов

Новости

Уроки

Задачи

Первая простая задача: вывести даты на странице задачи

То есть если тебе передают "1 eye for of 1 eye.", а ты возвращаешь true, то задание ты провалил. Ты сейчас пытаешься сказать "Вы неправильно задание проверяете, просите одно, а должны ожидать другое". Но они ожидают ровно то, что они и просят.

palindrome("1 eye for of 1 eye.") should return false.

Олег, ты хитришь :) Задание следующее: То есть если тебе передают "1 eye for of 1 eye.", а ты возвращаешь true, то задание ты провалил. Ты сейчас пытаешься сказать "Вы неправильно задание проверяете, просите одно, а должны ожидать другое". Но они ожидают ровно то, что они и просят.

Олег, ты хитришь :) Задание следующее: То есть есл

У меня такой вопрос я же ставил сборку nextJs мне надо новый проект скачивать или в этом проекте работать?

У меня такой вопрос я же ставил сборку nextJs мне

Олег, в таких случаях почти всегда правильней ветвиться именно от конечного проекта, в данном случае от https://github.com/freecode-academy/freecode.academy

1. Почти наверняка, если ты попытаешься к себе обновиться через git pull https://github.com/freecode-academy/freecode.academy master, ты получишь конфликты.

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

3. Даже если конфликтов не возникнет, все равно при мерже возникнет автоматически созданный коммит, который создаст при слиянии лишнюю запись в истории.

Олег, в таких случаях почти всегда правильней ветвиться именно от конечного проекта, в данном случае от https://github.com/freecode-academy/freecode.academy На то две причины: 1. Почти наверняка, если ты попытаешься к себе обновиться через git pull https://github.com/freecode-academy/freecode.academy master, ты получишь конфликты. 2. Даже если ты сможешь разрешить все эти конфликты, велика вероятность, что ты их решишь как минимум чуть не так, как в моем проекте, а значит при попытке слить, будет не только твое решение по конечной задаче, но и эти решения конфликтов, которые в свою очередь могут привести к конфликтам. 3. Даже если конфликтов не возникнет, все равно при мерже возникнет автоматически созданный коммит, который создаст при слиянии лишнюю запись в истории.

Олег, в таких случаях почти всегда правильней ветв

Установил сборку из нового репозитория. 

Когда запуская yarn start отображается пустая страница и в левой части надпись Main page.

Так и должно быть или что-то пошло не так?

Установил сборку из нового репозитория. Когда запуская yarn start отображается пустая страница и в левой части надпись Main page. Так и должно быть или что-то пошло не так?

Установил сборку из нового репозитория. Когда запу

git remote -v что показывает?

Еще такой вопрос я паралельно курс прохожу по React и там тоже все запускается на http://localhost:3000/. При запуске yarn start он сначала не запустился, когда убил react приложение все запустилось. Вопрос вот в чем, как мне сделать запуск двух приложений, чтобы они не конфликтовали с друг-другом?

Еще такой вопрос я паралельно курс прохожу по Reac

origin	https://github.com/prisma-cms/nextjs.git (fetch)

origin	https://github.com/prisma-cms/nextjs.git (push)

origin	https://github.com/prisma-cms/nextjs.git (fetch) origin	https://github.com/prisma-cms/nextjs.git (push)

origin	https://github.com/prisma-cms/nextjs.git (f

Ты обновился с заготовки https://github.com/prisma-cms/nextjs.git

А должен был с конечного проекта сайта https://github.com/freecode-academy/freecode.academy

Вот тебе и ответ. Ты обновился с заготовки https://github.com/prisma-cms/nextjs.git А должен был с конечного проекта сайта https://github.com/freecode-academy/freecode.academy Об этом я говорил.

Вот тебе и ответ. Ты обновился с заготовки https:/

Так я и делал clone https://github.com/freecode-academy/freecode.academy отсюда в новую папку. Как он его умудрился зацепить это же другой проект? 

Так я и делал clone https://github.com/freecode-ac

>> Еще такой вопрос я паралельно курс прохожу по React и там тоже все запускается на http://localhost:3000/. 

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

Но можно запускаться так: 

Соответственно порт указать любой можно

>> Еще такой вопрос я паралельно курс прохожу по React и там тоже все запускается на http://localhost:3000/. Один порт может быть занят только одним процессом. Соответственно, если ты что-то запустил на порту 3000, то больше ты ничего не запустишь на нем. Но можно запускаться так: PORT=3003 yarn dev PORT 3005 yarn start Соответственно порт указать любой можно

>> Еще такой вопрос я паралельно курс прохожу по R

Я понял Васян, так у тебя в настройках вот что стоит:

# Clone project
git clone https://github.com/prisma-cms/nextjs.git

# Install dependencies
yarn install

# Build bundles
yarn build

# Start bundled project
yarn start

Так я и заклонил опять nextjs

Я понял Васян, так у тебя в настройках вот что стоит: How to use # Clone project
git clone https://github.com/prisma-cms/nextjs.git

# Install dependencies
yarn install

# Build bundles
yarn build

# Start bundled project
yarn start Так я и заклонил опять nextjs

Я понял Васян, так у тебя в настройках вот что сто

>> Так я и делал clone https://github.com/freecode-academy/freecode.academy отсюда в новую папку. Как он его умудрился зацепить это же другой проект? 

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

и проверь какие ты последние команды выполнял и было ли там что.

>> Так я и делал clone https://github.com/freecode-academy/freecode.academy отсюда в новую папку. Как он его умудрился зацепить это же другой проект? Олег, просто так ничего не бывает. Скорее всего ты пытался это сделать, но получил ошибку от гита типа "Не могу создать, папка уже есть" или типа того. Ты проигнорил и дальше стал работать в этой папке. Выполни history | grep freecode и проверь какие ты последние команды выполнял и было ли там что.

>> Так я и делал clone https://github.com/freecode

Смотри выше ответ. Поменять описание настроек нужно. Иначе не только я буду так запускаться.

Смотри выше ответ

Ааа, копипаста - наше все?)))

Не думая и не смотря что выполняешь? Находка для злоумышленника)))

Ааа, копипаста - наше все?))) Не думая и не смотря что выполняешь? Находка для злоумышленника))) Поправлю.

Ааа, копипаста - наше все?))) Не думая и не смотря

Кстати, я на гитхабе просто копирую адрес проекта из адресной строки браузера и все. Так нормально клонируется.

Обрати внимание, у меня указано git clone https://github.com/freecode-academy/freecode.academy без всяких .git на конце.

Кстати, я на гитхабе просто копирую адрес проекта из адресной строки браузера и все. Так нормально клонируется. Обрати внимание, у меня указано git clone https://github.com/freecode-academy/freecode.academy без всяких .git на конце.

Кстати, я на гитхабе просто копирую адрес проекта

Если на странице задачи нажать редактирование задачи, то можно увидеть 4 поля редактирования дат.

Надо эти даты вывести и на самой странице задачи, просто для просмотра.

Получается на этой же странице нужно вывести и где конкретно ее нужно вывести? 

Если на странице задачи нажать редактирование задачи, то можно увидеть 4 поля редактирования дат. Надо эти даты вывести и на самой странице задачи, просто для просмотра. Получается на этой же странице нужно вывести и где конкретно ее нужно вывести?

Если на странице задачи нажать редактирование зада

>> Смотри выше ответ. Поменять описание настроек нужно. Иначе не только я буду так запускаться.

Уже поправил. Скоро выкачу в гит.

>> Получается на этой же странице нужно вывести и где конкретно ее нужно вывести? 

Да, на этой. На твое усмотрение. Пока задача - освоить технические моменты. Потом постепенно и красоту будем наводить.

>> Смотри выше ответ. Поменять описание настроек нужно. Иначе не только я буду так запускаться. Уже поправил. Скоро выкачу в гит. >> Получается на этой же странице нужно вывести и где конкретно ее нужно вывести? Да, на этой. На твое усмотрение. Пока задача - освоить технические моменты. Потом постепенно и красоту будем наводить.

>> Смотри выше ответ. Поменять описание настроек н

Такой вопрос. В react есть файл App, куда мы привязываем все страницы, если так корректно высказываться. Короче смысл в чем, есть ли какая-нибудь статья где описана структура твоего проекта. 

По папкам и файлам  к примеру:

Такой вопрос. В react есть файл App, куда мы привязываем все страницы, если так корректно высказываться. Короче смысл в чем, есть ли какая-нибудь статья где описана структура твоего проекта. По папкам и файлам  к примеру: Здесь react Здесь nextJs Здесь CSS Здесь typeScript Здесь JS что- то вроде этого?

Такой вопрос. В react есть файл App, куда мы привя

https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs

Там все максимально подробно, От и До. В чем-то отличия будут, но общие правила будут все теже самые.

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

https://freecode.academy/topics/obzornoe-video-po-@prisma-cms/nextjs Там все максимально подробно, От и До. В чем-то отличия будут, но общие правила будут все теже самые. В задаче я ссылки дал на файл, в котором работать и на файл-пример. Этого тебе достаточно для выполнения задачи. Сначала сделай хотя бы просто выбор. С оформлением (стилями и т.п.) будем бороться позже.

https://freecode.academy/topics/obzornoe-video-po-

Вообще на будущее, если планируется обучение на реально проекте. Было бы неплохо начать с того, как все ты эти технологии собрал в кучу react+nextJs+typeScript+GraphQl и начать прям самим собирать это все в кучу, чтобы было понятно откуда куда все прилетает, если конечно это возможно)

Вообще на будущее, если планируется обучение на ре

Тогда тебе сюда: https://nextjs.org/docs/getting-started

и сюда: https://github.com/vercel/next.js/tree/canary/examples

и сюда: https://styled-components.com/

и вот сюда: https://www.apollographql.com/

и еще вот сюда: https://expressjs.com/ru/

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

Олег, у нас нет здесь задачи научить делать проекты с нуля От и До. В современных реалиях это почти нереально (сорри за каламбур).

Задача состоит в том, чтобы каждый более менее освоил какое-то направление (или направления). Каждый по потельности самостоятельно какой-то боле менее крупный проект не сможет сделать, но вместе - вполне. То есть цель проекта - научить и объединить, а так же обеспечить платными задачами. Правильное обозначение целей - уже плюс к вероятности успешного результата.

Тогда тебе сюда: https://nextjs.org/docs/getting-started и сюда: https://github.com/vercel/next.js/tree/canary/examples и сюда: https://ru.reactjs.org/ и сюда: https://styled-components.com/ и сюда: https://graphql.org/ и вот сюда: https://www.apollographql.com/ и еще вот сюда: https://expressjs.com/ru/ И это далеко не все ресурсы, в которых ты боле менее должен ориентироваться, если хочешь знать проект в целом. Хотя бы чуть-чуть... Олег, у нас нет здесь задачи научить делать проекты с нуля От и До. В современных реалиях это почти нереально (сорри за каламбур). Задача состоит в том, чтобы каждый более менее освоил какое-то направление (или направления). Каждый по потельности самостоятельно какой-то боле менее крупный проект не сможет сделать, но вместе - вполне. То есть цель проекта - научить и объединить, а так же обеспечить платными задачами. Правильное обозначение целей - уже плюс к вероятности успешного результата.

Тогда тебе сюда: https://nextjs.org/docs/getting-s

Короче, что могу сказать, со структорой по видео вроде немного разобрался. 

По задаче, смотрю вьюху топика, если правильно понимаю нам нужно вывести такой же стейт во вьюхе задачи:

onChangeState = (data: EditorComponentProps['_dirty']) => {    this.updateObject(data)    return data    }

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

И если честно не совсем понимаю, как работают компоненты в реакте вроде добавляется, как тег компонент, а у тебя одни переменные с ретурном.

И не совсем понимаю, почему ты скинул для примера именно вьюху топику, там где он создается, а не саму страницу топика где сам вывод?

Короче, что могу сказать, со структорой по видео вроде немного разобрался. По задаче, смотрю вьюху топика, если правильно понимаю нам нужно вывести такой же стейт во вьюхе задачи: onChangeState = (data: EditorComponentProps['_dirty']) => {    this.updateObject(data)    return data    } Но что-то совсем не могу понять, как осуществляется вывод во вьюхе топика в  гридах и в коде я не вижу совсем вывода даты. И если честно не совсем понимаю, как работают компоненты в реакте вроде добавляется, как тег компонент, а у тебя одни переменные с ретурном. И не совсем понимаю, почему ты скинул для примера именно вьюху топику, там где он создается, а не саму страницу топика где сам вывод?

Короче, что могу сказать, со структорой по видео в

С топиком, видимо, неудачный пример я привел, потому что в таске вьюха - это функциональный компонент, а в топике классовые. Подробней о различиях между ними читай здесь: https://ru.reactjs.org/docs/components-and-props.html

Если коротко, то у классовых компонентов несколько методов есть и в итоге конечная отрисовка выполняется в методе Component::render, а функциональные - это конечные функции, у которых нет условно дополнительных методов и они как будто и есть функция render, то есть они сами по себе через return возвращают то, что должно быть отрисовано на странице, а вся логика выполняется в них самих (и различных хуках, которые так же выполняются в них). Сразу обозначу, что сейчас я все пишу на функциональных, и вам советую. А где встретятся class-based - это просто legacy, то есть наследие, которое лень было переписывать :)

Итак, тебе следует разобраться с жизненным циклом наших страниц.

1. Основа всего - GraphQL API. Так как данные мы забираем по API, то если мы не можем получить эти данные, то и вывести ничего не можем.

Для того, чтобы выполнить GraphQL-запрос на API-сервер, нам надо этот самый запрос прописать (то есть query task {...} и т.п.).  В классическом случае эти запросы прописывались непосредственно в аполло-запросах. Пример: https://www.apollographql.com/docs/react/data/queries/

Но это не круто. Представь, что один и тот же запрос выполняться будет в нескольких компонентах. Надо запросы уметь складывать куда-то так, чтобы можно было из разных мест дергать один и тот же. Но тут возникает и другая проблема: надо потом иметь возможность узнавать какие компоненты мы зааффектили, если изменили этот запрос, так как изменения могут быть критическими и надо бежать поправлять все компоненты, которые используют эти запросы. А еще нужна проверка, что эти запросы соответствуют схеме API-сервера, а то вдруг на сервере что-то поменялось и наши запросы сломанные.

Вот для решения этих задач и написан скрипт, который вызывается yarn generate:types

Этот скрипт обращается к API-серверу, тянет его схему и генерирует из него TypeScript типы https://raw.githubusercontent.com/freecode-academy/freecode.academy/master/src/modules/gql/generated/types.ts. 

В нем ты можешь найти в том числе и описание модели задачи.

Среди всех полей можно найти как раз нужные нам startDate, endDate, startDatePlaning и endDatePlaning. То есть в принципе, если данные с сервера будут получены, то там и эти поля должны быть. Но на самом деле это зависит от того, какие поля на самом деле прописали в запросах. Так вот, вторая часть указанного скрипта - это пройтись по самому проекту, найти все написанные в нем GraphQL-запросы и сформировать уже для них типы и конечные аполло-запросы.

В нашем случае запрос для страницы задачи написан здесь https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/gql/task.graphql:  (хотя и будет скорее всего в будущем перемещен в https://github.com/freecode-academy/freecode.academy/tree/master/src/gql)

Обрати внимание на конструкцию ...task_. Троеточие - это указывает на то, что здесь надо вставить другой фрагмент, имя которому легион (нет, task_). Шутка про легион не спроста, таких вложений фрагментов может быть сколько угодно, но GraphQL следит за тем, чтобы они были корректны и составлены по правилам, иначе выдаст ошибку. 

Фрагмент task_ описан здесь: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/gql/fragments/task.graphql

Там, как ты видишь, есть вложения и других фрагментов. Но главное, там есть вложение ...TaskNoNesting. В этом фрагменте перечислены нужные нам поля, так что все ОК.

2.Вывод полученных данных на странице.

В результате выполнения этого скрипта у нас появляются готовые функции для выполнения API-запросов, которые содержат в себе все прописанные нами поля. Конкретно для таски у нас вот хук-запрос: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/modules/gql/generated/task.ts#L61-L63

То есть теперь, в любом нашем функциональном компоненте мы можем вызывать этот запрос и в ответ получать запрошенные данные. Что мы и делаем вот здесь: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/index.tsx#L32-L35

Надо понимать, что данные самого запрошеггого объекта - это не сам объект response, а его свойство data. Помимо data там есть и другие свойства, типа loading (флаг того, что запрос в процессе выполнения, errors и другие). См официальную документацию: https://www.apollographql.com/docs/react/data/queries/#result

И вот полученный нами объект мы передаем во вьюху: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/index.tsx#L52

И там уже получаем свойства этого объекта, как то {task.name}, {task.status} и т.п.

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

то есть выполняет проверка на наличие значения, и если есть, выводится через форматирование компонентом moment.

Думаю, это должно тебе пролить свет на выполнение задачи.

export function useTaskQuery(baseOptions: Apollo.QueryHookOptions<TaskQuery, TaskQueryVariables>) {
  return Apollo.useQuery<TaskQuery, TaskQueryVariables>(TaskDocument, baseOptions);
}

  const response = useTaskQuery({
    variables,
    onError: console.error,
  })

            {createdAt ? (
              <Typography variant="caption" color="textSecondary">
                {moment(createdAt).format('lll')}
              </Typography>
            ) : null}

import { gql, useQuery } from '@apollo/client';

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

function Dogs({ onDogSelected }) {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;

  return (
    <select name="dog" onChange={onDogSelected}>
      {data.dogs.map(dog => (
        <option key={dog.id} value={dog.breed}>
          {dog.breed}
        </option>
      ))}
    </select>
  );
}

export interface Task extends Node {
  __typename?: 'Task';
  id: Scalars['ID'];
  createdAt: Scalars['DateTime'];
  updatedAt: Scalars['DateTime'];
  name: Scalars['String'];
  description?: Maybe<Scalars['String']>;
  content?: Maybe<Scalars['Json']>;
  status: TaskStatus;
  TaskProjects?: Maybe<Array<ProjectTask>>;
  CreatedBy?: Maybe<User>;
  Members?: Maybe<Array<TaskMember>>;
  Parent?: Maybe<Task>;
  Childs?: Maybe<Array<Task>>;
  RelatedFrom?: Maybe<Array<Task>>;
  RelatedTo?: Maybe<Array<Task>>;
  startDatePlaning?: Maybe<Scalars['DateTime']>;
  endDatePlaning?: Maybe<Scalars['DateTime']>;
  startDate?: Maybe<Scalars['DateTime']>;
  endDate?: Maybe<Scalars['DateTime']>;
  Timers?: Maybe<Array<Timer>>;
  Reactions?: Maybe<Array<TaskReaction>>;
  ChatRoom?: Maybe<ChatRoom>;
  CodeChallengeCompletion?: Maybe<CodeChallengeCompletion>;
}

query task($where: TaskWhereUniqueInput!, $timersWhere: TimerWhereInput) {
  object: task(where: $where) {
    ...task_
    Timers(orderBy: createdAt_DESC, where: $timersWhere) {
      ...timersConnectionTimer
    }
  }
}

С топиком, видимо, неудачный пример я привел, потому что в таске вьюха - это функциональный компонент, а в топике классовые. Подробней о различиях между ними читай здесь: https://ru.reactjs.org/docs/components-and-props.html Если коротко, то у классовых компонентов несколько методов есть и в итоге конечная отрисовка выполняется в методе Component::render, а функциональные - это конечные функции, у которых нет условно дополнительных методов и они как будто и есть функция render, то есть они сами по себе через return возвращают то, что должно быть отрисовано на странице, а вся логика выполняется в них самих (и различных хуках, которые так же выполняются в них). Сразу обозначу, что сейчас я все пишу на функциональных, и вам советую. А где встретятся class-based - это просто legacy, то есть наследие, которое лень было переписывать :) Итак, тебе следует разобраться с жизненным циклом наших страниц. 1. Основа всего - GraphQL API. Так как данные мы забираем по API, то если мы не можем получить эти данные, то и вывести ничего не можем. Для того, чтобы выполнить GraphQL-запрос на API-сервер, нам надо этот самый запрос прописать (то есть query task {...} и т.п.).  В классическом случае эти запросы прописывались непосредственно в аполло-запросах. Пример: https://www.apollographql.com/docs/react/data/queries/ Но это не круто. Представь, что один и тот же запрос выполняться будет в нескольких компонентах. Надо запросы уметь складывать куда-то так, чтобы можно было из разных мест дергать один и тот же. Но тут возникает и другая проблема: надо потом иметь возможность узнавать какие компоненты мы зааффектили, если изменили этот запрос, так как изменения могут быть критическими и надо бежать поправлять все компоненты, которые используют эти запросы. А еще нужна проверка, что эти запросы соответствуют схеме API-сервера, а то вдруг на сервере что-то поменялось и наши запросы сломанные. Вот для решения этих задач и написан скрипт, который вызывается yarn generate:types Этот скрипт обращается к API-серверу, тянет его схему и генерирует из него TypeScript типы https://raw.githubusercontent.com/freecode-academy/freecode.academy/master/src/modules/gql/generated/types.ts. В нем ты можешь найти в том числе и описание модели задачи. Среди всех полей можно найти как раз нужные нам startDate, endDate, startDatePlaning и endDatePlaning. То есть в принципе, если данные с сервера будут получены, то там и эти поля должны быть. Но на самом деле это зависит от того, какие поля на самом деле прописали в запросах. Так вот, вторая часть указанного скрипта - это пройтись по самому проекту, найти все написанные в нем GraphQL-запросы и сформировать уже для них типы и конечные аполло-запросы. В нашем случае запрос для страницы задачи написан здесь https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/gql/task.graphql:  (хотя и будет скорее всего в будущем перемещен в https://github.com/freecode-academy/freecode.academy/tree/master/src/gql) Обрати внимание на конструкцию ...task_. Троеточие - это указывает на то, что здесь надо вставить другой фрагмент, имя которому легион (нет, task_). Шутка про легион не спроста, таких вложений фрагментов может быть сколько угодно, но GraphQL следит за тем, чтобы они были корректны и составлены по правилам, иначе выдаст ошибку. Фрагмент task_ описан здесь: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/gql/fragments/task.graphql Там, как ты видишь, есть вложения и других фрагментов. Но главное, там есть вложение ...TaskNoNesting. В этом фрагменте перечислены нужные нам поля, так что все ОК. 2.Вывод полученных данных на странице. В результате выполнения этого скрипта у нас появляются готовые функции для выполнения API-запросов, которые содержат в себе все прописанные нами поля. Конкретно для таски у нас вот хук-запрос: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/modules/gql/generated/task.ts#L61-L63 То есть теперь, в любом нашем функциональном компоненте мы можем вызывать этот запрос и в ответ получать запрошенные данные. Что мы и делаем вот здесь: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/index.tsx#L32-L35 Надо понимать, что данные самого запрошеггого объекта - это не сам объект response, а его свойство data. Помимо data там есть и другие свойства, типа loading (флаг того, что запрос в процессе выполнения, errors и другие). См официальную документацию: https://www.apollographql.com/docs/react/data/queries/#result И вот полученный нами объект мы передаем во вьюху: https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/index.tsx#L52 И там уже получаем свойства этого объекта, как то {task.name}, {task.status} и т.п. Вот и ты там можешь получить, к примеру, task.startDate и вывести в каком-либо виде. Только следи за ошибками тайпскрипта, потому что эти поля не строчные, а объекты Date. Вот как раз для этого и давал вьюху топика как пример. Смотри как там вывод сделан. то есть выполняет проверка на наличие значения, и если есть, выводится через форматирование компонентом moment. Думаю, это должно тебе пролить свет на выполнение задачи.

С топиком, видимо, неудачный пример я привел, пото

Code review для саморазвития

 https://ru.reactjs.org/docs/components-and-props.html Кстати очень хорошая документация, очень доступно все объясняют. 

https://ru.reactjs.org/docs/components-and-props.h

Таки сам постоянно пользуюсь.

Если я правильно понял: 

1. Есть файл yarn generate:types, который хранит в себе все модели и парметры всех запросов с типами. 

2. Этот же файл yarn generate:types, ходит по проекту и собирает все GraphQL-запросы и компилирует их в Аполло-запросы.

3. Запрсы для GraphQL должны быть написаны специальным способом ...task_, чтобы можно было в них вставлять другие фрагменты. Для того, чтобы подцепить фрагмент он выносится в отдельный файл. Получается вроде базового запроса для которого мы формируем отдельные фрагменты в разных файлах и можем к нему подключить любой фрагмент или поменять. 

- Здесь вопрос: вставил этот запрос:

в  https://api.prisma-cms.com/, но он выдал что-то непонятное?

4. В итоге выполнение этого скрипта yarn generate:types, у нас появляются готовые аполо-функции.

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

5. После чего делаем вызов запрсоа в функциональном компоненте.

Зачем здесь еще переменная variables и что такое onError: console.error откудо оно тянется?

6. В итоге мы делаем вывод в нуждном месте. 

{moment(createdAt).format('lll')}    </Typography>    

Зачем столько гридов мы ими регулируем в каком месте выводить?

CreatedBy & createdAt в чем отличие зачем они нужны?

7. Создание task.startDate, как объект. 

Если правильно понимаю у объекта должен быть ключ и значение. По твоему из топика примеру не совсем понятно, как именно он дату выводит больше всего непонятно, как в данном случае вывод обращается к функции из 5 пункта {task.name}, {task.status} ,  или этот вывод:

Здесь я так понимаю он вообще к другой функции обращается, так как это из другой оперы. 

И какую страницу редактировать в итоге вьюху правильно https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/View/index.tsx ?

Если я правильно понял: 1. Есть файл yarn generate:types, который хранит в себе все модели и парметры всех запросов с типами. 2. Этот же файл yarn generate:types, ходит по проекту и собирает все GraphQL-запросы и компилирует их в Аполло-запросы. 3. Запрсы для GraphQL должны быть написаны специальным способом ...task_, чтобы можно было в них вставлять другие фрагменты. Для того, чтобы подцепить фрагмент он выносится в отдельный файл. Получается вроде базового запроса для которого мы формируем отдельные фрагменты в разных файлах и можем к нему подключить любой фрагмент или поменять. - Здесь вопрос: вставил этот запрос: в  https://api.prisma-cms.com/, но он выдал что-то непонятное? 4. В итоге выполнение этого скрипта yarn generate:types, у нас появляются готовые аполо-функции. - Здесь вопрос: несовсем понятно, как они появляются и где они появляются. Они появляются в конкретных файлах сами и как ты контролируешь появление такого большого количества функций судя по самому файлу? И собственно, как этот файл понимает куда что пихать, а если ты в процессе работы решил новый запрос создать, его нужно перезапустить после создания запроса? 5. После чего делаем вызов запрсоа в функциональном компоненте. Здесь вопрос: const response = useTaskQuery({ variables, onError: console.error, }) Зачем здесь еще переменная variables и что такое onError: console.error откудо оно тянется? 6. В итоге мы делаем вывод в нуждном месте. Здесь вопрос: <Grid item> {CreatedBy ? ( <UserLink user={CreatedBy} withAvatar={false} /> ) : null} {createdAt ? ( <Typography variant="caption" color="textSecondary"> {moment(createdAt).format('lll')}    </Typography> ) : null} </Grid> Зачем столько гридов мы ими регулируем в каком месте выводить? CreatedBy & createdAt в чем отличие зачем они нужны? 7. Создание task.startDate, как объект. Если правильно понимаю у объекта должен быть ключ и значение. По твоему из топика примеру не совсем понятно, как именно он дату выводит больше всего непонятно, как в данном случае вывод обращается к функции из 5 пункта {task.name}, {task.status} ,  или этот вывод: {createdAt ? ( <Typography variant="caption" color="textSecondary"> {moment(createdAt).format('lll')} </Typography> ) : null} Здесь я так понимаю он вообще к другой функции обращается, так как это из другой оперы. И какую страницу редактировать в итоге вьюху правильно https://github.com/freecode-academy/freecode.academy/blob/b94b55a4a8fc0a75b2a45eea7a0cf03fc324af25/src/pages/Tasks/Task/View/index.tsx ?

Если я правильно понял: 1. Есть файл yarn generate

>> Если я правильно понял: 

1. Есть файл yarn generate:types,

Нет, неправильно понял. yarn generate:types - это не файл, а выполняемая в терминале команда yarn с подпрограммой generate:types, прописанной в package.json: https://github.com/freecode-academy/freecode.academy/blob/master/package.json#L17.

Тебя не насторожило, что yarn generate:types очень похоже на yarn dev, yarn build, yarn start и т.п. ?

2, 3, 4 - это все вот в этих скриптах: https://github.com/freecode-academy/freecode.academy/tree/master/src/modules/gql/cli/generateTypes. Но тебе пока туда не надо лезть, это все было написано для описания общей картины.

Все остальное - тоже пока много не нужных вопросов. То есть ты пытаешься каждую букву разобрать. Этого не надо делать. Это все равно, как начать учиться водить машину и не тронуться с места, пока не выучишь ДВС со всеми законами термодинамики. Не надо так. Пока что просто вставь куда-нибудь {moment(task.startDate).format('lll')} с проверкой значения и возрадуйся тому, что что-то появится на странице. А потом глубже начнешь копать.

>> Если я правильно понял: 1. Есть файл yarn generate:types, Нет, неправильно понял. yarn generate:types - это не файл, а выполняемая в терминале команда yarn с подпрограммой generate:types, прописанной в package.json: https://github.com/freecode-academy/freecode.academy/blob/master/package.json#L17. Тебя не насторожило, что yarn generate:types очень похоже на yarn dev, yarn build, yarn start и т.п. ? 2, 3, 4 - это все вот в этих скриптах: https://github.com/freecode-academy/freecode.academy/tree/master/src/modules/gql/cli/generateTypes. Но тебе пока туда не надо лезть, это все было написано для описания общей картины. Все остальное - тоже пока много не нужных вопросов. То есть ты пытаешься каждую букву разобрать. Этого не надо делать. Это все равно, как начать учиться водить машину и не тронуться с места, пока не выучишь ДВС со всеми законами термодинамики. Не надо так. Пока что просто вставь куда-нибудь {moment(task.startDate).format('lll')} с проверкой значения и возрадуйся тому, что что-то появится на странице. А потом глубже начнешь копать.

>> Если я правильно понял: 1. Есть файл yarn gener

Он мне подчеркивает createdAt, moment и </Grid>. Походу я сломал TaskViewStyled.

Если засовываю в другой грид:

<Grid  item>
          <{createdAt ? (
            <Typography variant="caption" color="textSecondary">
              {moment(task.startDate).format('lll')}
            </Typography>
          ) : null}
        </Grid>

<Grid  item>
              {moment(task.startDate).format('lll')}
        </Grid>

<Grid item xs>
            <Typography variant="title">{task.name}</Typography>
            {moment(task.startDate).format('lll')}
          </Grid>

Вставил такой код: Он мне подчеркивает createdAt, moment и </Grid>. Походу я сломал TaskViewStyled. Если просто вставляю: Он подчеркивает moment. Если засовываю в другой грид: Он подчеркивает moment.

Вставил такой код: Он мне подчеркивает createdAt,

Так ты на подчеркнутое наведи мышку, появится всплывашка с описанием ошибки. Что за ошибка?

Так ты на подчеркнутое наведи мышку, появится вспл

Это уже в третьем варианте:

(alias) moment(inp?: moment.MomentInput, strict?: boolean | undefined): moment.Moment (+2 overloads)
export namespace moment

@param strict
Strict parsing disables the deprecated fallback to the native Date constructor when parsing a string.

'moment' refers to a UMD global, but the current file is a module. Consider adding an import instead.

Во втором такая же ошибка.

В первом гора ошибок везде.

Это уже в третьем варианте: (alias) moment(inp?: moment.MomentInput, strict?: boolean | undefined): moment.Moment (+2 overloads)
export namespace moment @param strict
Strict parsing disables the deprecated fallback to the native Date constructor when parsing a string. 'moment' refers to a UMD global, but the current file is a module. Consider adding an import instead. Во втором такая же ошибка. В первом гора ошибок везде.

Это уже в третьем варианте: (alias) moment(inp?: m

И пришли ссылку на коммит, посмотрю что у тебя и научу с ошибками работать.

git checkout -b with_error
git add .
git commit -am "WithError" --no-verify
git push --no-verify

Сделай так: И пришли ссылку на коммит, посмотрю что у тебя и научу с ошибками работать.

Сделай так: И пришли ссылку на коммит, посмотрю чт

nex@nA-nex:~/git/freecode.academy$ git push --no-verify

fatal: Текущая ветка with_error не имеет вышестоящей ветки.

Чтобы отправить текущую ветку и установить внешнюю ветку как вышестоящую для этой ветки, используйте

    git push --set-upstream origin with_error

nex@nA-nex:~/git/freecode.academy$ git push --no-verify fatal: Текущая ветка with_error не имеет вышестоящей ветки. Чтобы отправить текущую ветку и установить внешнюю ветку как вышестоящую для этой ветки, используйте git push --set-upstream origin with_error

package.json - не только для запуска JS-скриптов

Скринкаст добавления компонента загрузки картинок во фронт-редактор

В задачах можно указывать Нужна помощь и требуемые технологии

Проект #pivo-moscow. Обсуждение Задачи №1. На конечной странице пива вывести название пива и картинку

В списке задач выводить кнопки запуска таймеров для неавторизованных пользователей

Автообновление данных на страницах проекта

Видео Работа с ошибками в JavaScript/TypeScript

Code review для саморазвития

Обсуждение задания "Palindrome Checker"

Первая простая задача: вывести даты на странице задачи