Added faker and removed some placeholder data

client/components/message/ChatBadge.tsx

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-
-const ChatBadge: FC = () => {
-  return <span className="w-5 h-5 rounded-sm bg-pink-300 inline-block align-middle" />;
-};
-
-export default ChatBadge;

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<ChatMessageProps> = ({
+  message: { author, content },
+}) => {
   return (
-    <p className="mx-2 p-2 hover:bg-neutral-700 text-sm rounded-md">
+    <div className="mx-2 p-2 hover:bg-neutral-700 text-sm rounded-md">
       <div className="space-x-1 inline">
-        <ChatBadge />
+        <span className="align-middle">{author}: </span>
-        <ChatBadge />
+      </div>
-        <span className="align-middle">Username</span>
+      <span className="break-all align-middle">{content}</span>
     </div>
-      <span className="align-middle">: </span>
-      <span className="break-all align-middle">
-        <img
-          src="https://cdn.7tv.app/emote/60afbe0599923bbe7fe9bae1/2x"
-          alt="Poggies"
-          className="inline w-7 h-7"
-        />
-      </span>
-    </p>
   )
 }
 

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",

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 (
     <BrowseLayout>
       <div className="flex-1 flex flex-row">
@@ -16,7 +13,7 @@ const ChannelPage: NextPage = () => {
           <div className="flex flex-row p-2 items-center justify-between">
             <div className="flex flex-row items-center space-x-3">
               <span className="w-8 h-8 bg-yellow-300 rounded-full" />
-              <span className="font-bold">{stream.user_name}</span>
+              <span className="font-bold">niku</span>
             </div>
             <div>1:14:32</div>
           </div>
@@ -27,7 +24,7 @@ const ChannelPage: NextPage = () => {
           </div>
           <div className="flex-1 overflow-scrollbar">
             {new Array(60).fill(0).map((_, i) => (
-              <ChatMessage key={i} />
+              <ChatMessage message={createRandomMessage()} key={i} />
             ))}
           </div>
           <div className="m-2">

client/pages/category/[categoryName].tsx

@@ -1,26 +0,0 @@
-import { categories } from "../../placeholder/SearchCategories"
-
-function ChannelPage() {
-  const category = categories.data[0]
-  return (
-    <div className="flex-1 flex flex-row">
-      <div className="bg-neutral-900 flex-1 text-gray-100">
-        <div className="max-w-[200rem] mx-12 mt-12">
-          <div className="flex flex-row items-center space-x-4">
-            <img src={category.box_art_url} alt={category.name} />
-            <div className="">
-              <h1>{category.name}</h1>
-              <div>
-                <p>
-                  <span>603K</span> Viewers * <span>20.8M</span> Followers
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ChannelPage

client/placeholder/GetStreams.ts

@@ -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;

client/placeholder/GetUserFollows.ts

@@ -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',
-  },
-};

client/placeholder/SearchCategories.ts

@@ -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',
-  },
-};

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),
+  }
+}

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'}

client/types/index.ts

@@ -1,52 +1,4 @@
-export interface Pagination {
+export interface ChatMessage {
-  cursor: string;
+  author: string
-}
+  content: 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;
 }

dist/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="/assets/index.08ff9814.js"></script>
-    <link rel="stylesheet" href="/assets/index.3fce1f81.css">
-  </head>
-  <body>
-    <div id="root"></div>
-    
-  </body>
-</html>