@magmamath/students-features 1.8.4 → 1.8.5-rc.1

package/src/features/profile/model/ProfileJoinClassModel.ts

@@ -0,0 +1,58 @@
+import { createEffect, createEvent, restore, sample } from 'effector'
+
+import { JoinClassError } from '../shared/JoinClassError'
+import { CLASS_CODE_LENGTH, JoinClassStatus } from '../shared/profile.constants'
+import { getJoinClassErrorMessage, getJoinClassSuccessMessage } from '../shared/profile.helpers'
+import type { NotifyJoinClass } from '../shared/profile.types'
+import type { ProfileApi } from './ProfileApi'
+
+export class ProfileJoinClassModel {
+  public readonly reset = createEvent()
+  public readonly setCode = createEvent<string>()
+  public readonly submit = createEvent()
+
+  public readonly $code = restore(this.setCode, '').reset(this.reset)
+  public readonly $isComplete = this.$code.map((code) => code.length === CLASS_CODE_LENGTH)
+
+  constructor(
+    private readonly api: ProfileApi,
+    private readonly notify: NotifyJoinClass
+  ) {
+    this.init()
+  }
+
+  private init() {
+    const notifyFx = createEffect(this.notify)
+
+    sample({
+      clock: this.submit,
+      source: this.$code,
+      filter: (code) => code.length === CLASS_CODE_LENGTH,
+      fn: (classCode) => ({ classCode }),
+      target: this.api.joinClassFx,
+    })
+
+    sample({
+      clock: this.api.joinClassFx.done,
+      fn: ({ result }) => ({
+        status: JoinClassStatus.SUCCESS,
+        message: getJoinClassSuccessMessage(result.name),
+      }),
+      target: notifyFx,
+    })
+
+    sample({
+      clock: this.api.joinClassFx.fail,
+      fn: ({ error }) => ({
+        status: JoinClassStatus.ERROR,
+        message: getJoinClassErrorMessage(error instanceof JoinClassError ? error.code : null),
+      }),
+      target: notifyFx,
+    })
+
+    sample({
+      clock: this.api.joinClassFx.done,
+      target: this.reset,
+    })
+  }
+}

package/src/features/profile/model/ProfileLanguageModel.ts

@@ -0,0 +1,26 @@
+import { createEvent, restore, sample } from 'effector'
+import type { Language } from '@magmamath/frontend-config'
+
+import { getAvailableLanguages } from '../shared/profile.helpers'
+import type { ProfileApi } from './ProfileApi'
+
+export class ProfileLanguageModel {
+  public readonly reset = createEvent()
+  public readonly setSearch = createEvent<string>()
+  public readonly selectLanguage = createEvent<Language | null>()
+
+  public readonly $search = restore(this.setSearch, '').reset(this.reset)
+  public readonly $languages = this.$search.map((search) => getAvailableLanguages(search))
+
+  constructor(private readonly api: ProfileApi) {
+    this.init()
+  }
+
+  private init() {
+    sample({
+      clock: this.selectLanguage,
+      fn: (translationLanguage) => ({ translationLanguage }),
+      target: this.api.updateSettingsFx,
+    })
+  }
+}

package/src/features/profile/model/ProfileModel.ts

@@ -0,0 +1,57 @@
+import { createEvent, sample, type Store } from 'effector'
+
+import type { ProfileCanvasType } from '../shared/profile.constants'
+import type { NotifyJoinClass, ProfileSettings, ProfileUser } from '../shared/profile.types'
+import { ProfileApi, type ProfileApiProps } from './ProfileApi'
+import { ProfileJoinClassModel } from './ProfileJoinClassModel'
+import { ProfileLanguageModel } from './ProfileLanguageModel'
+
+type ProfileModelProps = {
+  api: ProfileApiProps
+  notify: NotifyJoinClass
+  $user: Store<ProfileUser | null>
+  $settings: Store<ProfileSettings>
+}
+
+export class ProfileModel {
+  public readonly api: ProfileApi
+  public readonly joinClass: ProfileJoinClassModel
+  public readonly language: ProfileLanguageModel
+
+  public readonly setTextToSpeech = createEvent<boolean>()
+  public readonly setTextSize = createEvent<number>()
+  public readonly setCanvasType = createEvent<ProfileCanvasType>()
+
+  public readonly $user: Store<ProfileUser | null>
+  public readonly $settings: Store<ProfileSettings>
+
+  constructor({ api, notify, $user, $settings }: ProfileModelProps) {
+    this.api = new ProfileApi(api)
+    this.joinClass = new ProfileJoinClassModel(this.api, notify)
+    this.language = new ProfileLanguageModel(this.api)
+    this.$user = $user
+    this.$settings = $settings
+
+    this.init()
+  }
+
+  private init() {
+    sample({
+      clock: this.setTextToSpeech,
+      fn: (textToSpeech) => ({ textToSpeech }),
+      target: this.api.updateSettingsFx,
+    })
+
+    sample({
+      clock: this.setTextSize,
+      fn: (textSize) => ({ textSize }),
+      target: this.api.updateSettingsFx,
+    })
+
+    sample({
+      clock: this.setCanvasType,
+      fn: (canvasType) => ({ canvasType }),
+      target: this.api.updateSettingsFx,
+    })
+  }
+}

package/src/features/profile/model/profileModal.types.ts

@@ -0,0 +1,16 @@
+import type { ProfileModel } from './ProfileModel'
+
+export type ProfileModalParams = {
+  model: ProfileModel
+}
+
+export type LogoutModalParams = {
+  onConfirm: () => void
+}
+
+export type ProfileModalProps<Params = ProfileModalParams> = {
+  modal: {
+    closeModal: () => void
+    params: Params
+  }
+}

package/src/features/profile/shared/JoinClassError.ts

@@ -0,0 +1,7 @@
+// Carries the backend error code so the library can map it to a message without parsing HTTP errors.
+export class JoinClassError extends Error {
+  constructor(public readonly code: number | null) {
+    super(code === null ? 'Join class failed' : `Join class failed (code ${code})`)
+    this.name = 'JoinClassError'
+  }
+}

package/src/features/profile/shared/profile.constants.ts

@@ -0,0 +1,23 @@
+export enum ProfileCanvasType {
+  DRAWING = 1,
+  SPREADSHEET = 2,
+}
+
+export const TEXT_SIZE = {
+  MIN: 16,
+  MAX: 32,
+  STEP: 4,
+} as const
+
+export const CLASS_CODE_LENGTH = 6
+
+export enum JoinClassStatus {
+  SUCCESS = 'success',
+  ERROR = 'error',
+}
+
+export enum JoinClassErrorCode {
+  CLASS_NOT_FOUND = 1021,
+  ALREADY_JOINED = 1030,
+  OTHER_DISTRICT = 1035,
+}

package/src/features/profile/shared/profile.helpers.ts

@@ -0,0 +1,36 @@
+import { Language, LANGUAGES_CONFIG, PRIORITY_LANGUAGES } from '@magmamath/frontend-config'
+
+import { getText, type TranslationKey } from '../../../i18n/i18n'
+import { JoinClassErrorCode, TEXT_SIZE } from './profile.constants'
+
+export const getAvailableLanguages = (search?: string): Language[] => {
+  const prioritySet = new Set<Language>(PRIORITY_LANGUAGES)
+
+  const otherLanguages = Object.values(Language).filter(
+    (language) => !LANGUAGES_CONFIG[language]?.baseName && !prioritySet.has(language)
+  )
+
+  const allLanguages = [...PRIORITY_LANGUAGES, ...otherLanguages]
+  if (!search) return allLanguages
+
+  const query = search.toLowerCase()
+  return allLanguages.filter((language) => language.toLowerCase().includes(query))
+}
+
+export const snapTextSize = (value: number): number => {
+  const { MIN, MAX, STEP } = TEXT_SIZE
+  const clamped = Math.min(MAX, Math.max(MIN, value))
+  return Math.round((clamped - MIN) / STEP) * STEP + MIN
+}
+
+const JOIN_CLASS_ERROR_KEYS: Record<number, TranslationKey> = {
+  [JoinClassErrorCode.CLASS_NOT_FOUND]: 'profile.joinClassErrorNotFound',
+  [JoinClassErrorCode.ALREADY_JOINED]: 'profile.joinClassErrorAlreadyJoined',
+  [JoinClassErrorCode.OTHER_DISTRICT]: 'profile.joinClassErrorOtherDistrict',
+}
+
+export const getJoinClassSuccessMessage = (className: string): string =>
+  getText('profile.joinClassSuccess', { className })
+
+export const getJoinClassErrorMessage = (code: number | null): string =>
+  getText((code !== null && JOIN_CLASS_ERROR_KEYS[code]) || 'profile.joinClassErrorDefault')

package/src/features/profile/shared/profile.types.ts

@@ -0,0 +1,34 @@
+import type { Language } from '@magmamath/frontend-config'
+
+import type { JoinClassStatus, ProfileCanvasType } from './profile.constants'
+
+export type ProfileUser = {
+  fullName: string
+  username: string
+  schoolName: string
+}
+
+export type ProfileSettings = {
+  textToSpeech: boolean
+  textSize: number
+  translationLanguage: Language | null
+  canvasType: ProfileCanvasType
+  isTranslationLocked: boolean
+}
+
+export type ProfileSettingsUpdate = Partial<ProfileSettings>
+
+export type JoinClassPayload = {
+  classCode: string
+}
+
+export type JoinClassResult = {
+  name: string
+}
+
+export type JoinClassNotification = {
+  status: JoinClassStatus
+  message: string
+}
+
+export type NotifyJoinClass = (notification: JoinClassNotification) => void

package/src/i18n/.generated/schema.json

@@ -56,13 +56,20 @@
   },
   "profile": {
     "accountInfo": "Account info",
+    "cancel": "Cancel",
     "changePasswordNote": "Ask your teacher if you need to change password",
     "fullName": "Full name",
     "joinClassButton": "Join new class",
+    "joinClassErrorAlreadyJoined": "You have already joined this class",
+    "joinClassErrorDefault": "Default error! Code not found",
+    "joinClassErrorNotFound": "The class doesn’t exist, try another class code",
+    "joinClassErrorOtherDistrict": "You can only join classes in your district",
+    "joinClassSuccess": "You have joined class {{className}}",
     "joinClassTitle": "Write your new class code",
     "joinNewClass": "Join a new class",
     "languageSettings": "Language settings",
     "logOut": "Log out",
+    "logOutConfirmMessage": "Are you sure you want to log out?",
     "noLanguage": "No language",
     "preferences": "Preferences",
     "school": "School",
@@ -74,7 +81,8 @@
     "textToSpeech": "Text-to-speech",
     "translationLanguage": "Translation language",
     "translationModalTitle": "Translation language",
-    "username": "Username"
+    "username": "Username",
+    "yes": "Yes"
   },
   "student": {
     "fluency": {

package/src/index.ts

@@ -16,3 +16,4 @@ export * from './features/uiMode'
 export * from './features/fluency'
 export * from './features/fluency-teacher'
 export * from './features/translation'
+export * from './features/profile'

package/src/shared/hooks/useKeyboardOffset.ts

@@ -0,0 +1,57 @@
+import { useEffect, useRef } from 'react'
+import { Animated, Keyboard, Platform, type KeyboardEvent } from 'react-native'
+
+import { isWeb } from '../common.constants'
+
+const SHOW_EVENT = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow'
+const HIDE_EVENT = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide'
+const ANIMATION_DURATION = 220
+
+/**
+ * Returns an animated value tracking the on-screen keyboard height.
+ *
+ * - native: subscribes to the platform `Keyboard` events.
+ * - web: reads `visualViewport`, so it only reacts to a *virtual* keyboard
+ *   (mobile browsers). A physical desktop keyboard never shrinks the viewport,
+ *   so the value stays 0 and nothing moves.
+ */
+export const useKeyboardOffset = () => {
+  const keyboardHeight = useRef(new Animated.Value(0)).current
+
+  useEffect(() => {
+    const animateTo = (toValue: number) =>
+      Animated.timing(keyboardHeight, {
+        toValue,
+        duration: ANIMATION_DURATION,
+        useNativeDriver: !isWeb,
+      }).start()
+
+    if (isWeb) {
+      const viewport = window.visualViewport
+      if (!viewport) return
+
+      const update = () => {
+        const overlap = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop)
+        animateTo(overlap)
+      }
+
+      viewport.addEventListener('resize', update)
+      viewport.addEventListener('scroll', update)
+      return () => {
+        viewport.removeEventListener('resize', update)
+        viewport.removeEventListener('scroll', update)
+      }
+    }
+
+    const showSub = Keyboard.addListener(SHOW_EVENT, (event: KeyboardEvent) =>
+      animateTo(event.endCoordinates.height),
+    )
+    const hideSub = Keyboard.addListener(HIDE_EVENT, () => animateTo(0))
+    return () => {
+      showSub.remove()
+      hideSub.remove()
+    }
+  }, [keyboardHeight])
+
+  return keyboardHeight
+}