Задавшись целью создать 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 можно немного доработать. Много и много вариантов.
Есть еще бесконечное количество возможностей, которые можно было бы использовать, но пока я доволен тем, что есть.