Appearance

Box Store ​

File Information ​

  • Path: store/box/index.js
  • Namespace: box
  • Purpose: Manages Box.com cloud storage integration state

Overview ​

The Box Store manages state for the Box.com cloud storage integration, including authentication tokens, file lists, upload status, and folder navigation. It handles the connection between the Admin Frontend and Box.com API.

State ​

javascript
{
  authenticated: false,      // Authentication status
  accessToken: null,         // OAuth access token
  refreshToken: null,         // OAuth refresh token
  tokenExpiry: null,         // Token expiration time
  currentFolder: null,       // Current folder object
  folderPath: [],            // Breadcrumb folder path
  fileList: [],              // Current folder file list
  folders: [],               // Current folder subfolders
  files: [],                 // Current folder files
  loading: false,            // Loading state
  uploading: false,           // Upload state
  uploadProgress: 0,         // Upload progress percentage
  error: null,               // Error message
  selectedFiles: []          // Selected files for operations
}

Getters ​

isAuthenticated ​

Returns authentication status:

  • Checks if access token exists
  • Checks if token is not expired
  • Used for conditional rendering

Returns: Boolean

currentFolder ​

Returns current folder object:

  • Current folder being viewed
  • Contains folder metadata
  • Used for navigation

Returns: Folder object or null

fileList ​

Returns combined file and folder list:

  • Merges folders and files
  • Sorted for display
  • Used in file browser

Returns: Array of file/folder objects

uploadProgress ​

Returns upload progress:

  • Current upload progress percentage
  • Used for progress indicators

Returns: Number (0-100)

Mutations ​

SET_AUTHENTICATED ​

Sets authentication status:

  • Updates authenticated flag
  • Called after login/logout

Parameters:

  • status (Boolean): Authentication status

SET_TOKENS ​

Sets OAuth tokens:

  • Updates access token
  • Updates refresh token
  • Updates token expiry

Parameters:

  • tokens (Object): Token object with accessToken, refreshToken, expiry

SET_CURRENT_FOLDER ​

Sets current folder:

  • Updates current folder object
  • Resets file list
  • Used for navigation

Parameters:

  • folder (Object): Folder object

SET_FILE_LIST ​

Sets file list:

  • Updates folders array
  • Updates files array
  • Called after fetching folder contents

Parameters:

  • data (Object): Object with folders and files arrays

SET_LOADING ​

Sets loading state:

  • Updates loading flag
  • Used for loading indicators

Parameters:

  • loading (Boolean): Loading state

SET_UPLOADING ​

Sets upload state:

  • Updates uploading flag
  • Used for upload indicators

Parameters:

  • uploading (Boolean): Upload state

SET_UPLOAD_PROGRESS ​

Sets upload progress:

  • Updates progress percentage
  • Used for progress bars

Parameters:

  • progress (Number): Progress percentage (0-100)

SET_ERROR ​

Sets error message:

  • Updates error state
  • Clears on success

Parameters:

  • error (String|null): Error message

Actions ​

authenticate({ commit }, authCode) ​

Authenticates with Box.com:

  • Exchanges auth code for tokens
  • Stores tokens in state
  • Updates authentication status

Parameters:

  • authCode (string): OAuth authorization code

Returns: Promise resolving to authentication result

refreshToken({ commit, state }) ​

Refreshes access token:

  • Uses refresh token to get new access token
  • Updates token in state
  • Called when token expires

Returns: Promise resolving to new tokens

fetchFolder({ commit }, folderId) ​

Fetches folder contents:

  • Gets folders and files in folder
  • Updates file list
  • Updates current folder

Parameters:

  • folderId (string): Folder ID (null for root)

Returns: Promise resolving to folder contents

uploadFile({ commit }, { file, folderId }) ​

Uploads file to Box:

  • Uploads file to specified folder
  • Tracks upload progress
  • Updates file list on completion

Parameters:

  • file (File): File object to upload
  • folderId (string): Target folder ID

Returns: Promise resolving to uploaded file

downloadFile({ commit }, fileId) ​

Downloads file from Box:

  • Downloads file by ID
  • Returns file blob
  • Handles errors

Parameters:

  • fileId (string): File ID

Returns: Promise resolving to file blob

logout({ commit }) ​

Logs out from Box:

  • Clears tokens
  • Resets state
  • Updates authentication status

Usage Examples ​

Authenticate ​

javascript
// In component
async handleBoxAuth() {
  try {
    await this.$store.dispatch('box/authenticate', authCode)
    this.$snackbar.success('Connected to Box')
  } catch (error) {
    this.$snackbar.error('Failed to connect to Box')
  }
}

Fetch Folder ​

javascript
// In component
async loadFolder(folderId) {
  this.$store.commit('box/SET_LOADING', true)
  try {
    await this.$store.dispatch('box/fetchFolder', folderId)
  } catch (error) {
    this.$store.commit('box/SET_ERROR', error.message)
  } finally {
    this.$store.commit('box/SET_LOADING', false)
  }
}

Upload File ​

javascript
// In component
async uploadToBox(file) {
  const folderId = this.$store.getters['box/currentFolder']?.id
  try {
    await this.$store.dispatch('box/uploadFile', {
      file,
      folderId
    })
    this.$snackbar.success('File uploaded to Box')
  } catch (error) {
    this.$snackbar.error('Upload failed')
  }
}

Integration Points ​

  • Box API: Box.com API integration
  • File Browser: Box file browser component
  • Upload Components: File upload to Box
  • Authentication: OAuth flow

Notes for Development ​

  • Store manages Box.com integration state
  • OAuth tokens stored in state
  • File list updated on folder navigation
  • Upload progress tracked in state
  • Error handling for API failures