storj/web/satellite/src/store/index.ts
Monty Anderson 804304a75d web/satellite: integrate browser
* create `isInitalized` property to check S3 client exists
* hide FileBrowser until `isInitialized === true`
* change broken reference from `buttonUpload` to `buttonFileUpload`
* add feature flag `new-browser` to switch between external and internal browser
* fix handling of `webkitRelativePath` for folder upload feature
* only load external styles when using external browser via contingent `file-browser` class

Change-Id: Ibdbfa45d8dbe3c6d828473c16e4cdb8694562c1a
2021-11-05 16:30:07 +02:00

105 lines
4.4 KiB
TypeScript

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import { files } from 'browser';
import Vue from 'vue';
import Vuex from 'vuex';
import { AccessGrantsApiGql } from '@/api/accessGrants';
import { AuthHttpApi } from '@/api/auth';
import { BucketsApiGql } from '@/api/buckets';
import { PaymentsHttpApi } from '@/api/payments';
import { ProjectMembersApiGql } from '@/api/projectMembers';
import { ProjectsApiGql } from '@/api/projects';
import { notProjectRelatedRoutes, router } from '@/router';
import { AccessGrantsState, makeAccessGrantsModule } from '@/store/modules/accessGrants';
import { appStateModule } from '@/store/modules/appState';
import { makeBucketsModule } from '@/store/modules/buckets';
import { makeNotificationsModule, NotificationsState } from '@/store/modules/notifications';
import { makeObjectsModule, ObjectsState } from '@/store/modules/objects';
import { makePaymentsModule, PaymentsState } from '@/store/modules/payments';
import { makeProjectMembersModule, ProjectMembersState } from '@/store/modules/projectMembers';
import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/modules/projects';
import { makeUsersModule } from '@/store/modules/users';
import { User } from '@/types/users';
import { MetaUtils } from '@/utils/meta';
import internalFiles from '@/store/modules/files';
import * as externalBrowser from 'browser';
const files = MetaUtils.getMetaContent('new-browser') === "true" ? internalFiles : externalBrowser.files;
Vue.use(Vuex);
type Mutation<State> =
(state: State, ...args: any[]) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
type Action<Context> =
(context: Context, ...args: any[]) => (Promise<any> | void | any); // eslint-disable-line @typescript-eslint/no-explicit-any
type Getter<State, Context> =
Context extends {rootGetters: any} ? ( // eslint-disable-line @typescript-eslint/no-explicit-any
((state: State) => any) | // eslint-disable-line @typescript-eslint/no-explicit-any
((state: State, rootGetters: Context["rootGetters"]) => any) // eslint-disable-line @typescript-eslint/no-explicit-any
) : ((state: State) => any); // eslint-disable-line @typescript-eslint/no-explicit-any
export interface StoreModule<State, Context> { // eslint-disable-line @typescript-eslint/no-unused-vars
state: State;
mutations: Record<string, Mutation<State>>
actions: Record<string, Action<Context>>
getters?: Record<string, Getter<State, Context>>
}
// TODO: remove it after we will use modules as classes and use some DI framework
const authApi = new AuthHttpApi();
const accessGrantsApi = new AccessGrantsApiGql();
const bucketsApi = new BucketsApiGql();
const projectMembersApi = new ProjectMembersApiGql();
const projectsApi = new ProjectsApiGql();
const paymentsApi = new PaymentsHttpApi();
export interface ModulesState {
notificationsModule: NotificationsState;
accessGrantsModule: AccessGrantsState;
appStateModule: typeof appStateModule.state;
projectMembersModule: ProjectMembersState;
paymentsModule: PaymentsState;
usersModule: User;
projectsModule: ProjectsState;
objectsModule: ObjectsState;
files: any; // eslint-disable-line @typescript-eslint/no-explicit-any
}
// Satellite store (vuex)
export const store = new Vuex.Store<ModulesState>({
modules: {
notificationsModule: makeNotificationsModule(),
accessGrantsModule: makeAccessGrantsModule(accessGrantsApi),
appStateModule,
projectMembersModule: makeProjectMembersModule(projectMembersApi),
paymentsModule: makePaymentsModule(paymentsApi),
usersModule: makeUsersModule(authApi),
projectsModule: makeProjectsModule(projectsApi),
bucketUsageModule: makeBucketsModule(bucketsApi),
objectsModule: makeObjectsModule(),
files,
},
});
store.subscribe((mutation, state) => {
const currentRouteName = router.currentRoute.name;
const satelliteName = state.appStateModule.satelliteName;
switch (mutation.type) {
case PROJECTS_MUTATIONS.REMOVE:
document.title = `${router.currentRoute.name} | ${satelliteName}`;
break;
case PROJECTS_MUTATIONS.SELECT_PROJECT:
if (currentRouteName && !notProjectRelatedRoutes.includes(currentRouteName)) {
document.title = `${state.projectsModule.selectedProject.name} | ${currentRouteName} | ${satelliteName}`;
}
}
});
export default store;