自學寫Web App (半完成Heymandi Topic List + 改Topic 功能) - Day 10

P 牌24個鐘只可以出一個post
琴日post 唔到就偷懶咗日
原本想做chat 先 但諗諗下應該做咗topic list 先



1. 都係搵UI template
有諗過照跟haymandi (下面張圖) 咁另外開一版

但覺得試起上黎會麻煩所以就咁同一版update topic + 禁topic
就揀咗呢個: https://tailwindcomponents.com/component/simple-rounded-text-form

2. 執feed store
加咗getFeeds 同updateFeed function 拎/update Firebase data
暫時hardcode 咗male 先
所以見到2邊send 都係藍色

let getFeeds = () => {
    onValue(ref(db, 'feed/'), (snapshot) => {
        feeds.update(data => snapshot.val());
      });    
}
let updateFeed = (userId, topic) => {
  console.log(userId);
  console.log(topic);
  set(ref(db, 'feed/' + userId), {
    content: topic,
    gender: "male"
  });
}
export {feeds, getFeeds, updateFeed};

3. 執route
主要import 返feed function 同做個subscribe

    getFeeds();
    let feedSub;
    feeds.subscribe(feeds => {
      feedSub = []
      for(let i in feeds) {
        let obj = feeds[i];
        obj.id = i;
        feedSub.push(feeds[i]);
      }
   });

同埋執埋個svelte 嘅loop
拎返feedsub 嘅data 同埋自己唔會睇到自己topic

{#each feedSub as feed}
{#if feed != undefined && feed.id != $user.google.uid }
  <div class="flex items-center m-4 p-4 bg-white border-5 border-gray-200 rounded-lg shadow-sm dark:bg-gray-800">
    {#if feed.gender == "male"}
    <div class="p-3 mr-4 bg-blue-500 text-white rounded-full">
    </div>
    {:else}
    <div class="p-3 mr-4 bg-red-500 text-white rounded-full">
    </div>
    {/if}
    <div>
      <p class="text-sm font-normal text-gray-800">{feed.content}</p>
    </div>
  </div>
{/if}
{/each}

仲有個制做update feed

 <button on:click="{updateFeed($user.google.uid, tempTopic)}" class="px-8 rounded-r-lg bg-yellow-400 text-gray-800 font-bold p-4 uppercase border-yellow-500 border-t border-b border-r">Update</button>

其實個topic list 仲有好多野要搞 e.g. gender, refresh, 揀人match 個d
不過聽日應該試下直接click topic就入chat 咁做埋chat 嘅功能先

差d 漏咗
Firebase 係咁樣的

巴打我覺得你好勁
你係用咩寫?
同埋睇咩教學學識寫?

不如擺上github 比我開pull request

等我搞埋chat page 同做埋ts執執擺上黎
而家真係好亂

Svelte
跟呢個學多 https://svelte.dev/tutorial/basics
同埋google