factor out settings and login local storage actions

Author: cirosantilli

front.ts

@@ -1,3 +1,6 @@
+import UserAPI from 'front/api/user'
+import { mutate } from 'swr'
+
 export const AUTH_COOKIE_NAME = 'auth'
 export const AUTH_LOCAL_STORAGE_NAME = 'user'
 
@@ -50,3 +53,21 @@ export function getCookiesFromString(s) {
 export function deleteCookie(name, path = '/') {
   setCookie(name, '', -1, path)
 }
+
+export async function setupUserLocalStorage(data, setErrors) {
+  // We fetch from /profiles/:username again because the return from /users/login above
+  // does not contain the image placeholder.
+  const { data: profileData, status: profileStatus } = await UserAPI.get(
+    data.user.username
+  )
+  if (profileStatus !== 200) {
+    setErrors(profileData.errors)
+  }
+  data.user.effectiveImage = profileData.profile.image
+  window.localStorage.setItem(
+    AUTH_LOCAL_STORAGE_NAME,
+    JSON.stringify(data.user)
+  )
+  setCookie(AUTH_COOKIE_NAME, data.user.token)
+  mutate(AUTH_LOCAL_STORAGE_NAME, data.user)
+}

front/LoginForm.tsx

@@ -1,10 +1,9 @@
 import Router from 'next/router'
 import React from 'react'
-import { mutate } from 'swr'
 
+import { setupUserLocalStorage } from 'front'
 import ListErrors from 'front/ListErrors'
 import UserAPI from 'front/api/user'
-import { AUTH_COOKIE_NAME, AUTH_LOCAL_STORAGE_NAME, setCookie } from 'front'
 import { useCtrlEnterSubmit } from 'front/ts'
 
 const LoginForm = ({ register = false }) => {
@@ -39,21 +38,7 @@ const LoginForm = ({ register = false }) => {
         setErrors(data.errors)
       }
       if (data?.user) {
-        // We fetch from /profiles/:username again because the return from /users/login above
-        // does not contain the image placeholder.
-        const { data: profileData, status: profileStatus } = await UserAPI.get(
-          data.user.username
-        )
-        if (profileStatus !== 200) {
-          setErrors(profileData.errors)
-        }
-        data.user.effectiveImage = profileData.profile.image
-        window.localStorage.setItem(
-          AUTH_LOCAL_STORAGE_NAME,
-          JSON.stringify(data.user)
-        )
-        setCookie(AUTH_COOKIE_NAME, data.user.token)
-        mutate(AUTH_LOCAL_STORAGE_NAME, data.user)
+        await setupUserLocalStorage(data, setErrors)
         Router.push('/')
       }
     } catch (error) {

front/SettingsForm.tsx

@@ -1,12 +1,11 @@
 import axios from 'axios'
 import Router from 'next/router'
 import React from 'react'
-import { mutate } from 'swr'
 
+import { setupUserLocalStorage } from 'front'
 import { apiPath } from 'front/config'
 import ListErrors from 'front/ListErrors'
 import useLoggedInUser from 'front/useLoggedInUser'
-import UserAPI from 'front/api/user'
 import { useCtrlEnterSubmit } from 'front/ts'
 
 const SettingsForm = () => {
@@ -49,15 +48,7 @@ const SettingsForm = () => {
       setErrors(data.errors.body)
     }
     if (data?.user) {
-      const { data: profileData, status: profileStatus } = await UserAPI.get(
-        data.user.username
-      )
-      if (profileStatus !== 200) {
-        setErrors(profileData.errors)
-      }
-      data.user.effectiveImage = profileData.profile.image
-      window.localStorage.setItem('user', JSON.stringify(data.user))
-      mutate('user', data.user)
+      await setupUserLocalStorage(data, setErrors)
       Router.push(`/profile/${user.username}`)
     }
   }