replace with new tn-models-fp

{{cookiecutter.project_slug}}/clients/web/vue3/package.json

@@ -18,16 +18,18 @@
     "@thinknimble/tn-forms": "^2.0.9",
     "@thinknimble/tn-models": "1.2.1",
     "@thinknimble/tn-utils": "1.6.0",
+    "@thinknimble/tn-models-fp": "^2.12.1",
     "autoprefixer": "^10.0.2",
-    "axios": "^0.22.0",
+    "axios": "^1.4.0",
     "core-js": "^3.6.5",
     "js-cookie": "^3.0.1",
     "postcss": "^8.1.0",
     "tailwindcss": "3.0.11",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
     "vuex": "^4.0.0-0",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^4.1.0",
+    "zod": "3.21.4"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

{{cookiecutter.project_slug}}/clients/web/vue3/src/services/AxiosClient.js

@@ -18,7 +18,7 @@ class ApiService {
   static session
   static init
   constructor() {
-    let baseURL = `${window.location.protocol}//${window.location.host}/api`
+    let baseURL = `${window.location.protocol}//${window.location.host}/`
 
     console.debug(`API Service for ${baseURL}`)
 

{{cookiecutter.project_slug}}/clients/web/vue3/src/services/base-model.js

@@ -0,0 +1,8 @@
+import { z } from 'zod'
+import {readonly} from '@thinknimble/tn-models-fp'
+
+export const baseModelShape = {
+  id: readonly(z.string().uuid().optiona()),
+  datetimeCreated: readonly(z.string().datetime().optional()),
+  lastEdited: readonly(z.string().datetime().optional()),
+}

{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/api.js

@@ -1,81 +1,47 @@
-import { ModelAPI, objectToCamelCase } from '@thinknimble/tn-models'
-
-import AxiosClient from '../AxiosClient'
-import { apiErrorHandler } from '../api'
-
-// NOTE: The AxiosClient is congfigured to include '/api' in the baseUrl
-const LOGIN_ENDPOINT = '/login/'
-const PASSWORD_RESET_EMAIL_ENDPOINT = '/password/reset/'
-const PASSWORD_RESET_ENDPOINT = '/password/reset/confirm/'
-const REGISTRATION_ENDPOINT = '/users/'
-const USERS_ENDPOINT = '/users/'
-
-export default class UserAPI extends ModelAPI {
-  /**
-   * ModelAPI contains methods for list and create (overridden here) and the FILTERS_MAP
-   * You may override any of these methods by statically defining them here
-   * e.g static FILTERS_MAP={...UserAPI.FILTERS_MAP, <FITERS>}
-   *      list({ filters = {}, pagination = {} }){
-   *
-   * }
-   */
-
-  get client() {
-    return AxiosClient
-  }
-
-  static ENDPOINT = USERS_ENDPOINT
-
-  login(d) {
-    const data = { email: d.email.toLowerCase(), password: d.password }
-    return this.client
-      .post(LOGIN_ENDPOINT, data)
-      .then((response) => this.cls.fromAPI(response.data))
-      .catch(
-        apiErrorHandler({
-          apiName: 'UserAPI.login',
-          enable400Alert: false,
-          enable500Alert: false
-        }),
-    )
-  }
-
-  registerUser(d) {
-    const data = {
-      firstName: d.firstName,
-      lastName: d.lastName,
-      email: d.email.toLowerCase(),
-      password: d.password,
-    }
-    return this.client
-      .post(REGISTRATION_ENDPOINT, this.cls.toAPI(data))
-      .then((response) => this.cls.fromAPI(response.data))
-      .catch(
-        apiErrorHandler({
-          apiName: 'UserAPI.registerUser',
-          enable400Alert: false,
-          enable500Alert: false,
-        }),
-      )
-  }
-
-  requestPasswordReset(email) {
-    const data = { email: email }
-    return this.client
-      .post(PASSWORD_RESET_EMAIL_ENDPOINT, data)
-      .catch(
-      apiErrorHandler({
-        apiName: 'UserAPI.requestPasswordReset',
-      }),
-    )
-  }
-
-  resetPassword({ uid, token, password }) {
-    const url = `${PASSWORD_RESET_ENDPOINT}${uid}/${token}/`
-    const data = { password }
-    return this.client
-      .post(url, data)
-      .then((response) => this.cls.fromAPI(response.data))
-      .catch(apiErrorHandler({ apiName: 'UserAPI.resetPassword' }))
-  }
-}
+import { createApi, createCustomServiceCall } from '@thinknimble/tn-models-fp'
+import { z } from 'zod'
+import axiosInstance from '../AxiosClient'
+import { userShape, forgotPasswordShape, userCreateShape, loginShape } from './models'
+
+const login = createCustomServiceCall(
+  {
+    inputShape: loginShape,
+    outputShape: userShape,
+  },
+  async ({ client, input, utils }) => {
+    const res = await client.post('api/login/', utils.toApi(input))
+    return utils.fromApi(res.data)
+  },
+)
+
+const requestPasswordReset = createCustomServiceCall(
+  {
+    inputShape: forgotPasswordShape,
+  },
+  async ({ client, input }) => {
+    await client.get(`api/password/reset/${input.email}/`)
+  },
+)
+const resetPassword = createCustomServiceCall(
+  {
+    inputShape: { uid: z.string().email(), token: z.string(), password: z.string() },
+    outputShape: userShape,
+  },
+  async ({ client, input, utils }) => {
+    const { email, ...rest } = utils.toApi(input)
+    const res = await client.post(`api/password/reset/code/confirm/${input.email}/`, rest)
+    return utils.fromApi(res.data)
+  },
+)
+
+export const userApi = createApi(
+  {
+    client: axiosInstance,
+    baseUri: 'api/users/',
+    models: {
+      create: userCreateShape,
+      entity: userShape,
+    },
+  },
+  { login, requestPasswordReset, resetPassword },
+)

{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/index.js

@@ -1,6 +1,3 @@
-import User from './models'
-import UserAPI from './api'
-import { LoginForm, SignupForm, RequestPasswordResetForm, PasswordResetForm } from './forms'
-
-export default User
-export { LoginForm, SignupForm, RequestPasswordResetForm, PasswordResetForm, UserAPI }
+export * from './forms'
+export * from './api'
+export * from './models'

{{cookiecutter.project_slug}}/clients/web/vue3/src/services/users/models.js

@@ -1,14 +1,27 @@
-import Model, { fields } from '@thinknimble/tn-models'
+import { z } from 'zod'
+import { baseModelShape } from '../base-model'
 
-import UserAPI from './api'
+export const userShape = {
+  ...baseModelShape,
+  email: z.string().email(),
+  firstName: z.string(),
+  lastName: z.string(),
+  token: z.string().nullable(),
+}
+
+export const userCreateShape = {
+  ...userShape,
+  password: z.string(),
+  confirmPassword: z.string(),
+}
+
+export const forgotPasswordShape = {
+  email: z.string().email(),
+}
 
-export default class User extends Model {
-  static api = UserAPI.create(User)
 
-  static id = new fields.CharField({ readOnly: true })
-  static firstName = new fields.CharField()
-  static lastName = new fields.CharField()
-  static email = new fields.CharField()
-  static fullName = new fields.CharField({ readOnly: true })
-  static token = new fields.CharField()
+export const loginShape = {
+  email: z.string().email(),
+  password: z.string(),
 }
+

{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Login.vue

@@ -42,7 +42,7 @@
 import { ref } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
-import User, { LoginForm } from '@/services/users/'
+import  { LoginForm, userApi } from '@/services/users/'
 import InputField from '@/components/inputs/InputField'
 
 export default {
@@ -74,8 +74,7 @@ export default {
       const unwrappedForm = form.value
       unwrappedForm.validate()
       if (!unwrappedForm.isValid) return
-
-      User.api
+      userApi.csc
         .login({ email: unwrappedForm.email.value, password: unwrappedForm.password.value })
         .then(handleLoginSuccess)
         .catch(handleLoginFailure)

{{cookiecutter.project_slug}}/clients/web/vue3/src/views/RequestPasswordReset.vue

@@ -40,7 +40,7 @@
 
 <script>
 import { ref } from 'vue'
-import User, { RequestPasswordResetForm } from '@/services/users/'
+import  { userApi,  RequestPasswordResetForm } from '@/services/users/'
 import InputField from '@/components/inputs/InputField'
 
 export default {
@@ -67,8 +67,7 @@ export default {
       unwrappedForm.validate()
       if (!unwrappedForm.isValid) return
 
-      User.api
-        .requestPasswordReset(unwrappedForm.email.value)
+      userApi.csc.requestPasswordReset(unwrappedForm.email.value)
         .then(handleResetRequestSuccess)
         .catch(handleResetRequestFailure)
     }

{{cookiecutter.project_slug}}/clients/web/vue3/src/views/ResetPassword.vue

@@ -27,7 +27,7 @@
 import { ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
-import User, { PasswordResetForm } from '@/services/users/'
+import  { userApi, PasswordResetForm } from '@/services/users/'
 import InputField from '@/components/inputs/InputField'
 
 export default {
@@ -58,7 +58,7 @@ export default {
 
       const { uid, token } = route.params
 
-      User.api
+      userApi.csc
         .resetPassword({
           uid,
           token,

{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Signup.vue

@@ -59,9 +59,10 @@
 import { ref } from 'vue'
 import { useStore } from 'vuex'
 import { useRouter } from 'vue-router'
-import User, { SignupForm } from '@/services/users/'
+import { userApi, SignupForm } from '@/services/users/'
 import InputField from '@/components/inputs/InputField'
 
+
 export default {
   name: 'Signup',
   components: {
@@ -92,8 +93,7 @@ export default {
       unwrappedForm.validate()
       if (!unwrappedForm.isValid) return
 
-      User.api
-        .registerUser({
+      userApi.create({
           firstName: unwrappedForm.firstName.value,
           lastName: unwrappedForm.lastName.value,
           email: unwrappedForm.email.value,