Улучшение моего React-приложения «Postr»

Задавшись целью создать React-приложение с маршрутизацией на стороне клиента, я хотел имитировать типичную ленту новостей в стиле социальных сетей. Как заядлый пользователь Twitter, вы увидите, что это приложение в значительной степени «вдохновлено» форматом Twitter.

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

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

App
└───Login
or
├───NavBar
└───Home
    └───Post
├───Account
└───UserList
Вход в полноэкранный режим Выход из полноэкранного режима

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

В дополнение к взаимодействию с сервером, мне нужно обновить переменную состояния фида в компонентах App и Home. Учитывая мой текущий деструктурированный реквизит в компоненте Post:

Мне нужно добавить feed и setFeed в качестве реквизитов в Post. Это также позволит мне добавить больше статистики на страницу аккаунта, например, количество «нравится» или количество удалений.

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

Наконец, третий компонент UserList может быть модифицирован для поиска постов вместо имен пользователей. Вот код моего текущего компонента UserList:

Он принимает переменную feed из App и использует ее для получения не дублирующегося массива имен пользователей. Я также могу переключить его на поиск постов вместо имен пользователей.

Просто поменяв условие в операторе if, я могу проверять текст сообщений (оказалось, что это проще, чем то, что я сделал изначально):

const matchingPosts = feed.map((post)=> {
        if (post.text.includes(search)) {
            return <li key={post.id}>{post.text}</li>
        }
    })
Войти в полноэкранный режим Выйти из полноэкранного режима

Я мог бы также вернуть компонент Post, и это могло бы выглядеть более похожим на реальное приложение. Там может быть переключатель для фильтрации по имени пользователя или содержанию сообщения. CSS можно немного доработать. Много и много вариантов.

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

Оцените статью
Procodings.ru
Добавить комментарий