Postpocketbase, typescript, go, react

Social media timeline with pocketbase and react

the timeline extending pocketbase useful references OAUTH Authentication with...

Date published

January 10, 2023

PostFeb 2, 2025

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

slides used in the presentation building the generic component In this example we'll use...

npm
react
typescript

Read post

PostAug 16, 2026

Tanstack DB in action

The team at TanStack, makers of TanStack Query (aka react-query), partnered with the ElectricSQL team...

react
tanstackdb
webdev

Read post

PostJul 28, 2026

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Why You Might Still Pick Next.js Over TanStack Start From a TanStack Start...

nextjs
tanstack
react

Read post

pb_data/data.db

json

1[
2    {
3        "id": "_pb_users_auth_",
4        "name": "users",
5        "type": "auth",
6        "system": false,
7        "schema": [
8            {
9                "id": "users_name",
10                "name": "name",
11                "type": "text",
12                "system": false,
13                "required": false,
14                "unique": false,
15                "options": {
16                    "min": null,
17                    "max": null,
18                    "pattern": ""
19                }
20            },
21            {
22                "id": "users_avatar",
23                "name": "avatar",
24                "type": "file",
25                "system": false,
26                "required": false,
27                "unique": false,
28                "options": {
29                    "maxSelect": 1,
30                    "maxSize": 5242880,
31                    "mimeTypes": [
32                        "image/jpg",
33                        "image/jpeg",
34                        "image/png",
35                        "image/svg+xml",
36                        "image/gif"
37                    ],
38                    "thumbs": null
39                }
40            }
41        ],
42        "listRule": "id = @request.auth.id",
43        "viewRule": "id = @request.auth.id",
44        "createRule": "",
45        "updateRule": "id = @request.auth.id",
46        "deleteRule": "id = @request.auth.id",
47        "options": {
48            "allowEmailAuth": true,
49            "allowOAuth2Auth": true,
50            "allowUsernameAuth": true,
51            "exceptEmailDomains": null,
52            "manageRule": null,
53            "minPasswordLength": 8,
54            "onlyEmailDomains": null,
55            "requireEmail": false
56        }
57    },
58    {
59        "id": "5sckr8a13top3zs",
60        "name": "devs",
61        "type": "auth",
62        "system": false,
63        "schema": [
64            {
65                "id": "dhr1v7xa",
66                "name": "avatar",
67                "type": "url",
68                "system": false,
69                "required": false,
70                "unique": false,
71                "options": {
72                    "exceptDomains": null,
73                    "onlyDomains": null
74                }
75            },
76            {
77                "id": "jojjscns",
78                "name": "accessToken",
79                "type": "text",
80                "system": false,
81                "required": false,
82                "unique": false,
83                "options": {
84                    "min": null,
85                    "max": null,
86                    "pattern": ""
87                }
88            },
89            {
90                "id": "jqjtptoe",
91                "name": "displayname",
92                "type": "text",
93                "system": false,
94                "required": false,
95                "unique": false,
96                "options": {
97                    "min": null,
98                    "max": null,
99                    "pattern": ""
100                }
101            }
102        ],
103        "listRule": "",
104        "viewRule": "",
105        "createRule": "",
106        "updateRule": "@request.auth.id = id",
107        "deleteRule": null,
108        "options": {
109            "allowEmailAuth": true,
110            "allowOAuth2Auth": true,
111            "allowUsernameAuth": true,
112            "exceptEmailDomains": null,
113            "manageRule": null,
114            "minPasswordLength": 8,
115            "onlyEmailDomains": null,
116            "requireEmail": false
117        }
118    },
119    {
120        "id": "vbse1l0qet8z4hu",
121        "name": "posts",
122        "type": "base",
123        "system": false,
124        "schema": [
125            {
126                "id": "chnflxdo",
127                "name": "title",
128                "type": "text",
129                "system": false,
130                "required": false,
131                "unique": false,
132                "options": {
133                    "min": null,
134                    "max": null,
135                    "pattern": ""
136                }
137            },
138            {
139                "id": "a0u9jwo7",
140                "name": "body",
141                "type": "text",
142                "system": false,
143                "required": false,
144                "unique": false,
145                "options": {
146                    "min": null,
147                    "max": null,
148                    "pattern": ""
149                }
150            },
151            {
152                "id": "ny6krdw9",
153                "name": "media",
154                "type": "file",
155                "system": false,
156                "required": false,
157                "unique": false,
158                "options": {
159                    "maxSelect": 1,
160                    "maxSize": 5242880,
161                    "mimeTypes": [
162                        "image/jpg",
163                        "image/jpeg",
164                        "image/png",
165                        "image/svg+xml",
166                        "image/gif"
167                    ],
168                    "thumbs": []
169                }
170            },
171            {
172                "id": "ijbw4tgl",
173                "name": "user",
174                "type": "relation",
175                "system": false,
176                "required": true,
177                "unique": false,
178                "options": {
179                    "maxSelect": 1,
180                    "collectionId": "5sckr8a13top3zs",
181                    "cascadeDelete": false
182                }
183            }
184        ],
185        "listRule": "@request.auth.id != ''",
186        "viewRule": "@request.auth.id != ''",
187        "createRule": "@request.auth.id = user",
188        "updateRule": "@request.auth.id = user",
189        "deleteRule": "@request.auth.id = user",
190        "options": {}
191    },
192    {
193        "id": "4wcaptlpivjve1o",
194        "name": "reactions",
195        "type": "base",
196        "system": false,
197        "schema": [
198            {
199                "id": "nyreyfss",
200                "name": "post",
201                "type": "relation",
202                "system": false,
203                "required": true,
204                "unique": false,
205                "options": {
206                    "maxSelect": 1,
207                    "collectionId": "vbse1l0qet8z4hu",
208                    "cascadeDelete": true
209                }
210            },
211            {
212                "id": "sgwol8dx",
213                "name": "user",
214                "type": "relation",
215                "system": false,
216                "required": true,
217                "unique": false,
218                "options": {
219                    "maxSelect": 1,
220                    "collectionId": "5sckr8a13top3zs",
221                    "cascadeDelete": false
222                }
223            },
224            {
225                "id": "iyckrxwp",
226                "name": "liked",
227                "type": "select",
228                "system": false,
229                "required": true,
230                "unique": false,
231                "options": {
232                    "maxSelect": 1,
233                    "values": [
234                        "yes",
235                        "no"
236                    ]
237                }
238            }
239        ],
240        "listRule": "",
241        "viewRule": "",
242        "createRule": "@request.auth.id != \"\"",
243        "updateRule": "@request.auth.id = user",
244        "deleteRule": "@request.auth.id = user",
245        "options": {}
246    }
247]

plaintext

1
2package main
3import (
4	"log"
5	"os"
6	"path/filepath"
7	"strings"
8
9	"github.com/pocketbase/pocketbase"
10	"github.com/pocketbase/pocketbase/apis"
11	"github.com/pocketbase/pocketbase/core"
12	"github.com/pocketbase/pocketbase/plugins/jsvm"
13	"github.com/pocketbase/pocketbase/plugins/migratecmd"
14)
15
16func main() {
17	app := pocketbase.New()
18
19	// ---------------------------------------------------------------
20	// Optional plugin flags:
21	// ---------------------------------------------------------------
22
23	var migrationsDir string
24	app.RootCmd.PersistentFlags().StringVar(
25		&migrationsDir,
26		"migrationsDir",
27		"",
28		"the directory with the user defined migrations",
29	)
30
31	var automigrate bool
32	app.RootCmd.PersistentFlags().BoolVar(
33		&automigrate,
34		"automigrate",
35		true,
36		"enable/disable auto migrations",
37	)
38
39	var publicDir string
40	app.RootCmd.PersistentFlags().StringVar(
41		&publicDir,
42		"publicDir",
43		defaultPublicDir(),
44		"the directory to serve static files",
45	)
46
47	var indexFallback bool
48	app.RootCmd.PersistentFlags().BoolVar(
49		&indexFallback,
50		"indexFallback",
51		true,
52		"fallback the request to index.html on missing static path (eg. when pretty urls are used with SPA)",
53	)
54
55	app.RootCmd.ParseFlags(os.Args[1:])
56
57	// ---------------------------------------------------------------
58	// Plugins and hooks:
59	// ---------------------------------------------------------------
60
61	// load js pb_migrations
62	jsvm.MustRegisterMigrations(app, &jsvm.MigrationsOptions{
63		Dir: migrationsDir,
64	})
65
66	// migrate command (with js templates)
67	migratecmd.MustRegister(app, app.RootCmd, &migratecmd.Options{
68		TemplateLang: migratecmd.TemplateLangJS,
69		Automigrate:  automigrate,
70		Dir:          migrationsDir,
71	})
72
73	app.OnBeforeServe().Add(func(e *core.ServeEvent) error {
74		// serves static files from the provided public dir (if exists)
75		e.Router.GET("/*", apis.StaticDirectoryHandler(os.DirFS(publicDir), indexFallback))
76		return nil
77	})
78
79	if err := app.Start(); err != nil {
80		log.Fatal(err)
81	}
82}
83
84// the default pb_public dir location is relative to the executable
85func defaultPublicDir() string {
86	if strings.HasPrefix(os.Args[0], os.TempDir()) {
87		// most likely ran with go run
88		return "./pb_public"
89	}
90	return filepath.Join(os.Args[0], "../pb_public")
91}

plaintext

1package main
2
3import (
4	"fmt"
5	"net/http"
6
7	"github.com/labstack/echo/v5"
8	"github.com/pocketbase/dbx"
9	"github.com/pocketbase/pocketbase"
10	"github.com/pocketbase/pocketbase/apis"
11)
12
13// CustomPostRoute defines the HTTP route for getting custom posts
14func CustomPostRoute(app *pocketbase.PocketBase) echo.Route {
15	return echo.Route{
16		Method: http.MethodGet,
17		Path:   "/custom_posts",
18		Handler: func(c echo.Context) error {
19			result := []*struct {
20				CreatorId    string `db:"creator_id" json:"creator_id"`
21				CreatorName  string `db:"creator_name" json:"creator_name"`
22				CreatorImage string `db:"creator_image" json:"creator_image"`
23				PostId       string `db:"post_id" json:"post_id"`
24				PostBody     string `db:"post_body" json:"post_body"`
25				PostMedia    string `db:"post_media" json:"post_media"`
26				CreatedAT    string `db:"created_at" json:"created_at"`
27				Likes        int    `db:"likes" json:"likes"`
28				MyLike       string `db:"mylike" json:"mylike"`
29				ReactionId   string `db:"reaction_id" json:"reaction_id"`
30			}{}
31			queryErr := app.Dao().DB().NewQuery(` 
32SELECT 
33
34pp.user creator_id,
35dv.username creator_name,
36dv.avatar creator_image,
37pp.id post_id,
38pp.body post_body,
39pp.media post_media,
40pp.created created_at,
41
42(SELECT COUNT(*) FROM reactions WHERE liked = 'yes' AND post = pp.id) likes,
43IFNULL((SELECT  liked FROM reactions WHERE user = {:user} AND post = pp.id),'virgin')mylike,
44IFNULL((SELECT id FROM reactions WHERE user = {:user} AND post = pp.id),"virgin") reaction_id
45FROM posts pp
46LEFT JOIN devs dv on dv.id = pp.user
47WHERE (pp.created < {:created} OR (pp.created = {:created} AND pp.id < {:id}))
48ORDER BY pp.created DESC, pp.id DESC
49LIMIT 10
50							
51`).Bind(dbx.Params{"user": c.QueryParam("user"), "id": c.QueryParam("id"), "created": c.QueryParam("created")}).All(&result)
52			if queryErr != nil {
53				fmt.Print("\n")
54				return apis.NewBadRequestError("Failed to fetch custom posts ", queryErr)
55			}
56			return c.JSON(200, result)
57		},
58		Middlewares: []echo.MiddlewareFunc{apis.ActivityLogger(app)},
59		Name:        "",
60	}
61}
62

typescript

1import React from 'react'
2import { CustomPostType, PBUser } from '../../utils/types/types';
3import { useInView } from 'react-intersection-observer'
4import { useInfiniteCustom } from '../../shared/hooks/useInfiniteCustom';
5import { QueryStateWrapper } from './../../shared/wrappers/QueryStateWrapper';
6import { FaPlus } from 'react-icons/fa';
7import { TheIcon } from '../../shared/wrappers/TheIcon';
8import { PostsCard } from './../../components/timeline/PostCard';
9import { PostForm } from './../../components/timeline/PostForm';
10import { ReactModalWrapper } from './../../shared/wrappers/ReactModalWrapper';
11interface TimelineProps {
12    user: PBUser
13}
14
15export const Timeline = ({user}: TimelineProps) => {
16const { ref, inView } = useInView()
17const [isOpen, setIsOpen] = React.useState(false);
18    
19const customPostsQuery = useInfiniteCustom<CustomPostType>('custom-posts',user,{
20    getNextPageParam: (lastPage, allPages) => {
21        // console.log("last page ==== ",lastPage,allPages)
22        if (lastPage && lastPage[lastPage.length - 1]) {
23            return {
24             created: lastPage[lastPage?.length - 1]?.created_at,
25             id: lastPage[lastPage?.length - 1]?.post_id
26            };
27        }
28        return;
29    }
30})
31
32 React.useEffect(() => {
33    if (inView) {
34        customPostsQuery.fetchNextPage()
35    }
36}, [inView])
37
38const data = customPostsQuery.data
39// console.log("custom query === ",data)
40return (
41<QueryStateWrapper query={customPostsQuery}>
42    <div className='w-full min-h-full  flex flex-col gap-2 items-center justify-center'>
43        <div className='w-[95%] h-full flex flex-col items-center justify-center gap-2 py-2'>
44            {data?.pages.map((page) => {
45                    // console.log("page=== ",page)
46                    return page.map((item) => {
47                        return <PostsCard item={item} key={item.post_id} user={user} />
48                    })
49                  
50                })
51                }
52        </div>
53
54    <div className='w-fit h-fit p-2 bg-slate-500 text-white rounded-full fixed bottom-[10%] right-[5%]'>
55            <TheIcon Icon={FaPlus} size={'40'} iconAction={() => setIsOpen(true)} />
56        </div>
57        
58            <ReactModalWrapper
59                child={
60                <PostForm user={user} setIsOpen={setIsOpen} />}
61                closeModal={() => setIsOpen(false)}
62                delay={2}
63                isOpen={isOpen}
64                styles={{
65                    overlay_top: '0%',
66                    overlay_right: '0%',
67                    overlay_left: '0%',
68                    overlay_bottom: '0%',
69                    content_bottom: '2%',
70                    content_right: '2%',
71                    content_left: '2%',
72                    content_top: '2%'
73
74                }}/>
75
76            <div>
77        <button ref={ref}
78            onClick={() => customPostsQuery.fetchNextPage()}
79            disabled={!customPostsQuery.hasNextPage || customPostsQuery.isFetchingNextPage}>
80                {customPostsQuery.isFetchingNextPage ? 'Loading more...': customPostsQuery.hasNextPage ? 'Load More'
81                : !customPostsQuery.isLoading ? 'Nothing more to load' : null}</button>
82            </div>
83
84        </div>
85    </QueryStateWrapper>
86);
87}
88

Social media timeline with pocketbase and react

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Social media timeline with pocketbase and react

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

the timeline

extending pocketbase

react part

⚠️⚠️ EDIT :

next part: replies nested routing

useful references

More posts

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

More posts

React devs KE 🇰🇪 Meetup February 2025 | Crafting Reusable Code with React & TypeScript: From Design to NPM

Tanstack DB in action

Reasons to Still Use Next.js from a TanStack Start Enjoyer

the timeline

extending pocketbase

react part

⚠️⚠️ EDIT :

next part: replies nested routing

useful references