Злобный 

Здравствуйте, ебаная Редакция! Я как и большинство разработчиков постоянно получаю входящие вакансии

и предложения в линкеде, как правило сразу содержащие полное описание вакансии и попытку затянуть меня в процессинг на какое-нить собеседование (просто HR или техническое или еще какое-то).

Но тут одни ребята отличились и после пары-тройки стандартных сообщений прислали:

«компания заинтересовалась Вами и попросила сразу передать Вам тестовое задание)

на выполнение 3-4 дня»

И я уже было подумал что они сбросили какую-то дичь, которую я по их мнению должен пилить на празднико-выходных и выслать в течении тех самых 4 дней (что в принципе уже зашквар), но потом открыл его:

Необходимо разработать просмотрщик JSON, который бы выводил контент в виде дерева аналогично тому, как показываются структуры данных в Devtools

Дерево должно выглядеть следующим образом

Узлы-коллекции (array|object) могут отображаться в двух состояниях — свернутом и развернутом (корневой узел развернут всегда). Состояния переключаются по клику на треугольной стрелке слева от узла. При разворачивании раскрывается только сам узел. При сворачивании узла также сворачиваются все его развернутые подузлы.

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

В развернутом состоянии индексы массивов показываются всегда, аналогично ключам объектов. Для развернутых узлов их дайджесты не выводятся, вместо них обозначения { … } и [ … ].

Счетчик выводится перед каждой коллекцией размером больше 1 элемента.

Атомарные узлы подсвечиваются разными цветами в зависимости от типа. Строки также обрамляются кавычками. Ключи объектов выводятся без кавычек, курсивом.

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

● в дайджесте выводится максимум 10 символов, если строка длиннее, то к ним добавляется … , чтобы намекнуть пользователю на большее

● размер блока для вывода строки не может превышать 400px * 200px, если контент не помещается, используется скроллинг

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

Приложение без данных показывает Ready for JSON… или аналогичную жизнеутверждающую надпись на белом фоне, надпись Drop file… с затемнением должна появляться, если приложение обнаружит, что пользователь тащит ему свежий файл.

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

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

Дополнительные условия и примечания:

1. Задание должно быть выполнено на чистом React, без использования библиотек управления состоянием (Redux, MobX, RxJS и т.п.) и готовых компонентов. К счастью, они тут не особо нужны.

2. Можно и нужно использовать create-react-app, react-custom-scrollbars, react-dropzone или их аналоги

3. Можно использовать любой метод задания стилей

4. Кое-какие константы для стилей:

Это построение JSON дерева со всей визуальщиной, вложенностями, свистелко-перделками и даже генерацией юзер-френдли ошибок в консоли О_О, и его реально по-хорошему нужно пилить чуть ли не неделю (если конечно не скачивать готовые решения коих чуть больше чем дохуя).

По итогу мы имеем умников, насмотревшихся на процессинг эпла и гугла,

«забывших» при этом самим стать эплом или гуглом.