Forem: Yuko

Favorite Toggle Button with useOptimistic

Yuko — Mon, 02 Sep 2024 07:43:33 +0000

This is an idea of implementing a toggle button with useOptimistic. useOptimistic is a React experimental hook that allows apps to update UI optimistically while the actual state updates with async operation. You can learn more about it with those links.
useOptimistic - React
Data Fetching: Server Actions and Mutations | Next.js

Here is the main code of my component.

    import { useOptimistic, useRef } from 'react'
    import { Button } from './ui/button'
    import { HeartIcon, HeartFilledIcon } from '@radix-ui/react-icons'

    export function FavoriteButton({
      isFavorite,
      placeId,
    }: {
      isFavorite: boolean
      placeId: string
    }) {

      async function formAction(formData: FormData) {
        addOptimisticFavorite(!isFavorite)
        formRef.current?.reset()
        const placeId = formData.get('placeId')
        await fetch(`/api/favorite`, {
          method: 'POST',
          body: JSON.stringify({ placeId }),
        })
      }

      const [optimisticIsFavorite, addOptimisticFavorite] = useOptimistic(
        isFavorite,
        (state) => !state,
      )
      return (
        <form action={formAction} ref={formRef}>
          <input type="hidden" value={placeId} name="placeId" />
          <Button variant="ghost" type="submit" onClick={handleClick}>
            {optimisticIsFavorite ? <HeartFilledIcon /> : <HeartIcon />}
          </Button>
        </form>
      )
    }

optimisticFavorite toggles immediately after users click the button and gets rolled back when the component receives isFavorite whose value is different from optimisticFavorite. Otherwise, optimisticFavorite keeps the client-side state.

In my real code, unfortunately, I needed to deal with two different cases to update isFavorite in my app, which is not ideal, and the code gets a little messy. Please visit the link below if you’re interested.
ai-gourmet-navigator/src/components/favorite-button.tsx at main ·…

That’s it! Thank you for reading :)

Storybook ❎ NextAuth: How to set mock auth session

Yuko — Mon, 02 Sep 2024 07:02:33 +0000

This is my memo when I write stories that change depending on session states.

· 1. Create a mock provider
· 2. Add the provider to decorators at preview.tsx
· 3. Modify parameters in stories
∘ A. Set a default state
∘ B. Set a custom state

1. Create a mock provider

    // ./storybook/mock-session-provider.tsx

    import React from 'react'
    import { SessionProvider } from 'next-auth/react'
    export const MockSessionProvider = ({ session, children }) => {
      return <SessionProvider session={session}>{children}</SessionProvider>
    }

2. Add the provider to decorators at preview.tsx

    import React from 'react'
    import '../src/styles/globals.css'
    import type { Preview } from '@storybook/react'
    import { MockSessionProvider } from './mock-session-provider'

    import '../src/styles/globals.css'

    const preview: Preview = {
      parameters: {
        controls: {
          matchers: {
            color: /(background|color)$/i,
            date: /Date$/i,
          },
        },
        nextjs: {
          appDirectory: true,
        },
      },
      // Here!
      decorators: [
        (Story, { parameters }) => {
          const { session } = parameters
          return (
            <MockSessionProvider session={session}>
              <Story />
            </MockSessionProvider>
          )
        },
      ],
    }

    export default preview

3. Modify parameters in stories

A. Set a default state

You can set session parameters in each component’s meta object to apply all stories for the component.

    const meta = {
      title: 'Components/InfoWindowCard',
      component: InfoWindowCard,
      parameters: {
        session: {
          status: 'authenticated',
        },
      },
    } satisfies Meta<typeof InfoWindowCard>

B. Set a custom state

You can also set a custom state individually.

    export const Logout: Story = {
      args: {
        ...BASE_PROPS,
        isMap: false,
      },
      parameters: {
        session: {
          status: 'unknown',
        },
      },
    }

That’s it! Thank you for reading :)

The whole code is available here.
The oritinal ariticle is here

[LeetCode] Visualization of Reverse Linked List

Yuko — Tue, 02 Jul 2024 02:52:19 +0000

This is my memo when I solved 206. Reverse Linked List.

What we want

This is pretty simple. We want to re-order a provided linked list in the opposite direction.

Strategy

Go through each element and replace the value of next from the next element’s address with the previous element’s.

This requires us to handle two operations: 1) changing the value of next of each element and 2) tracking which element we’re updating and what element comes next.

Code

I think there are two tricky things when it comes to coding: 1) storing the next element to modify before updating curr.next, and 2) returning prev instead of curr as we update curr at the last of the while loop.



    /**
     * Definition for singly-linked list.
     * class ListNode {
     *     val: number
     *     next: ListNode | null
     *     constructor(val?: number, next?: ListNode | null) {
     *         this.val = (val===undefined ? 0 : val)
     *         this.next = (next===undefined ? null : next)
     *     }
     * }
     */

    function reverseList(head: ListNode | null): ListNode | null {
        let [prev, curr] = [null, head]
        while(curr){
          const next = curr.next
          curr.next = prev
          prev = curr
          curr = next
        }
        return prev

    };

[LeetCode] Concatenation of Array with Modular Arithmetic

Yuko — Sat, 04 May 2024 05:17:51 +0000

This is a memo of when I solved 1929. Concatenation of Array.

Question

You're given an array, nums, of arbitrary length. Your task is to return a new array, ans, that is twice as long as nums. The new array, ans, should satisfy the following conditions: ans[i] == nums[i] and ans[i + n] == nums[i], where 0 ≤ i < n.

Modular Arithmetic

Modular arithmetic is a mathematical system that operates on integers by focusing on the remainder. The expression, x mod N, asks for the remainder of x when divided by N. For example, 13 mod 5 results in 3, because 3 is the remainder when 13 is divided by 3. a ≡ b (mod N) means that they share the same remainder when divided by N — for instance, 17 ≡ 8 (mod 3). In other words, modular arithmetic is a system that groups integers with their reminders.

Solution Approach

Let’s say the nums = [1, 2, 3]. The ans should be [1, 2, 3, 1, 2, 3] = [nums[0], nums[1], nums[2], nums[0], nums[1], nums[2]]. Therefore in general, we want to get an array of [nums[0], nums[1],,,, nums[nums.lenght-1], nums[0], nums[1],,,, nums[nums.lenght-1]].

Here is the time to employ modular. Let’s set i as an arbitral index of nums, N as the length of nums, and idx as an arbitral index of ans. Then we can get idx with i mod N. With the example above, 0 mod 3 = 3 mod 3 = 0, 1 mod 3 = 4 mod 3 = 1, 2 mod 3 = 5 mod 3 = 2.

Implementation

% is the operator that gets reminders in JavaScript.

    /**
     * @param {number[]} nums
     * @return {number[]}
     */
    var getConcatenation = function(nums) {
        let ans = []
        for(let i = 0; i < nums.length * 2 ; i ++){
            const idx = i % nums.length // i mod nums.length
            ans.push(nums[idx])
        }
        return ans
    };

Generalization

What I like about the solution most is that it’s easy to generalize the number of concatenations. The question asks to repeat two times, but we can easily modify the code to repeat any number of times you want.

    /**
     * @param {number[]} nums
     * @param {number} x // the number of repetition
     * @return {number[]}
     */
    var getConcatenation = function(nums, x) {
        let ans = []
        for(let i = 0; i < nums.length * x; i ++){
            const idx = i % nums.length // i mod nums.length
            ans.push(nums[idx])
        }
        return ans
    };

⚠️ This is not a recommended answer, but I just wanted to say there is a way to utilize Math. You can find a model answer here: https://youtu.be/68isPRHgcFQ

Ref

Modular Arithmetic | Brilliant Math & Science Wiki

The original article is here

Exploring “Data Fetching with React Server Components” with Next.js

Yuko — Fri, 26 Apr 2024 07:01:07 +0000

This is a brief takeaway of what I learned in this YouTube video titled “Data Fetching with Server Components.” I also tried Next.js to see what features we already have.

Motivation
- Issue
- React Team’s Solution: Put data fetching logic on the server
Server Side Rendering vs React Server Components
- Server Side Rendering (SSR)
- React Server Components
Server Component Features
- Zero Effect on the Bundle Size
- Direct Access to the Backend Resources
- Automatic Code Splitting
- Server Components require users’ decision
- Server Components provide modern UX with a server-driven mental model
Ref

Motivation

Issue

The React team wants to create apps with good user experience, cheap maintenance, and fast performance co-existing.

In general, having two of them in one project is comparatively more straightforward, but having all of them is pretty challenging.

Example: Good user experience and fast performance

With the code snippet, the app can render all components simultaneously and doesn’t suffer from the request waterfall, as it gets all data in one request. However, this code sacrifices the cheap maintenance because each component's API responses are coupled.

    function ArtistPage({artistId}){
    const stuff = fetchAllTheStuffJustInCase()
     return (
      <ArtistDetails artistId={artistId} details={stuff.details} />
       <TopTracks artistId={artistId} details={stuff.topTracks} />
       <Discography artistId={artistId} details={stuff.discography} />
      </ArtistDetails>
     )
    }

    // https://youtu.be/TQQPAU21ZUw&t=4m12s

🗒️ This code reminds me of the Easier to Change (ETC) principle provided in *The Pragmatic Programmer*. According to the book, “Good design is easier to change than bad design.” It also says, “Decoupled code is easier to change.”

The code below can reduce the maintenance cost but causes a so-called request waterfall, sacrificing the performance speed. In addition, the app no longer renders all components simultaneously, and now they all depend on each request order.

    // Ideal way
    function ArtistPage({artistId}){
     return (
      <ArtistDetails artistId={artistId} />
       <TopTracks artistId={artistId} />
       <Discography artistId={artistId} />
      </ArtistDetails>
     )
    }

    function ArtistDetails({artistId}) {
     const details = fetchDetails(artistId)
     // ...
    }

    function TopTracks({artistId}) {
     const topTracks = fetchTocpTracks(artistId)
     // ...
    }

    function Discography({artistId}) {
     const discography = fetchDiscograhy(artistId)
     // ...
    }

    // https://youtu.be/TQQPAU21ZUw&t=5m20s

🗒 I like this part because I can sense the strong eagerness to break through what we call impossible.

React Team’s Solution: Put data fetching logic on the server

Server Side Rendering vs React Server Components

Server Side Rendering (SSR)

SSR is a technique that serves an initial HTML when the first page loads. Once the first HTML is loaded, it is required to download/parse/execute Client Components.

React Server Components

React Server Components are not interactive with the client side. Client Components always take responsibility for interacting with users and trigger re-fetch Server Components trees corresponding to the user’s actions. Notably, the client-side state is preserved when the re-fetch. We can do this with Server Components because Server Components don’t render to HTML, but they render into a special format.

Here is an example of where the client states are preserved when the re-fetch with Next.js. The search input appears only when the search input state is true, and the to-do list is filtered by the filter query controlled on the server side.

cf) Here is how Next.js explains the interaction between Server Components and Client Components. Next.js calls the special format React Server Component Payload.
React Foundations: Server and Client Components | Next.js

Server Component Features

Zero Effect on the Bundle Size

We can reduce dependencies downloaded to the client by moving some heavy dependencies components to the server.

⚠️ Not exactly HTML files (as Server Components render into a special format), but I mention only HTML here for the sake of ease.

Direct Access to the Backend Resources

Because Server Components are rendered on the server side, they can access the server-side resources directly.

    // Example 1

    import { resolve, join } from 'path';
    import { readdir, readFile } from 'react-fs';
    import marked from 'marked';

    const folder = resolve(__dirname + '/../posts');

    function Blog() {
     return readdir(folder).map(name => 
      <article key={name}>
       {/* Access the file system directly without creating any API */}
       {marked(readFile(join(folder, file), 'utf8'))} 
      </articke>
     );
    }

    // https://youtu.be/TQQPAU21ZUw&t=37m57s

    // Example 2

    import marked from 'marked';
    import { db } from './db';

    function Blog() {
     return db.posts.getAll().map(post => 
      <article key={post.id}>
       {marked(post.html)}
      </article>
     )
    }

    // https://youtu.be/TQQPAU21ZUw&t=38m05s

Automatic Code Splitting

Server components allow for the loading of only the required code. This means that server components are not downloaded to the client, and even client components that are not being used do not need to be downloaded.

    // Example

    import EditToobar from './EditToolbar.client';

    function Comment({ comment, currentUser }) {
     const canEdit = (
      currentUser.isAdmin ||
      currentUser.id === comment.author.id
     );
     return (
      <Box>
      {/* EditToonar is downloaded only when canEdit === true */}
       {canEdit && <EditToolbar />}
       <p>{comment.text}</p>
      </Box>
     )
    }

    // https://youtu.be/TQQPAU21ZUw&t=41m25s

This is questionable with Next.js, as I found client components not rendered in the initial render when I inspected the source after running npm run build.

Server Components require users’ decision

Server Components let you decide the Client and Server Components tradeoff for every concrete use case.
Rendering: Composition Patterns | Next.js

🗒️ I think this is a double-edged sword feature as we have to understand the ins and outs of React, including both Server Components and Client Components (and Shared Components), to decide which to use in each case. In other words, it all depends on developers to make the most of the server components or to make them waste treasures.

Server Components provide modern UX with a server-driven mental model

Server Components enable developers to create modern and app-like user interfaces in an old-school way.

    // Example

    import SearchInput from './SearchInput.client';

    function SearchResults({searchText}) {
     const results = fetch('/search?q' + searchText).json();
     return (
      <>
       {/*This component triggers re-fetch of the server tree*/}
       <SearchInput /> 
       <ul>
        {results.map(result => 
         <li key={result.id}>{result.text}</li>
        )}
       </ul>
      </>
     )
    }

    // https://youtu.be/TQQPAU21ZUw&t=44m45s

Ref

Introducing Zero-Bundle-Size React Server Components - React
rfcs/text/0188-server-components.md at main · reactjs/rfcs

The whole demo code is available here.
original article

A story when I asked ChatGPT to implement tailwindCSS for me

Yuko — Wed, 12 Jul 2023 05:46:30 +0000

In this article, I will provide some conversations with ChatGPT and their results.

First attempt

Prompt: I want to modify tailwindcss className to make it nicer. I’ll put all components and pages below. So I want you to style with a consistent design theme. Since this is a twitter-ish app, I want to mimic Twitter stylings

I provided all components under the prompt and below is the result.

Second attempt

I tried asking for their solutions with more concrete directions.

Also instead of having a Link at the bottom, I want to put navigation in the Header component

    // Result
    // Header.js
    import React from "react";
    import Link from "next/link";

    const Header = ({ title }) => {
      return (
        <header className="flex justify-between items-center mb-8">
          <h1 className="text-5xl font-extrabold tracking-tight text-blue-700 sm:text-6xl">
            {title}
          </h1>
          <nav>
            <ul className="flex space-x-4">
              <li>
                <Link href="/">Home</Link>
              </li>
              <li>
                <Link href="/my-page">My Page</Link>
              </li>
            </ul>
          </nav>
        </header>
      );
    };
    export default Header;

I worked other than padding issue (9/10).

(Code of TiwtterItem.tsx)
Here, instead of text, I want to add delete icon and put it light side

    // Result
    import { Trash2 } from 'react-feather';

    function TweetItem({ tweet }: TweetItemProps) {
      const { data: sessionData } = useSession();
      const mutation = api.tweet.delete.useMutation();
      const handleDelete = () => {
        mutation.mutate({ id: tweet.id });
      };

      return (
        <div className="rounded-lg bg-white p-4 shadow-md">
          <p className="text-lg font-semibold text-blue-500">
            {tweet.user.name} - {tweet.createdAt.toDateString()}
          </p>
          <p className="text-gray-700">{tweet.content}</p>
          {sessionData && (
            <button className="text-red-500" onClick={handleDelete}>
              <Trash2 size={18} /> {/* Replace the text with the delete icon */}
            </button>
          )}
        </div>
      );
    }

    export default TweetItem;

Unfortunately, this didn’t work as the use of icons was incorrect (0/10).
FYI: here is the correct way of icon usage. Actually, ChatGTP’s answer was somewhat close.

    import React from "react";
    import { useSession } from "next-auth/react";
    import FeatherIcon from "feather-icons-react";
    import { type RouterOutputs } from "~/utils/api";
    import { api } from "~/utils/api";

    type ArryItems<T> = T extends (infer Item)[] ? Item : T;
    type TweetItemProps = ArryItems<RouterOutputs["tweet"]["oneUser"]>;

    function TweetItem({ tweet }: { tweet: TweetItemProps }) {
      const { data: sessionData } = useSession();

      return (
        <div className="w-full rounded-lg bg-white p-4 shadow-md">
          <p className="text-base text-sm font-semibold text-gray-600">
            <span className="font-semibold text-blue-500">{tweet.user.name}</span> -{" "}
            {tweet.createdAt.toDateString()}
          </p>

          <div className="w-100 mb-2 flex items-center justify-between">
            <p className="text-lg text-gray-700">{tweet.content}</p>
            {sessionData && (
              <button className="text-blue-500" onClick={handleDelete}>
                <FeatherIcon size={18} icon="trash-2" />
              </button>
            )}
          </div>
        </div>
      );
    }

    export default TweetItem;

Can you make this header component responsive by having a hamburger menu for navigation elements when the screen size is small? (code of the Header components)

Looks good! Surprisingly they gave me a blue hamburger menu. But the stylings for openMenu status was a little ugly and I gave up to have the hamburger menu(8/10).

Final results

Here is the final result after I modified some stylings manually. What I did are a font size change, padding and margin modification, and width updates for tweets and form components.

Discussion

They have a lot of knowledge and can help you understand important ideas. However, from my observations, it appears that ChatGPT may not excel in making real-time decisions based on the current circumstances although I am not familiar with the inner workings of ChatGPT.

This means they have trouble analyzing the current situation and using their knowledge to find the best solution. So, if you want information about a specific topic, they can give you a good answer. But if you need help with something you are doing right now, their answers may not be very helpful.

Contrarily, we have the potential to become great friends if we actively engage in analyzing the present situation and determine the necessary knowledge to effectively address and resolve it.

One last think I want to mention is that sometimes their knowledge is not up to date. For example, when it comes to Next.js, it is no longer necessary to wrap tags with , even though ChatGPT might suggest doing so.

That’s it! Let me know if you have cool prompts to work with ChatGPT :)
The original article is here

How to setup Prisma with your local PostgreSQL

Yuko — Wed, 12 Jul 2023 05:40:46 +0000

This is my memo when I tried t3 app with PostgreSQL for the first time.

Pre-requirements: install postgresql
OS: macOS

psql postgres to enter postgres
Create an user with CREATEDB permission: CREATE ROLE <username> WITH LOGIN PASSWORD '<password>' CREATEDB;
go to your app’s root folder
make sure the provide is ‘postgresql’ at prisma/schema.prisma

    datasource db {
        provider = "postgresql"
        url      = env("DATABASE_URL")
    }

Database url has the following structure: postgresql://username:password@localhost:5432/database-name
⚠️ If you don’t use the default port number, replace from 5432 to yours.
npx prisma migrate dev --name initial

Special thanks: https://www.codementor.io/@engineerapart/getting-started-with-postgresql-on-mac-osx-are8jcopb

PostgreSQL 101: From what’s database to basic SQL queries

Yuko — Wed, 12 Jul 2023 05:38:28 +0000

In this article, I will share what I’ve learned about basic knowledge of database and queries with PostgreSQL examples including one of installation processes.

Contents:

What is database?
Work with PostgreSQL
- 1. Install PostgreSQL
- 2. Create Database
- 3. Create tables
- 4. Insert into: How to insert values
- 5. Select: How to get table values
- 6. Alter: How to add another column to an existing table
- 7. Update: How to update existing row values
- 8. Join: How to connect tables
- 9. Delete: How to delete rows
- 10. Drop table: How to delete tables

What is database

A database is an organized collection of structured data stored electronically, typically managed by a DBMS, forming a database system (What is database software?).

There are two main DBMS: Relational databases and NoSQL/Non relational database. I will focus more on relational databases in this article as PostgreSQL is a relational database.

Relational database is consist of tables with columns and rows. Columns hold specific data types and fields store attribute values. Rows represent a collection of related values. Rows can be so called a primary key, an unique identifier and relationships between rows in different tables are established using foreign keys (What is a Relational Database?).

SQL allows us to communicate with relational databases.

**NoSQL/Non relational databases **are databases which store data in a different way from relational databases. There are variety of ways to store data such as document, key-value, wide-column, and graph (What is NoSQL?.

Work with PostgreSQL

1. Install PostgreSQL

Here is a way to download PostgreSQL on MacOS with homebrew.

Preparation

(Optional) Download GUI for PostgreSQL: I chose pgAdmin 4 simply because it’s free (What are the best Mac OS X GUIs for PostgreSQL?)
1. make sure homebrew is updated: brew update
2. confirm that everything is working fine: brew doctor

Installation

brew install postgresql Check the command to start postgresql service. It was brew services start postgresql@14 in my case.

2. Create Database

Start the service: brew services start postgresql@14
You will see a success message like Successfully started ‘postgresql@14’ (label: homebrew.mxcl.postgresql@14)
Create a database: createdb ‘test’
(Optional for GUI) create an user: createuser testuser
(Optional for GUI) open pgAdmin4
(Optional for GUI) Click “Add New Server”

(Optional for GUI) Input the server name (e.g. localhost)

(Optional for GUI) click connection tab
(Optional for GUI) Input database name, user name, and address

9 (Optional for GUI) You will see Explorer

Connect to the database: psql 'test' (and \q to exit)

3. Create tables

Make sure you’ve connected the target database before creating tables.

Syntax:

CREATE TABLE table_name (column_1 datatype, ..., column_n datatype);

# Example
CREATE TABLE users (name text, age smallint, birthday date);

You can find various data types provided by PostgreSQL here.
Chapter 8. Data Types

Then you will find the table with GUI, or you can check with \d command with Terminal.

# Command result

List of relations
 Schema | Name  | Type  |    Owner     
--------+-------+-------+--------------
 public | users | table | ownername
(1 row)

4. Insert into: How to insert values

Syntax:

INSERT INTO table_name (column_1, ..., column_n) VALUES (value_1, ... value_n);

# Example
INSERT INTO users (name, age, birthday) VALUES ('Hermione', 10, '1979-09-19');

5. Select: How to get table values

Basic syntax:

SELECT column_1, ..., column_n FROM table_name;

# Example1
SELECT name, age, birthday FROM users;

# Result1
 name     | age |  birthday  
----------+-----+------------
 Hermione |  10 | 1979-09-19

# Example2
SELECT name FROM users;

# Result2
   name   
----------
 Hermione

When you want to select all columns:

SELECT * FROM table_name;

# Example
SELECT * FROM users;

# Result
 name     | age |  birthday  
----------+-----+------------
 Hermione |  10 | 1979-09-19

You can find some conditional selections:
SQL WHERE Clause
SQL ORDER BY Keyword

Also we have some SQL functions:
SQL COUNT(), AVG() and SUM() Functions

6. Alter: How to add another column to an existing table

Syntax:

ALTER TABLE table_name ADD column_name datatype;

# Example
ALTER TABLE users ADD house text;

# Result
   name   | age |  birthday  | house 
----------+-----+------------+-------
 Hermione |  10 | 1997-09-19 | 
 Ron      |  10 | 1980-03-01 |

7. Update: How to update existing row values

Syntax:

UPDATE table_name SET column_name1 = column_value1 WHERE column_name2 = column_value2;

#Example
UPDATE users SET house = 'Gryffindor' WHERE name = 'Hermione';

# Result
   name   | age |  birthday  |   house    
----------+-----+------------+------------
 Ron      |  10 | 1980-03-01 | 
 Hermione |  10 | 1997-09-19 | Gryffindor

8. Join: How to connect tables

Syntax:

SELECT * FROM table1_name JOIN table2_name ON table1_name.primary_key = table1_name.foreign_key

Suppose we have tier table below and want to get users information with rank data:

CREATE TABLE tier (id serial NOT NULL PRIMARY KEY, rank text, name text UNIQUE NOT NULL);

SELECT * FROM tier
 id | rank |   name   
----+------+----------
  1 | s    | Hermione
  2 | s    | Ron
  3 | s    | Harry
  4 | a    | Draco

Then the SQL query will be:

SELECT name, age, birthday, house, rank FROM users JOIN tier ON users.name = tier.name;

# Result
   name   | age |  birthday  |   house    | id | rank |   name   
----------+-----+------------+------------+----+------+----------
 Hermione |  10 | 1997-09-19 | Gryffindor |  1 | s    | Hermione
 Ron      |  10 | 1980-03-01 | Gryffindor |  2 | s    | Ron
 Harry    |  10 | 1980-07-31 | Gryffindor |  3 | s    | Harry
 Draco    |  10 | 1980-06-05 | Slytherin  |  4 | a    | Draco

9. Delete : How to delete rows

Syntax:

DELETE FROM table_name WHERE your conditoin;

# Example
DELETE FROM users WHERE name='Voldemort';

10. Drop table: How to delete tables

Syntax:

DROP TABLE table_name;

# Example
DROP TABLE users;

That’s it! Thank you for reading :)
The original article is here

tRPC 102: Subscription/Web Socket

Yuko — Wed, 12 Jul 2023 05:28:17 +0000

This is my memo when I implemented a subscription with tRPC along with the official documents. I also referred to the code example provided in the document.

1. Add onUpdate subscription

    // src/server/api/routers/tweet.ts
    import { EventEmitter } from "events";
    import { z } from "zod";
    import { observable } from "@trpc/server/observable";
    import { type Tweet } from "@prisma/client";
    import {
      createTRPCRouter,
      publicProcedure,
      protectedProcedure,
    } from "~/server/api/trpc";

    // create a global event emitter (could be replaced by redis, etc)
    const ee = new EventEmitter();

    export const tweetRouter = createTRPCRouter({
      ...others

      onUpdate: publicProcedure.subscription(() => {
        // return an `observable` with a callback which is triggered immediately
        return observable<Tweet>((emit) => {
          const onAdd = (data: Tweet) => {
            // emit data to client
            emit.next(data);
          };
          // trigger `onAdd()` when `add` is triggered in our event emitter
          ee.on("add", onAdd);

          // unsubscribe function when client disconnects or stops subscribing
          return () => {
            ee.off("add", onAdd);
          };
        });
      }),
    });

2. Creating a WebSocket-server

    // src/server/wsServer.ts
    import { applyWSSHandler } from "@trpc/server/adapters/ws";
    import ws from "ws";
    import { appRouter } from "./api/root";
    import { createTRPCContext } from "./api/trpc";

    const wss = new ws.Server({
      port: 3000,
    });
    const handler = applyWSSHandler({ wss, router: appRouter, createTRPCContext });

    wss.on("connection", (ws) => {
      console.log(`➕➕ Connection (${wss.clients.size})`);
      ws.once("close", () => {
        console.log(`➖➖ Connection (${wss.clients.size})`);
      });
    });
    console.log("✅ WebSocket Server listening on ws://localhost:3001");

    process.on("SIGTERM", () => {
      console.log("SIGTERM");
      handler.broadcastReconnectNotification();
      wss.close();
    });

3. Setting TRPCClient to use WebSockets

    // src/utils/api.ts
    import {
      httpBatchLink,
      loggerLink,
      wsLink, // ADD
      createWSClient, // ADD
    } from "@trpc/client";
    import { createTRPCNext } from "@trpc/next";
    import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
    import superjson from "superjson";
    import { type AppRouter } from "~/server/api/root";

    // ADD: create persistent WebSocket connection
    const wsClient = createWSClient({
      url: `ws://localhost:3000`,
    });

    const getBaseUrl = () => {
      if (typeof window !== "undefined") return ""; 
      if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; 
      return `http://localhost:${process.env.PORT ?? 3000}`; 

    export const api = createTRPCNext<AppRouter>({
      config() {
        return {
          transformer: superjson,
          links: [
            loggerLink({
              enabled: (opts) =>
                process.env.NODE_ENV === "development" ||
                (opts.direction === "down" && opts.result instanceof Error),
            }),
            httpBatchLink({
              url: `${getBaseUrl()}/api/trpc`,
            }),
            // ADD weLink here
            wsLink({
              client: wsClient,
            }),
          ],
        };
      },
      ssr: false,
    });

4. Use subscription

    import { useEffect, useState } from "react";
    import Head from "next/head";
    import { api } from "~/utils/api";
    import TweetItem from "~/components/TweetItem";
    import { type RouterOutputs } from "~/utils/api";
    type Tweets = RouterOutputs["tweet"]["all"];

    export default function Home() {
      const { data } = api.tweet.all.useQuery<Tweets>();
      // ADD
      const [tweets, setTweets] = useState<Tweets>([]);

     // ADD
      api.tweet.onUpdate.useSubscription(undefined, {
        onData(tweet) {
          setTweets((prev) => [tweet, ...prev]);
        },
      });

      useEffect(() => {
        if (data) {
          setTweets(data);
        }
      }, [data]);

      return (
        <>
          <Head>
            <title>My T3 Twitter Lite</title>
            <meta
              name="description"
              content="Very lite Twitter-ish app generated by create-t3-app"
            />
            <link rel="icon" href="/favicon.ico" />
          </Head>
          <div className="container mx-auto px-4 py-16">
            <div className="mt-8 flex w-full flex-col items-center gap-4">
              {tweets ? (
                tweets.length === 0 ? (
                  <p className="text-2xl text-blue-700">No tweets found</p>
                ) : (
                  <>
                    {tweets.map((tweet) => (
                      <TweetItem tweet={tweet} key={tweet.id} />
                    ))}
                  </>
                )
              ) : (
                <p className="text-2xl text-blue-700">Loading...</p>
              )}
            </div>
          </div>
        </>
      );
    }

Details about more basic implementation of tRPC is here.
Code is available here.

tRPC 101: Concepts and some code experiments with create T3 app

Yuko — Wed, 12 Jul 2023 05:25:33 +0000

tRPC 101: Concepts and some code experiments with create T3 app

In this article, I will share what I’ve learned about tRPC with an example app built with create T3 app.

Concept

RPC stands for “Remote Procedure Call,” and tRPC enables calling functions on a server computer from a client computer (It’s just functions). Instead of manually making HTTP requests to specific URLs and handling responses, tRPC provides a type-safe functions by abstracting away the underlying HTTP communication (Don’t think about HTTP/REST implementation details). With tRPC, developers can focus on writing code and interacting with type-safe functions rather than managing network communication.

Vocabulary

Here are the official documents’ explanation of main terminologies.

Procedure ↗: API endpoint — can be a query, mutation, or subscription.
Query: A procedure that gets some data.
Mutation: A procedure that creates, updates, or deletes some data.
Subscription: A procedure that creates a persistent connection and listens to changes.
Router ↗: A collection of procedures (and/or other routers) under a shared namespace.
Context ↗: Stuff that every procedure can access. Commonly used for things like session state and database connections.
Middleware ↗: A function that can run code before and after a procedure. Can modify context.
Validation ↗:”Does this input data contain the right stuff?”

This is my image of tRPC ecosystem.

eConcepts | tRPC

Try tRPC

Overview
This is a high level overview of my app: A very lite version of Twitter where you can view all tweets and post/delete your tweets.

Schema
These are schema for tweet and users (How to setup Prisma?, What’s PostgreSQL?).

model User {
    id            String    @id @default(uuid())
    name          String?
    email         String?   @unique
    emailVerified DateTime?
    image         String?
    accounts      Account[]
    sessions      Session[]
    tweets        Tweet[]
}

model Tweet {
    id        Int      @id @default(autoincrement())
  content   String
  createdAt DateTime @default(now())
  userId    String
  user      User     @relation(fields: [userId], references: [id], onDelete: Cascade)
}

For more information for nextAuth related scheme: Models.

Setup tRPC

I will explain the process along with the official documents recipe.

1️⃣ Install deps (✅ done by T3 app)
2️⃣ Enable strict mode (✅ done by T3 app)
3️⃣ Create a tRPC router



    // src/server/api/routers/tweet.ts
    // Create a router

    import { z } from "zod";
    import {
      createTRPCRouter,
      publicProcedure,
      protectedProcedure,
    } from "~/server/api/trpc";

    export const tweetRouter = createTRPCRouter({
      all: publicProcedure.query(({ ctx }) => {
        return ctx.prisma.tweet.findMany({
          select: {
            id: true,
            content: true,
            createdAt: true,
            userId: true,
            user: { select: { name: true } },
          },
          orderBy: {
            createdAt: "desc",
          },
        });
      }),

      oneUser: publicProcedure
        .input(z.object({ id: z.string() }))
        .query(({ ctx, input }) => {
          const { id } = input;
          return ctx.prisma.tweet.findMany({
            where: { userId: id },
            select: {
              id: true,
              content: true,
              createdAt: true,
              userId: true,
              user: { select: { name: true } },
            },
            orderBy: {
              createdAt: "desc",
            },
          });
        }),

      add: protectedProcedure
        .input(z.object({ text: z.string() }))
        .mutation(({ ctx, input }) => {
          const userId = ctx.session.user.id;
          const tweet = ctx.prisma.tweet.create({
            data: {
              content: input.text,
              userId,
            },
          });
          return tweet;
        }),
      delete: protectedProcedure
        .input(z.object({ id: z.number() }))
        .mutation(({ ctx, input }) => {
          const deletedTweet = ctx.prisma.tweet.delete({
            where: { id: input.id },
          });

          return deletedTweet;
        }),
    });



    // src/server/api/root.ts
    // add the router

    import { tweetRouter } from "./routers/tweet";
    import { createTRPCRouter } from "~/server/api/trpc";

    /**
     * This is the primary router for your server.
     *
     * All routers added in /api/routers should be manually added here.
     */
    export const appRouter = createTRPCRouter({
      tweet: tweetRouter,
    });

    // export type definition of API
    export type AppRouter = typeof appRouter;



    // src/pages/api/trpc/[trpc].ts
    // serve tRPC router (✅ done by T3 app)
    // for more advanced usage -> https://trpc.io/docs/server/adapters/nextjs#handling-cors-and-other-advanced-usage

    import { createNextApiHandler } from "@trpc/server/adapters/next";
    import { env } from "~/env.mjs";
    import { appRouter } from "~/server/api/root";
    import { createTRPCContext } from "~/server/api/trpc";

    // export API handler
    export default createNextApiHandler({
      router: appRouter,
      createContext: createTRPCContext,
      onError:
        env.NODE_ENV === "development"
          ? ({ path, error }) => {
              console.error(
                `❌ tRPC failed on ${path ?? "<no-path>"}: ${error.message}`
              );
            }
          : undefined,
    });

💡T3 app provides us createTRPCContext so that we can access prisma with ctx during procedures. T3 also set createTRPCRouter,publicProcedure, and protectedProcedure with the context.



    // src/server/api/trpc.ts

    import { initTRPC, TRPCError } from "@trpc/server";
    import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
    import { type Session } from "next-auth";
    import superjson from "superjson";
    import { ZodError } from "zod";
    import { getServerAuthSession } from "~/server/auth";
    import { prisma } from "~/server/db";

    type CreateContextOptions = {
      session: Session | null;
    };

    const createInnerTRPCContext = (opts: CreateContextOptions) => {
      return {
        session: opts.session,
        prisma,
      };
    };

    // This code allows procedures to access session and prisma
    export const createTRPCContext = async (opts: CreateNextContextOptions) => {
      const { req, res } = opts;

      // Get the session from the server using the getServerSession wrapper function
      const session = await getServerAuthSession({ req, res });

      return createInnerTRPCContext({
        session,
      });
    };

    // Initialization with connecting context
    const t = initTRPC.context<typeof createTRPCContext>().create({
      transformer: superjson,
      errorFormatter({ shape, error }) {
        return {
          ...shape,
          data: {
            ...shape.data,
            zodError:
              error.cause instanceof ZodError ? error.cause.flatten() : null,
          },
        };
      },
    });

    // to create routers
    export const createTRPCRouter = t.router;

    // Public (unauthenticated) procedure
    const publicProcedure = t.procedure;

    /** Reusable middleware that enforces users are logged in before running the procedure. */
    const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
      if (!ctx.session || !ctx.session.user) {
        throw new TRPCError({ code: "UNAUTHORIZED" });
      }
      return next({
        ctx: {
          // infers the `session` as non-nullable
          session: { ...ctx.session, user: ctx.session.user },
        },
      });
    });

    // Protected (authenticated) procedure
    export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);

4️⃣ Create tRPC hooks (✅ done by T3 app: src/utils/api.ts)
5️⃣ Configure _app.tsx (✅ done by T3 app)
6️⃣ Make an API request



    // 
    import Head from "next/head";
    import { api } from "~/utils/api";
    import TweetItem from "~/components/TweetItem";

    export default function Home() {
      const { data: tweets } = api.tweet.all.useQuery();

      return (
        <>
          ...contents
        </>
      );
    }

For delete and add mutation, I tried Optimistic updates.



    import React from "react";
    import { useSession } from "next-auth/react";
    import FeatherIcon from "feather-icons-react";
    import { type RouterOutputs } from "~/utils/api";
    import { api } from "~/utils/api";

    type ArryItems<T> = T extends (infer Item)[] ? Item : T;
    type TweetItem = ArryItems<RouterOutputs["tweet"]["oneUser"]>;

    function TweetItem({ tweet }: { tweet: TweetItem }) {
      const { data: sessionData } = useSession();
      const utils = api.useContext();
      const mutation = api.tweet.delete.useMutation({
        async onMutate(id) {
          await utils.tweet.oneUser.cancel();
          const prevData = utils.tweet.oneUser.getData({ id: tweet.userId });

          utils.tweet.oneUser.setData({ id: tweet.userId }, (old) =>
            old?.filter((tweet) => tweet.id !== id)
          );
          return { prevData };
        },
        onError(err, id, ctx) {
          // If the mutation fails, use the context-value from onMutate
          utils.tweet.oneUser.setData({ id: tweet.userId }, ctx?.prevData);
        },
        async onSettled() {
          // Sync with server once mutation has settled
          await utils.tweet.oneUser.invalidate();
        },
      });
      const handleDelete = () => {
        if (confirm("Are you sure to delete the tweet?")) {
          mutation.mutate({ id: tweet.id });
        }
      };

      return (
        ...content
      );
    }

    export default TweetItem;

That’s it! Thank your reading :)
Code is available here

Updated my Next.js project to v13 Appendix: Troubleshooting

Yuko — Sun, 28 May 2023 23:24:51 +0000

This is a series of my memo from when I migrated Next.js v13 into my project with the article From Pages to App. I also updated other packages’ versions. I decided to put the list of problems I encountered while the development process and also how I fixed them.

Part1: Migrated app router from page router

Part2: Migrated router API

Part3: Applied some other Next.js v13 updates

Optional: Updated NextAuth from v3 to v4

Optional: Updated Redux from classical Redux to Redux Toolkit Query

Vague error messages

Error: React Context is unavailable in Server Components

You have to put "use client" to use "SessionProvider" provided by nextAuth because it uses React Context behind the scene.

I read some articles setting up NextAuth with Next.js and found that the current common practice is creating a provider as a client-side component and wrapping with it at app/layout.js rather than using SessionProvider directly. This approach applies to other providers which also require use client.
Setup and Use NextAuth.js in Next.js 13 App Directory 2023
Add NextAuth to NextJS 13 and Authenticate with GitHub

TypeError: (0 , _react.createContext) is not a function

This is another pattern that you have to put "use client”. If you see this message, most likely you’re using redux hooks/utils in server components. One tricky thing is that Redux doesn’t specify what file causes this error.

TypeError: Cannot read properties of undefined (reading ‘prototype’)

This error came from semantic-ui-react and also told me to put "use client". So far, you have to put "use client" at all files which include semantic-ui-react components. Alternatively, you can create client components for each semantic-ui-react component. But I haven’t applied this approach yet.

"use client"

import { Grid as SemanticGrid } from "semantic-ui-react";

const Grid = (props) => {

  return <SemanticGrid {...props}>{props.children}</SemanticGrid>

}

TypeError: Cannot read properties of undefined (reading ‘select’)

This is more likely because your first argument of updateQueryData (endpoint name) is incorrect. In the case below, it should be getCartItems to match the actual query I defined.

Redux Essentials, Part 8: RTK Query Advanced Patterns | Redux

Error: [Immer] The first or second argument to `produce` must be a function

I got this error because I forgot to put the second argument for updateQueryData (cache key arguments).

Different CSS files loading b/w production and dev

After deploying on vercel, I found there is a wired padding provided by semantic ui css file.

Here is how Next.js optimize css files during the build process. My global.css file cannot always override semantic ui stylings.

When building for production with next build, CSS files will be bundled into fewer minified .css files to reduce the number of network requests needed to retrieve styles.
CSS Modules

The quick and dirty way is put !important for those stylings you want to override stylings. But I think a better way in my case is to add stylings with styled-components.

No redux-next-wapper for Next.js 13 so far

Because of it, I decided to use rest api more often than before to keep most of data on the server side rather than saving it in local storage.
Usage with Next.js 13? · Issue #494 · kirill-konshin/next-redux-wrapper

I tried Optimistic updates for a better user experience.
Optimistic Updates with RTK Query

That's it! It was more difficult for me to catch/handle errors than usual because most of libraries still assume React ecosystem. Hope it helps someone as well. Please let me know if you have/find any better solution. Thank you for reading :)

code

original article is here

Optimistic Updates with RTK Query

Yuko — Sun, 28 May 2023 07:57:05 +0000

This is my memo from when I implemented optimistic updates with RTK Query.
Below is the final result of what I implemented. Both the “add to cart” and “add to wishlist” buttons send requests to the server to process these actions, the browser side acts like the client side manages these data.

We can leverage onQueryStarted to implement that feature. Here is an example of onQueryStarted usage.

    async onQueryStarted({ cartItemToAdd }, { dispatch, queryFulfilled }) {
            const patchResult = dispatch(
              cartApi.util.updateQueryData("getCartItems", undefined, (draft) => {
                const updatedCartItems = addItemToCart(
                  draft.cartItems,
                  cartItemToAdd
                );
                return {
                  ...draft,
                  cartItems: updatedCartItems,
                };
              })
            );
            try {
              await queryFulfilled;
            } catch {
              patchResult.undo();
    }

Trouble shooting

Here are some mistakes I make made during the development process.

Error: TypeError: Cannot read properties of undefined (reading 'select')

If you got this error message you might pass a wrong query name at updateQueryData.

In my case, I misspelled getCarItems.

    // Correct
    cartApi.util.updateQueryData("getCartItems", undefined, (draft) => {
                const updatedCartItems = addItemToCart(
                  draft.cartItems,
                  cartItemToAdd
                );
                return {
                  ...draft,
                  cartItems: updatedCartItems,
                };
              })
    // Wrong
    cartApi.util.updateQueryData("getCartItem", undefined, (draft) => {
                const updatedCartItems = addItemToCart(
                  draft.cartItems,
                  cartItemToAdd
                );
                return {
                  ...draft,
                  cartItems: updatedCartItems,
                };
              })

Retune draft As long as I observe, it works without return when you directly modify the draft object like the example provided in the official document. Otherwise, you need to return the updated object.

    // Works without return
    async onQueryStarted({ wishlist }, { dispatch, queryFulfilled }) {
            const patchResult = dispatch(
              wishlistApi.util.updateQueryData(
                "getWishlist",
                undefined,
                (draft) => {
                  draft.products = [...draft.products, wishlist];
                }
              )
            );
            try {
              await queryFulfilled;
            } catch {
              patchResult.undo();
            }
          },

    // Work only with return
    cartApi.util.updateQueryData("getCartItems", undefined, (draft) => {
                const updatedCartItems = addItemToCart(
                  draft.cartItems,
                  cartItemToAdd
                );
                return {
                  ...draft,
                  cartItems: updatedCartItems,
                };
    })

ref:

https://redux-toolkit.js.org/rtk-query/usage/manual-cache-updates#optimistic-updates

original article is here

Forem: Yuko

Favorite Toggle Button with useOptimistic

Storybook ❎ NextAuth: How to set mock auth session

1. Create a mock provider

2. Add the provider to decorators at preview.tsx

3. Modify parameters in stories

A. Set a default state

B. Set a custom state

[LeetCode] Visualization of Reverse Linked List

What we want

Strategy

Code

[LeetCode] Concatenation of Array with Modular Arithmetic

Question

Modular Arithmetic

Solution Approach

Implementation

Generalization

Ref

Exploring “Data Fetching with React Server Components” with Next.js

Motivation

Issue

React Team’s Solution: Put data fetching logic on the server

Server Side Rendering vs React Server Components

Server Side Rendering (SSR)

React Server Components

Server Component Features

Zero Effect on the Bundle Size

Direct Access to the Backend Resources

Automatic Code Splitting

Server Components require users’ decision

Server Components provide modern UX with a server-driven mental model

Ref

A story when I asked ChatGPT to implement tailwindCSS for me

First attempt

Second attempt

Final results

Discussion

How to setup Prisma with your local PostgreSQL

PostgreSQL 101: From what’s database to basic SQL queries

What is database

Work with PostgreSQL

1. Install PostgreSQL

2. Create Database

3. Create tables

4. Insert into: How to insert values

5. Select: How to get table values

6. Alter: How to add another column to an existing table

7. Update: How to update existing row values

8. Join: How to connect tables

9. Delete : How to delete rows

10. Drop table: How to delete tables

tRPC 102: Subscription/Web Socket

1. Add onUpdate subscription

2. Creating a WebSocket-server

3. Setting TRPCClient to use WebSockets

4. Use subscription

tRPC 101: Concepts and some code experiments with create T3 app

tRPC 101: Concepts and some code experiments with create T3 app

Concept

Vocabulary

Try tRPC

Setup tRPC

Updated my Next.js project to v13 Appendix: Troubleshooting

Vague error messages

Error: React Context is unavailable in Server Components

TypeError: (0 , _react.createContext) is not a function

TypeError: Cannot read properties of undefined (reading ‘prototype’)

TypeError: Cannot read properties of undefined (reading ‘select’)

Error: [Immer] The first or second argument to produce must be a function

Different CSS files loading b/w production and dev

No redux-next-wapper for Next.js 13 so far

Optimistic Updates with RTK Query

Trouble shooting

Error: [Immer] The first or second argument to `produce` must be a function