[refactor] transform Session model to a Strapi List model for User API

TechQuery · TechQuery · commit c79e65bf2c4b · 2025-09-18T20:34:33.000+08:00
diff --git a/package.json b/package.json
@@ -74,7 +74,8 @@
         "singleQuote": true,
         "trailingComma": "none",
         "arrowParens": "avoid",
-        "tabWidth": 4
+        "tabWidth": 4,
+        "printWidth": 100
     },
     "lint-staged": {
         "*.{md,ts,json,yml}": "prettier --write"
diff --git a/wrapper/Strapi/ReadMe.md b/wrapper/Strapi/ReadMe.md
@@ -39,37 +39,44 @@ npm i mobx-strapi
 }
 ```
 
-### `model/Session.ts`
+### `model/User.ts`
 
 ```javascript
-import { SessionModel } from 'mobx-strapi';
+import { UserModel } from 'mobx-strapi';
 
-export const session = new SessionModel();
+const isLocalHost = ['localhost', '127.0.0.1', '0.0.0.0'].includes(location.hostname);
 
-if (!['localhost', '127.0.0.1', '0.0.0.0'].includes(location.hostname))
-    session.client.baseURI = 'https://your.strapi.production.domain/api/';
+export const userStore = new UserModel(
+    isLocalHost ? 'http://localhost:1337/api/' : 'https://your.strapi.production.domain/api/'
+);
 ```
 
 ### `model/Article.ts`
 
 ```typescript
 import { Base, BaseUser, Searchable, StrapiListModel } from 'mobx-strapi';
 
-import { session } from './Session';
+import { userStore } from './User';
 
 export interface Article extends Base, Record<'title' | 'summary', string> {
     author: BaseUser;
 }
 
 export class ArticleModel extends Searchable<Article>(StrapiListModel) {
-    client = session.client;
+    client = userStore.client;
     baseURI = 'articles';
     // for Strapi 5
     indexKey = 'documentId';
     // optional
     operator = { title: '$containsi' } as const;
     // optional
     searchKeys = ['title', 'summary'] as const;
+    // optional
+    dateKeys = ['createdAt', 'updatedAt'] as const;
+    // optional
+    sort = { createdAt: 'desc', updatedAt: 'desc' } as const;
+    // optional
+    populate = { author: { populate: '*' } };
 }
 
 export default new ArticleModel();
@@ -83,13 +90,13 @@ Use [WebCell][7] as an Example
 import { component, observer } from 'web-cell';
 
 import articleStore from '../../model/Article';
-import { sessionStore } from '../../model/Session';
+import { userStore } from '../../model/User';
 
 @component({ tagName: 'article-page' })
 @observer
 export class ArticlePage extends HTMLElement {
     connectedCallback() {
-        articleStore.getList({ author: sessionStore.user?.documentId });
+        articleStore.getList({ author: userStore.session?.documentId });
     }
 
     disconnectedCallback() {
diff --git a/wrapper/Strapi/package.json b/wrapper/Strapi/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mobx-strapi",
-    "version": "0.7.5",
+    "version": "0.8.0",
     "license": "LGPL-3.0",
     "author": "shiy2008@gmail.com",
     "description": "MobX SDK for Strapi headless CMS",
diff --git a/wrapper/Strapi/source/User.ts b/wrapper/Strapi/source/User.ts
@@ -2,16 +2,18 @@ import { components } from '@octokit/openapi-types';
 import { clear } from 'idb-keyval';
 import { HTTPClient, HTTPError } from 'koajax';
 import { observable } from 'mobx';
-import { BaseModel, NewData, persist, restore, toggle } from 'mobx-restful';
+import { Filter, IDType, NewData, persist, restore, toggle } from 'mobx-restful';
+import { stringify } from 'qs';
+
+import { StrapiListModel } from './index';
 
 export type Base = Record<'documentId' | 'createdAt' | 'updatedAt', string> & {
     id: number;
 };
-export type BaseUser = Partial<
-    Base &
-        Record<'username' | 'email' | 'provider', string> &
-        Record<'confirmed' | 'blocked', boolean>
->;
+export type BaseUser = Base &
+    Record<'username' | 'email' | 'provider', string> &
+    Record<'confirmed' | 'blocked', boolean>;
+
 export type GithubUser = components['schemas']['public-user'];
 
 export type OAuthProvider =
@@ -47,31 +49,31 @@ export type Media = Base &
         provider_metadata: {};
     };
 
-export class SessionModel<T extends BaseUser = BaseUser> extends BaseModel {
+export class UserModel<
+    D extends BaseUser = BaseUser,
+    F extends Filter<D> = Filter<D>
+> extends StrapiListModel<D, F> {
+    baseURI = 'users';
+
     @persist()
     @observable
-    accessor accessToken = new URLSearchParams(globalThis.location?.search).get(
-        'access_token'
-    );
+    accessor accessToken = new URLSearchParams(globalThis.location?.search).get('access_token');
 
     @persist()
     @observable
     accessor jwt = '';
 
     @persist()
     @observable
-    accessor user: T | undefined;
+    accessor session: D | undefined;
 
     @persist()
     @observable
     accessor userGithub: GithubUser | undefined;
 
     restored = restore(this, 'Session');
 
-    client = new HTTPClient({
-        baseURI: 'http://localhost:1337/api/',
-        responseType: 'json'
-    }).use(async ({ request }, next) => {
+    client = new HTTPClient({ responseType: 'json' }).use(async ({ request }, next) => {
         await this.restored;
 
         request.headers = {
@@ -83,17 +85,22 @@ export class SessionModel<T extends BaseUser = BaseUser> extends BaseModel {
         return next();
     });
 
+    constructor(baseURL = 'http://localhost:1337/api/') {
+        super();
+        this.client.baseURI = baseURL;
+    }
+
     oAuthLinkOf = (provider: OAuthProvider) =>
         new URL(`connect/${provider}`, this.client.baseURI) + '';
 
     @toggle('uploading')
     async signInOauth(token = this.accessToken, provider = 'github') {
-        const { body } = await this.client.get<{ jwt: string; user: T }>(
+        const { body } = await this.client.get<{ jwt: string; user: D }>(
             `auth/${provider}/callback?access_token=${token}`
         );
         Object.assign(this, body);
 
-        return this.getProfile(body.user.id);
+        return this.getSession();
     }
 
     async signOut() {
@@ -103,41 +110,53 @@ export class SessionModel<T extends BaseUser = BaseUser> extends BaseModel {
     }
 
     @toggle('downloading')
-    async getProfile(id = this.user?.id) {
+    async getSession() {
         try {
-            const { body } = await this.client.get<T>(`users/${id || 'me'}`);
+            const { body } = await this.client.get<D>(`users/me`);
 
-            return (this.user = body);
+            return (this.session = body);
         } catch (error) {
             if ((error as HTTPError).response.status !== 400) throw error;
         }
     }
 
     @toggle('downloading')
     async getGithubProfile(name: string) {
-        const { body } = await this.client.get<GithubUser>(
-            'https://api.github.com/users/' + name,
-            { Authorization: `Bearer ${this.accessToken}` }
-        );
-
+        const { body } = await this.client.get<GithubUser>('https://api.github.com/users/' + name, {
+            Authorization: `Bearer ${this.accessToken}`
+        });
         return (this.userGithub = body);
     }
 
+    @toggle('downloading')
+    async getOne(id: IDType) {
+        const { body } = await this.client.get<D>(`users/${id}`);
+
+        return (this.currentOne = body);
+    }
+
     @toggle('uploading')
-    async updateProfile({ id = this.user?.id, ...data }: NewData<BaseUser>) {
-        const { body } = await this.client.put<T>('users/' + id, data);
+    async updateOne(data: Partial<NewData<D>>, id?: IDType) {
+        const { body } = await (id
+            ? this.client.put<D>(`${this.baseURI}/${id}`, data)
+            : this.client.post<D>(this.baseURI, data));
+
+        return (this.currentOne = body!);
+    }
 
-        return (this.user = body);
+    async loadPage(pageIndex: number, pageSize: number, filter: F) {
+        const query = stringify(this.makeFilter(pageIndex, pageSize, filter), {
+            encodeValuesOnly: true
+        });
+        const [{ body: totalCount }, { body: pageData }] = await Promise.all([
+            this.client.get<number>(`${this.baseURI}/count?${query}`),
+            this.client.get<D[]>(`${this.baseURI}?${query}`)
+        ]);
+        return { pageData, totalCount };
     }
 
     @toggle('uploading')
-    async upload(
-        model: string,
-        id: string,
-        key: string,
-        files: Blob[],
-        module?: string
-    ) {
+    async upload(model: string, id: string, key: string, files: Blob[], module?: string) {
         const data = new FormData();
 
         data.append('ref', model);
diff --git a/wrapper/Strapi/source/index.ts b/wrapper/Strapi/source/index.ts
@@ -1,33 +1,20 @@
 import { AbstractClass, IndexKey, makeDateRange, TypeKeys } from 'web-utility';
 import { stringify } from 'qs';
 import { computed, observable } from 'mobx';
-import {
-    IDType,
-    DataObject,
-    NewData,
-    Filter,
-    ListModel,
-    toggle
-} from 'mobx-restful';
-
-import { Base } from './Session';
-
-export * from './Session';
-
-export interface StrapiDataItem<
-    A extends DataObject,
-    M extends DataObject = DataObject
-> {
+import { IDType, DataObject, NewData, Filter, ListModel, toggle } from 'mobx-restful';
+
+import { Base } from './User';
+
+export * from './User';
+
+export interface StrapiDataItem<A extends DataObject, M extends DataObject = DataObject> {
     id: number;
     documentId?: string;
     attributes: StrapiNestedData<A>;
     meta: M;
 }
 
-export interface StrapiItemWrapper<
-    A extends DataObject,
-    M extends DataObject = DataObject
-> {
+export interface StrapiItemWrapper<A extends DataObject, M extends DataObject = DataObject> {
     data: StrapiDataItem<A>;
     meta?: M;
 }
@@ -47,9 +34,7 @@ export type StrapiNestedData<T extends DataObject> = {
           : T[K];
 };
 
-export type NotableOperator<T extends string> =
-    | `$${T}`
-    | `$not${Capitalize<T>}`;
+export type NotableOperator<T extends string> = `$${T}` | `$not${Capitalize<T>}`;
 
 export type CaseInsensitive<T extends `$${string}`> = T | `${T}i`;
 
@@ -81,7 +66,7 @@ export type StrapiPopulateQuery<D extends DataObject> = {
     };
 };
 
-export type StrapiQuery<D extends Base> = Partial<{
+export type StrapiQuery<D extends DataObject> = Partial<{
     filters: StrapiFilter<keyof D>;
     sort: string[];
     pagination: Record<'page' | 'pageSize', number>;
@@ -106,9 +91,7 @@ export abstract class StrapiListModel<
                 key,
                 value?.data
                     ? Array.isArray(value.data)
-                        ? (value as StrapiListWrapper<any>).data.map(item =>
-                              this.normalize(item)
-                          )
+                        ? (value as StrapiListWrapper<any>).data.map(item => this.normalize(item))
                         : this.normalize(value.data)
                     : value
             ])
@@ -153,18 +136,15 @@ export abstract class StrapiListModel<
             ])
         ) as StrapiFilter<typeof indexKey>;
 
-        const sort = Object.entries(this.sort).map(
-            ([key, value]) => `${key}:${value}`
-        );
+        const sort = Object.entries(this.sort).map(([key, value]) => `${key}:${value}`);
         return { populate, filters, sort, pagination };
     }
 
     async loadPage(pageIndex: number, pageSize: number, filter: F) {
         const { body } = await this.client.get<StrapiListWrapper<D>>(
-            `${this.baseURI}?${stringify(
-                this.makeFilter(pageIndex, pageSize, filter),
-                { encodeValuesOnly: true }
-            )}`
+            `${this.baseURI}?${stringify(this.makeFilter(pageIndex, pageSize, filter), {
+                encodeValuesOnly: true
+            })}`
         );
         return {
             pageData: body!.data.map(item => this.normalize(item)),
@@ -173,16 +153,14 @@ export abstract class StrapiListModel<
     }
 }
 
-export type SearchableFilter<D extends DataObject> = Filter<D> & {
+export type SearchableFilter<D extends Base> = Filter<D> & {
     keywords?: string;
 };
 
 export function Searchable<
     D extends Base,
     F extends SearchableFilter<D> = SearchableFilter<D>,
-    M extends AbstractClass<StrapiListModel<D, F>> = AbstractClass<
-        StrapiListModel<D, F>
-    >
+    M extends AbstractClass<StrapiListModel<D, F>> = AbstractClass<StrapiListModel<D, F>>
 >(Super: M) {
     abstract class SearchableListMixin extends Super {
         abstract searchKeys: readonly TypeKeys<D, string>[];
@@ -197,9 +175,7 @@ export function Searchable<
             type OrFilter = Record<TypeKeys<D, string>, { $containsi: string }>;
 
             const $or = this.searchKeys
-                .map(key =>
-                    words.map(word => ({ [key]: { $containsi: word } }))
-                )
+                .map(key => words.map(word => ({ [key]: { $containsi: word } })))
                 .flat() as OrFilter[];
 
             return { $or };

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mobx-strapi",`
`3`		`- "version": "0.7.5",`
	`3`	`+ "version": "0.8.0",`
`4`	`4`	`"license": "LGPL-3.0",`
`5`	`5`	`"author": "shiy2008@gmail.com",`
`6`	`6`	`"description": "MobX SDK for Strapi headless CMS",`