From f30f9090b39427cff66e34b7fb0fb4a77d15b48b Mon Sep 17 00:00:00 2001 From: strNophix Date: Wed, 19 Oct 2022 15:52:44 +0200 Subject: [PATCH] Added faker and removed some placeholder data --- client/components/message/ChatBadge.tsx | 7 --- client/components/message/ChatMessage.tsx | 26 +++++------ client/package.json | 1 + client/pages/[channel]/index.tsx | 9 ++-- client/pages/category/[categoryName].tsx | 26 ----------- client/placeholder/GetStreams.ts | 44 ------------------ client/placeholder/GetUserFollows.ts | 28 ------------ client/placeholder/SearchCategories.ts | 12 ----- client/placeholder/chatMessages.ts | 9 ++++ client/pnpm-lock.yaml | 7 +++ client/types/index.ts | 54 ++--------------------- dist/index.html | 15 ------- 12 files changed, 34 insertions(+), 204 deletions(-) delete mode 100644 client/components/message/ChatBadge.tsx delete mode 100644 client/pages/category/[categoryName].tsx delete mode 100644 client/placeholder/GetStreams.ts delete mode 100644 client/placeholder/GetUserFollows.ts delete mode 100644 client/placeholder/SearchCategories.ts create mode 100644 client/placeholder/chatMessages.ts delete mode 100644 dist/index.html diff --git a/client/components/message/ChatBadge.tsx b/client/components/message/ChatBadge.tsx deleted file mode 100644 index 273f83f..0000000 --- a/client/components/message/ChatBadge.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { FC } from 'react'; - -const ChatBadge: FC = () => { - return ; -}; - -export default ChatBadge; diff --git a/client/components/message/ChatMessage.tsx b/client/components/message/ChatMessage.tsx index b04d54f..30af24f 100644 --- a/client/components/message/ChatMessage.tsx +++ b/client/components/message/ChatMessage.tsx @@ -1,24 +1,20 @@ import { FC } from "react" +import { ChatMessage } from "../../types" -import ChatBadge from "./ChatBadge" +export interface ChatMessageProps { + message: ChatMessage +} -const ChatMessage: FC = () => { +const ChatMessage: FC = ({ + message: { author, content }, +}) => { return ( -

+

- - - Username + {author}:
- : - - Poggies - -

+ {content} +
) } diff --git a/client/package.json b/client/package.json index 4576fb6..5f30bf2 100644 --- a/client/package.json +++ b/client/package.json @@ -33,6 +33,7 @@ "zustand": "^4.1.2" }, "devDependencies": { + "@faker-js/faker": "^7.6.0", "@sentry/cli": "^2.7.0", "@trivago/prettier-plugin-sort-imports": "^2.0.2", "@types/node": "16.11.6", diff --git a/client/pages/[channel]/index.tsx b/client/pages/[channel]/index.tsx index 1044492..3f666dc 100644 --- a/client/pages/[channel]/index.tsx +++ b/client/pages/[channel]/index.tsx @@ -1,13 +1,10 @@ -import Button from "../../components/common/Button" import ChatMessage from "../../components/message/ChatMessage" import Input from "../../components/common/Input" -import streams from "../../placeholder/GetStreams" import { NextPage } from "next" import BrowseLayout from "../../components/layout/BrowseLayout" +import { createRandomMessage } from "../../placeholder/chatMessages" const ChannelPage: NextPage = () => { - const stream = streams.data[1] - return (
@@ -16,7 +13,7 @@ const ChannelPage: NextPage = () => {
- {stream.user_name} + niku
1:14:32
@@ -27,7 +24,7 @@ const ChannelPage: NextPage = () => {
{new Array(60).fill(0).map((_, i) => ( - + ))}
diff --git a/client/pages/category/[categoryName].tsx b/client/pages/category/[categoryName].tsx deleted file mode 100644 index ac9facc..0000000 --- a/client/pages/category/[categoryName].tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { categories } from "../../placeholder/SearchCategories" - -function ChannelPage() { - const category = categories.data[0] - return ( -
-
-
-
- {category.name} -
-

{category.name}

-
-

- 603K Viewers * 20.8M Followers -

-
-
-
-
-
-
- ) -} - -export default ChannelPage diff --git a/client/placeholder/GetStreams.ts b/client/placeholder/GetStreams.ts deleted file mode 100644 index c36ab97..0000000 --- a/client/placeholder/GetStreams.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { FollowedStreams } from '../types'; - -const streams: FollowedStreams = { - data: [ - { - id: '41375541868', - user_id: '459331509', - user_login: 'auronplay', - user_name: 'auronplay', - game_id: '494131', - game_name: 'Little Nightmares', - type: 'live', - title: 'hablamos y le damos a Little Nightmares 1', - viewer_count: 78365, - started_at: '2021-03-10T15:04:21Z', - language: 'es', - thumbnail_url: 'https://static-cdn.jtvnw.net/previews-ttv/live_user_auronplay-250x250.jpg', - tag_ids: [], - is_mature: false, - }, - { - id: '41375541869', - user_id: '459331510', - user_login: 'xqcow', - user_name: 'xqcow', - game_id: '494131', - game_name: 'Just Chatting', - type: 'live', - title: 'slam', - viewer_count: 56230, - started_at: '2022-09-29T14:04:21Z', - language: 'en', - thumbnail_url: 'https://static-cdn.jtvnw.net/previews-ttv/live_user_xqcow-250x250.jpg', - tag_ids: [], - is_mature: false, - }, - ], - pagination: { - cursor: - 'eyJiIjp7IkN1cnNvciI6ImV5SnpJam8zT0RNMk5TNDBORFF4TlRjMU1UY3hOU3dpWkNJNlptRnNjMlVzSW5RaU9uUnlkV1Y5In0sImEiOnsiQ3Vyc29yIjoiZXlKeklqb3hOVGs0TkM0MU56RXhNekExTVRZNU1ESXNJbVFpT21aaGJITmxMQ0owSWpwMGNuVmxmUT09In19', - }, -}; - -export default streams; diff --git a/client/placeholder/GetUserFollows.ts b/client/placeholder/GetUserFollows.ts deleted file mode 100644 index 0c1a1e4..0000000 --- a/client/placeholder/GetUserFollows.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { UserFollows } from '../types'; - -export const following: UserFollows = { - total: 4, - data: [ - { - from_id: '171003792', - from_login: 'niku', - from_name: 'niku', - to_id: '23161357', - to_name: 'LIRIK', - to_login: 'lirik', - followed_at: '2017-08-22T22:55:24Z', - }, - { - from_id: '171003792', - from_login: 'niku', - from_name: 'niku', - to_id: '23161358', - to_name: 'Cowser', - to_login: 'cowser', - followed_at: '2017-08-22T22:55:24Z', - }, - ], - pagination: { - cursor: 'eyJiIjpudWxsLCJhIjoiMTUwMzQ0MTc3NjQyNDQyMjAwMCJ9', - }, -}; diff --git a/client/placeholder/SearchCategories.ts b/client/placeholder/SearchCategories.ts deleted file mode 100644 index 034c68a..0000000 --- a/client/placeholder/SearchCategories.ts +++ /dev/null @@ -1,12 +0,0 @@ -export const categories = { - data: [ - { - id: '33214', - name: 'Just Chatting', - box_art_url: 'https://static-cdn.jtvnw.net/ttv-boxart/509658-144x192.jpg', - }, - ], - pagination: { - cursor: 'eyJiIjpudWxsLCJhIjp7IkN', - }, -}; diff --git a/client/placeholder/chatMessages.ts b/client/placeholder/chatMessages.ts new file mode 100644 index 0000000..c8ff9e3 --- /dev/null +++ b/client/placeholder/chatMessages.ts @@ -0,0 +1,9 @@ +import { ChatMessage } from "../types" +import { faker } from "@faker-js/faker" + +export const createRandomMessage = (): ChatMessage => { + return { + author: faker.name.firstName(), + content: faker.lorem.words(10), + } +} diff --git a/client/pnpm-lock.yaml b/client/pnpm-lock.yaml index 304d2de..f60fc76 100644 --- a/client/pnpm-lock.yaml +++ b/client/pnpm-lock.yaml @@ -1,6 +1,7 @@ lockfileVersion: 5.4 specifiers: + '@faker-js/faker': ^7.6.0 '@headlessui/react': ^1.7.3 '@heroicons/react': ^2.0.12 '@hookform/resolvers': ^2.9.8 @@ -48,6 +49,7 @@ dependencies: zustand: 4.1.2_react@17.0.2 devDependencies: + '@faker-js/faker': 7.6.0 '@sentry/cli': 2.7.0 '@trivago/prettier-plugin-sort-imports': 2.0.4_prettier@2.7.1 '@types/node': 16.11.6 @@ -376,6 +378,11 @@ packages: - supports-color dev: true + /@faker-js/faker/7.6.0: + resolution: {integrity: sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==} + engines: {node: '>=14.0.0', npm: '>=6.0.0'} + dev: true + /@headlessui/react/1.7.3_sfoxds7t5ydpegc3knd667wn6m: resolution: {integrity: sha512-LGp06SrGv7BMaIQlTs8s2G06moqkI0cb0b8stgq7KZ3xcHdH3qMP+cRyV7qe5x4XEW/IGY48BW4fLesD6NQLng==} engines: {node: '>=10'} diff --git a/client/types/index.ts b/client/types/index.ts index f6e29f5..cff2536 100644 --- a/client/types/index.ts +++ b/client/types/index.ts @@ -1,52 +1,4 @@ -export interface Pagination { - cursor: string; -} - -export interface UserFollow { - followed_at: string; - from_id: string; - from_login: string; - from_name: string; - to_id: string; - to_login: string; - to_name: string; -} - -export interface UserFollows { - total: number; - data: UserFollow[]; - pagination: Pagination; -} - -export interface Stream { - game_id: string; - game_name: string; - id: string; - language: string; - started_at: string; - tag_ids: string[]; - thumbnail_url: string; - title: string; - type: string; - user_id: string; - user_login: string; - user_name: string; - viewer_count: number; - is_mature: boolean; -} - -export interface FollowedStreams { - data: Stream[]; - pagination: Pagination; -} - -export interface Category { - id: string; - name: string; - box_art_url: string; -} - -export interface SearchCategories { - data: Category[]; - pagination: Pagination; +export interface ChatMessage { + author: string + content: string } diff --git a/dist/index.html b/dist/index.html deleted file mode 100644 index d80c013..0000000 --- a/dist/index.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - Vite + React + TS - - - - -
- - -