User post list

[2blo]

Needed for debugging prod etc

• [x] grid
• [x] sort by date
• [ ] #43
• [x] delete post
• [x] remove blue link formatting
• [x] disable delete button for other users

out of scope

• edit post - relies on upload post page
• delete inside post
• edit user name / store name in prisma account or user?

[2blo]

wds grid resize vs more rows

[2blo]

undefined api key problem - client side query? - just make a trpc endpoint for it? do it on initial upload and store link in db to reduce nbr if calls?

trpc

• double calls
• you can fetch all videos at once - still need to do it from backend due to api key
  • can you access the video ids inside listByUser ?

initial upload --> db

• images dont need thumbnail (just use the same url redundantly)
• leave image thumbnails as null
• have Videos + Images tables - kinda good if we add more specific supports like initial audio track
• bad - user cannot change thumbnail - wont be needed often - can include sync button

the thumbnail urls are the same each time,

• sometimes maxres is not available: await axios.get( https://i.ytimg.com/vi/lHngf-CKCzk/maxresdefault.jpg ); --> tRPC failed on post.listByUser: TRPCError: Request failed with status code 404
• check by width
• just use hqdefault

[2blo]

example res:

etho video:

  thumbnails: {
    default: {
      url: 'https://i.ytimg.com/vi/lHngf-CKCzk/default.jpg',
      width: 120,
      height: 90
    },
    medium: {
      url: 'https://i.ytimg.com/vi/lHngf-CKCzk/mqdefault.jpg',
      width: 320,
      height: 180
    },
    high: {
      url: 'https://i.ytimg.com/vi/lHngf-CKCzk/hqdefault.jpg',
      width: 480,
      height: 360
    }
  },

terminal:

  thumbnails: {
    default: {
      url: 'https://i.ytimg.com/vi/gFcDolkdB9A/default.jpg',
      width: 120,
      height: 90
    },
    medium: {
      url: 'https://i.ytimg.com/vi/gFcDolkdB9A/mqdefault.jpg',
      width: 320,
      height: 180
    },
    high: {
      url: 'https://i.ytimg.com/vi/gFcDolkdB9A/hqdefault.jpg',
      width: 480,
      height: 360
    },
    standard: {
      url: 'https://i.ytimg.com/vi/gFcDolkdB9A/sddefault.jpg',
      width: 640,
      height: 480
    },
    maxres: {
      url: 'https://i.ytimg.com/vi/gFcDolkdB9A/maxresdefault.jpg',
      width: 1280,
      height: 720
    }
  },

[2blo]

undefined user id "dont use isReady to conditionally render on server" wanted behavior:

• show empty thumbnails when waiting for id + trpc
• bad id -> 404

trpc with ssprops id should be undefined, fir SEO

• what about and post/index.js for SEO? I don't really want a general /post/ page

• wrong id + isReady --> 404

• trpc error + not ready --> placeholder

• empty id trpc error

ssr for trpc:

• wait for request response on server, rerender dom there?
  • how is that different from general SSR

fuck it, the error only appears in dev anyway

conclusion

1. trpc should not return "empty" thumbnails
2. impossible call trpc inside use effect? at least with useQuery
3. cannot call useQuery conditionally
4. should probably not give "default"-id
5. we shouldnt ssr user specific posts, but the "scaffold" should be - dont know if we do this currently,

[2blo]

delete post

• data: arg issue
• unique where changelog - started working after restarting vs code, had done npx prisma generate and push before too
• useContext should let you update usequery after a delete
• delete exception
• prisma in backend does not work without await; await ctx.prisma.post.delete({...

invalidate does not work as it should yet: "If the query is currently being rendered via useQuery or related hooks, it will also be refetched in the background"

• you can use the data from onsuccess to delete the correct object, but it is not super pretty, and we should refetch anyway, especially if you delete from inside the post view. you can make a reusable onsuccess hook
• in any case, we should probably delete immediately on client side for ux - do it with optimistic update
• refetchinterval works, but not refetch yet
• maybe async issue
• usemutation might need to be in the same component

worked by calling all2.refetch(); in onsuccess

[2blo]

modal issue

• if i put it directly in popover or at root, inline, it will work, but ugly - just drill setOpen + delete to onClick
• its own component + jotai?
• try drilling open with forwardref first

solution: put modal as variable in dropdown to access state.