JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: use pinia projects module instead of old vuex module

Browse Source 
Start using new pinia module instead of old vuex module

Change-Id: I6bb5d4a5cf0eeb4d0a86afce760f5c258c20c1e5
This commit is contained in:
Vitalii 2023-04-13 14:41:03 +03:00 committed by Vitalii Shpital
parent daf5264f48
commit 27d9d9f6d4
57 changed files with 460 additions and 1068 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/satellite/src/components/accessGrants/AccessGrants.vue
View File

@ -169,8 +169,9 @@ import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AccessType } from '@/types/createAccessGrant';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import AccessGrantsItem from '@/components/accessGrants/AccessGrantsItem.vue';
import ConfirmDeletePopup from '@/components/accessGrants/ConfirmDeletePopup.vue';
@ -188,7 +189,7 @@ const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const agStore = useAccessGrantsStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -247,7 +248,7 @@ const emptyStateLabel = computed((): string => {
*/
async function onPageClick(index: number): Promise<void> {
try {
agStore.getAccessGrants(index, store.getters.selectedProject.id);
agStore.getAccessGrants(index, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch Access Grants. ${error.message}`, AnalyticsErrorEventSource.ACCESS_GRANTS_PAGE);
}
@ -289,7 +290,7 @@ async function fetch(searchQuery: string): Promise<void> {
agStore.setSearchQuery(searchQuery);
try {
await agStore.getAccessGrants(FIRST_PAGE, store.getters.selectedProject.id);
await agStore.getAccessGrants(FIRST_PAGE, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch accesses: ${error.message}`, AnalyticsErrorEventSource.ACCESS_GRANTS_PAGE);
}
@ -340,7 +341,7 @@ function trackPageVisit(link: string): void {
onMounted(async () => {
try {
await agStore.getAccessGrants(FIRST_PAGE, store.getters.selectedProject.id);
await agStore.getAccessGrants(FIRST_PAGE, projectsStore.state.selectedProject.id);
areGrantsFetching.value = false;
} catch (error) {
await notify.error(`Unable to fetch Access Grants. ${error.message}`, AnalyticsErrorEventSource.ACCESS_GRANTS_PAGE);

7
web/satellite/src/components/accessGrants/AccessGrantsHeader.vue
View File

@ -46,17 +46,18 @@
import { Fragment } from 'vue-fragment';
import { computed, ref } from 'vue';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { SortDirection } from '@/types/common';
import { AccessGrantsOrderBy } from '@/types/accessGrants';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import AscIcon from '@/../static/images/objects/asc.svg';
import DescIcon from '@/../static/images/objects/desc.svg';
const agStore = useAccessGrantsStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const hover = ref<AccessGrantsOrderBy>();
@ -108,7 +109,7 @@ async function sortBy(sortBy: AccessGrantsOrderBy): Promise<void> {
}
try {
await agStore.getAccessGrants(agStore.state.page.currentPage, store.getters.selectedProject.id);
await agStore.getAccessGrants(agStore.state.page.currentPage, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch accesses. ${error.message}`, AnalyticsErrorEventSource.ACCESS_GRANTS_PAGE);
}

7
web/satellite/src/components/accessGrants/ConfirmDeletePopup.vue
View File

@ -60,8 +60,9 @@ import { computed, ref } from 'vue';
import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
@ -71,7 +72,7 @@ import CloseCrossIcon from '@/../static/images/common/closeCross.svg';
const FIRST_PAGE = 1;
const agStore = useAccessGrantsStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const isLoading = ref<boolean>(false);
@ -108,7 +109,7 @@ async function onDeleteClick(): Promise<void> {
}
try {
await agStore.getAccessGrants(FIRST_PAGE, store.getters.selectedProject.id);
await agStore.getAccessGrants(FIRST_PAGE, projectsStore.state.selectedProject.id);
agStore.clearSelection();
} catch (error) {
await notify.error(`Unable to fetch Access Grants. ${error.message}`, AnalyticsErrorEventSource.CONFIRM_DELETE_AG_MODAL);

12
web/satellite/src/components/accessGrants/createFlow/CreateAccessGrantFlow.vue
View File

@ -110,7 +110,7 @@
import { computed, onMounted, reactive, ref } from 'vue';
import { generateMnemonic } from 'bip39';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import {
AccessType,
@ -121,12 +121,12 @@ import {
} from '@/types/createAccessGrant';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VModal from '@/components/common/VModal.vue';
import CreateNewAccessStep from '@/components/accessGrants/createFlow/steps/CreateNewAccessStep.vue';
@ -143,7 +143,7 @@ import ConfirmDetailsStep from '@/components/accessGrants/createFlow/steps/Confi
const bucketsStore = useBucketsStore();
const agStore = useAccessGrantsStore();
const appStore = useAppStore();
const store = useStore();
const projectsStore = useProjectsStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
const notify = useNotify();
@ -457,7 +457,7 @@ async function createCLIAccess(): Promise<void> {
throw new Error('Web worker is not initialized.');
}
const projectID = store.getters.selectedProject.id;
const projectID = projectsStore.state.selectedProject.id;
// creates fresh new API key.
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(accessName.value, projectID);
@ -510,7 +510,7 @@ async function createAccessGrant(): Promise<void> {
// creates access credentials.
const satelliteNodeURL = appStore.state.config.satelliteNodeURL;
const salt = await store.dispatch(PROJECTS_ACTIONS.GET_SALT, store.getters.selectedProject.id);
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
let usedPassphrase = '';
switch (passphraseOption.value) {
@ -624,7 +624,7 @@ onMounted(async () => {
generatedPassphrase.value = generateMnemonic();
try {
await bucketsStore.getAllBucketsNames(store.getters.selectedProject.id);
await bucketsStore.getAllBucketsNames(projectsStore.state.selectedProject.id);
} catch (error) {
notify.error(`Unable to fetch all bucket names. ${error.message}`, AnalyticsErrorEventSource.CREATE_AG_MODAL);
}

12
web/satellite/src/components/account/billing/billingTabs/Overview.vue
View File

@ -94,11 +94,11 @@ import { computed, onMounted, ref } from 'vue';
import { RouteConfig } from '@/router';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { AccountBalance } from '@/types/payments';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import UsageAndChargesItem from '@/components/account/billing/billingTabs/UsageAndChargesItem.vue';
import VButton from '@/components/common/VButton.vue';
@ -110,7 +110,7 @@ import CalendarIcon from '@/../static/images/account/billing/calendar-icon.svg';
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const billingStore = useBillingStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -122,7 +122,7 @@ const currentDate = ref<string>('');
* Returns account balance from store.
*/
const balance = computed((): AccountBalance => {
return billingStore.state.balance;
return billingStore.state.balance as AccountBalance;
});
/**
@ -136,7 +136,7 @@ const hasZeroCoins = computed((): boolean => {
* projectIDs is an array of all of the project IDs for which there exist project usage charges.
*/
const projectIDs = computed((): string[] => {
return store.state.projectsModule.projects
return projectsStore.state.projects
.filter(proj => billingStore.state.projectCharges.hasProject(proj.id))
.sort((proj1, proj2) => proj1.name.localeCompare(proj2.name))
.map(proj => proj.id);
@ -172,7 +172,7 @@ function balanceClicked(): void {
*/
onMounted(async () => {
try {
await store.dispatch(PROJECTS_ACTIONS.FETCH);
await projectsStore.getProjects();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BILLING_OVERVIEW_TAB);
isDataFetching.value = false;

11
web/satellite/src/components/account/billing/billingTabs/PaymentMethods.vue
View File

@ -188,10 +188,11 @@ import {
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -226,7 +227,7 @@ interface CardEdited {
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const appStore = useAppStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -265,21 +266,21 @@ const nativeTokenPaymentsEnabled = computed((): boolean => {
* Returns deposit history items.
*/
const nativePaymentHistoryItems = computed((): NativePaymentHistoryItem[] => {
return billingStore.state.nativePaymentsHistory;
return billingStore.state.nativePaymentsHistory as NativePaymentHistoryItem[];
});
/**
* Returns wallet entity from store.
*/
const wallet = computed((): Wallet => {
return billingStore.state.wallet;
return billingStore.state.wallet as Wallet;
});
/**
* Indicates if user has own project.
*/
const userHasOwnProject = computed((): boolean => {
return store.getters.projectsCount(usersStore.state.user.id) > 0;
return projectsStore.projectsCount(usersStore.state.user.id) > 0;
});
const creditCards = computed((): CreditCard[] => {

8
web/satellite/src/components/account/billing/billingTabs/UsageAndChargesItem.vue
View File

@ -64,8 +64,8 @@ import { Project } from '@/types/projects';
import { Size } from '@/utils/bytesSize';
import { SHORT_MONTHS_NAMES } from '@/utils/constants/date';
import { decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_GB_SHIFT } from '@/utils/strings';
import { useStore } from '@/utils/hooks';
import { useBillingStore } from '@/store/modules/billingStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import GreyChevron from '@/../static/images/common/greyChevron.svg';
@ -84,7 +84,7 @@ const props = withDefaults(defineProps<{
});
const billingStore = useBillingStore();
const store = useStore();
const projectsStore = useProjectsStore();
/**
* isDetailedInfoShown indicates if area with detailed information about project charges is expanded.
@ -105,7 +105,7 @@ const partnerCharges = computed((): [partner: string, charge: ProjectCharge][] =
* projectName returns project name.
*/
const projectName = computed((): string => {
const projects: Project[] = store.state.projectsModule.projects;
const projects: Project[] = projectsStore.state.projects;
const project: Project | undefined = projects.find(project => project.id === props.projectId);
return project?.name || '';
@ -115,7 +115,7 @@ const projectName = computed((): string => {
* Returns project usage price model from store.
*/
const projectCharges = computed((): ProjectCharges => {
return billingStore.state.projectCharges;
return billingStore.state.projectCharges as ProjectCharges;
});
/**

10
web/satellite/src/components/infoBars/ProjectInfoBar.vue
View File

@ -28,17 +28,17 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VLoader from '@/components/common/VLoader.vue';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const isDataFetching = ref<boolean>(true);
@ -47,7 +47,7 @@ const isDataFetching = ref<boolean>(true);
* Returns user's projects count.
*/
const projectsCount = computed((): number => {
return store.getters.projectsCount(usersStore.state.user.id);
return projectsStore.projectsCount(usersStore.state.user.id);
});
/**
@ -73,7 +73,7 @@ const projectLimitsIncreaseRequestURL = computed((): string => {
*/
onMounted(async (): Promise<void> => {
try {
await store.dispatch(PROJECTS_ACTIONS.FETCH);
await projectsStore.getProjects();
isDataFetching.value = false;
} catch (error) {

8
web/satellite/src/components/modals/AddPaymentMethodModal.vue
View File

@ -130,9 +130,8 @@
<script setup lang="ts">
import { computed, onMounted, onBeforeMount, ref, reactive } from 'vue';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
@ -141,6 +140,7 @@ import { decimalShift, formatPrice, CENTS_MB_TO_DOLLARS_TB_SHIFT } from '@/utils
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -158,7 +158,7 @@ interface StripeForm {
const appStore = useAppStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -216,7 +216,7 @@ async function addCardToDB(token: string): Promise<void> {
await usersStore.getUser();
if (router.currentRoute.name === RouteConfig.ProjectDashboard.name) {
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
await projectsStore.getProjectLimits(projectsStore.state.selectedProject.id);
}
await analytics.eventTriggered(AnalyticsEvent.MODAL_ADD_CARD);

9
web/satellite/src/components/modals/AddTeamMemberModal.vue
View File

@ -88,10 +88,11 @@ import { Validator } from '@/utils/validation';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
@ -104,7 +105,7 @@ import DeleteFieldIcon from '@/../static/images/team/deleteField.svg';
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const FIRST_PAGE = 1;
@ -210,7 +211,7 @@ async function onAddUsersClick(): Promise<void> {
}
try {
await pmStore.addProjectMembers(emailArray, store.getters.selectedProject.id);
await pmStore.addProjectMembers(emailArray, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Error during adding project members. ${error.message}`, AnalyticsErrorEventSource.ADD_PROJECT_MEMBER_MODAL);
isLoading.value = false;
@ -223,7 +224,7 @@ async function onAddUsersClick(): Promise<void> {
pmStore.setSearchQuery('');
try {
await pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id);
await pmStore.getProjectMembers(FIRST_PAGE, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.ADD_PROJECT_MEMBER_MODAL);
}

12
web/satellite/src/components/modals/CreateBucketModal.vue
View File

@ -55,15 +55,15 @@ import { computed, onMounted, ref } from 'vue';
import { RouteConfig } from '@/router';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { Validator } from '@/utils/validation';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { LocalData } from '@/utils/localData';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -75,7 +75,7 @@ import CreateBucketIcon from '@/../static/images/buckets/createBucket.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -158,7 +158,7 @@ async function onCreate(): Promise<void> {
isLoading.value = true;
try {
const projectID = store.getters.selectedProject.id;
const projectID = projectsStore.state.selectedProject.id;
if (!promptForPassphrase.value) {
if (!edgeCredentials.value.accessKeyId) {
@ -223,7 +223,7 @@ async function onCreate(): Promise<void> {
return;
}
const salt = await store.dispatch(PROJECTS_ACTIONS.GET_SALT, store.getters.selectedProject.id);
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
const satelliteNodeURL: string = appStore.state.config.satelliteNodeURL;
worker.value.postMessage({
@ -310,7 +310,7 @@ onMounted(async (): Promise<void> => {
setWorker();
try {
await bucketsStore.getAllBucketsNames(store.getters.selectedProject.id);
await bucketsStore.getAllBucketsNames(projectsStore.state.selectedProject.id);
bucketName.value = allBucketNames.value.length > 0 ? '' : 'demo-bucket';
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BUCKET_CREATION_NAME_STEP);

11
web/satellite/src/components/modals/CreateProjectModal.vue
View File

@ -63,26 +63,26 @@
import { ref } from 'vue';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
const projectsStore = useProjectsStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const notify = useNotify();
const router = useRouter();
@ -135,8 +135,7 @@ async function onCreateProjectClick(): Promise<void> {
}
try {
const createdProject = await store.dispatch(PROJECTS_ACTIONS.CREATE, project);
createdProjectId.value = createdProject.id;
createdProjectId.value = await projectsStore.createProject(project);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
isLoading.value = false;
@ -162,7 +161,7 @@ async function onCreateProjectClick(): Promise<void> {
* Selects just created project.
*/
function selectCreatedProject(): void {
store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId.value);
projectsStore.selectProject(createdProjectId.value);
LocalData.setSelectedProjectId(createdProjectId.value);
}

12
web/satellite/src/components/modals/DeleteBucketModal.vue
View File

@ -34,12 +34,12 @@ import { computed, onMounted, ref } from 'vue';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore, FILE_BROWSER_AG_NAME } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VModal from '@/components/common/VModal.vue';
import VButton from '@/components/common/VButton.vue';
@ -50,7 +50,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const worker = ref<Worker| null>(null);
@ -77,7 +77,7 @@ async function onDelete(): Promise<void> {
isLoading.value = true;
const projectID = store.getters.selectedProject.id;
const projectID = projectsStore.state.selectedProject.id;
try {
if (!apiKey.value) {
@ -110,7 +110,7 @@ async function onDelete(): Promise<void> {
return;
}
const salt = await store.dispatch(PROJECTS_ACTIONS.GET_SALT, store.getters.selectedProject.id);
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
const satelliteNodeURL: string = appStore.state.config.satelliteNodeURL;
worker.value.postMessage({
@ -153,7 +153,7 @@ async function onDelete(): Promise<void> {
*/
async function fetchBuckets(page = 1): Promise<void> {
try {
await bucketsStore.getBuckets(page, store.getters.selectedProject.id);
await bucketsStore.getBuckets(page, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.DELETE_BUCKET_MODAL);
}

7
web/satellite/src/components/modals/LimitWarningModal.vue
View File

@ -34,18 +34,17 @@
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from '@/utils/hooks';
import { ProjectLimits } from '@/types/projects';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
import VModal from '@/components/common/VModal.vue';
import Icon from '@/../static/images/project/chart.svg';
const store = useStore();
const projectsStore = useProjectsStore();
const props = defineProps<{
severity: 'warning' | 'critical';
@ -59,7 +58,7 @@ const props = defineProps<{
* Returns current limits from store.
*/
const limits = computed((): ProjectLimits => {
return store.state.projectsModule.currentLimits;
return projectsStore.state.currentLimits;
});
</script>

11
web/satellite/src/components/modals/NewCreateProjectModal.vue
View File

@ -78,17 +78,17 @@
import { ref } from 'vue';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VLoader from '@/components/common/VLoader.vue';
import VInput from '@/components/common/VInput.vue';
@ -101,7 +101,7 @@ const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const router = useRouter();
const notify = useNotify();
@ -157,8 +157,7 @@ async function onCreateProjectClick(): Promise<void> {
}
try {
const createdProject = await store.dispatch(PROJECTS_ACTIONS.CREATE, project);
createdProjectId.value = createdProject.id;
createdProjectId.value = await projectsStore.createProject(project);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
isLoading.value = false;
@ -188,7 +187,7 @@ async function onCreateProjectClick(): Promise<void> {
* Selects just created project.
*/
async function selectCreatedProject() {
await store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId.value);
projectsStore.selectProject(createdProjectId.value);
LocalData.setSelectedProjectId(createdProjectId.value);
pmStore.setSearchQuery('');

7
web/satellite/src/components/modals/OpenBucketModal.vue
View File

@ -58,9 +58,10 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { Bucket } from '@/types/buckets';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VModal from '@/components/common/VModal.vue';
import VInput from '@/components/common/VInput.vue';
@ -71,7 +72,7 @@ import OpenWarningIcon from '@/../static/images/objects/openWarning.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const projectsStore = useProjectsStore();
const router = useRouter();
const notify = useNotify();
@ -128,7 +129,7 @@ async function onContinue(): Promise<void> {
try {
bucketsStore.setPassphrase(passphrase.value);
await bucketsStore.setS3Client(store.getters.selectedProject.id);
await bucketsStore.setS3Client(projectsStore.state.selectedProject.id);
const count: number = await bucketsStore.getObjectsCount(bucketName.value);
if (bucketObjectCount.value > count && bucketObjectCount.value <= NUMBER_OF_DISPLAYED_OBJECTS) {
isWarningState.value = true;

10
web/satellite/src/components/modals/ShareBucketModal.vue
View File

@ -42,14 +42,14 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VModal from '@/components/common/VModal.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -66,7 +66,7 @@ enum ButtonStates {
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const worker = ref<Worker | null>(null);
@ -114,10 +114,10 @@ async function setShareLink(): Promise<void> {
let path = `${bucketName.value}`;
const now = new Date();
const LINK_SHARING_AG_NAME = `${path}_shared-bucket_${now.toISOString()}`;
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(LINK_SHARING_AG_NAME, store.getters.selectedProject.id);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(LINK_SHARING_AG_NAME, projectsStore.state.selectedProject.id);
const satelliteNodeURL = appStore.state.config.satelliteNodeURL;
const salt = await store.dispatch(PROJECTS_ACTIONS.GET_SALT, store.getters.selectedProject.id);
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
worker.value.postMessage({
'type': 'GenerateAccess',

5
web/satellite/src/components/navigation/AccountArea.vue
View File

@ -54,7 +54,6 @@ import { User } from '@/types/users';
import { RouteConfig } from '@/router';
import { AuthHttpApi } from '@/api/auth';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS } from '@/utils/constants/appStatePopUps';
@ -66,6 +65,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import BillingIcon from '@/../static/images/navigation/billing.svg';
import InfoIcon from '@/../static/images/navigation/info.svg';
@ -77,6 +77,7 @@ import LogoutIcon from '@/../static/images/navigation/logout.svg';
import TierBadgeFree from '@/../static/images/navigation/tierBadgeFree.svg';
import TierBadgePro from '@/../static/images/navigation/tierBadgePro.svg';
const projectsStore = useProjectsStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
@ -154,7 +155,7 @@ async function onLogout(): Promise<void> {
await Promise.all([
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
projectsStore.clear(),
usersStore.clear(),
agStore.stopWorker(),
agStore.clear(),

21
web/satellite/src/components/navigation/MobileNavigation.vue
View File

@ -164,7 +164,6 @@ import { computed, ref } from 'vue';
import { AuthHttpApi } from '@/api/auth';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { NavigationLink } from '@/types/navigation';
import { Project } from '@/types/projects';
import { User } from '@/types/users';
@ -180,6 +179,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import ResourcesLinks from '@/components/navigation/ResourcesLinks.vue';
import QuickStartLinks from '@/components/navigation/QuickStartLinks.vue';
@ -224,6 +224,7 @@ const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const projectsStore = useProjectsStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -249,7 +250,7 @@ const isAllProjectsDashboard = computed((): boolean => {
* Returns projects list from store.
*/
const projects = computed((): Project[] => {
return store.getters.projectsWithoutSelected;
return projectsStore.projectsWithoutSelected;
});
/**
@ -263,7 +264,7 @@ const isBucketsView = computed((): boolean => {
* Returns selected project from store.
*/
const selectedProject = computed((): Project => {
return store.getters.selectedProject;
return projectsStore.state.selectedProject;
});
/**
@ -359,8 +360,8 @@ async function onProjectClick(): Promise<void> {
isLoading.value = true;
try {
await store.dispatch(PROJECTS_ACTIONS.FETCH);
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
await projectsStore.getProjects();
await projectsStore.getProjectLimits(selectedProject.value.id);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
} finally {
@ -373,8 +374,8 @@ async function onProjectClick(): Promise<void> {
* @param projectID
*/
async function onProjectSelected(projectID: string): Promise<void> {
await analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
await store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
projectsStore.selectProject(projectID);
LocalData.setSelectedProjectId(projectID);
pmStore.setSearchQuery('');
@ -392,7 +393,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
pmStore.getProjectMembers(FIRST_PAGE, projectID),
agStore.getAccessGrants(FIRST_PAGE, projectID),
bucketsStore.getBuckets(FIRST_PAGE, projectID),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, projectID),
projectsStore.getProjectLimits(projectID),
]);
} catch (error) {
await notify.error(`Unable to select project. ${error.message}`, AnalyticsErrorEventSource.MOBILE_NAVIGATION);
@ -420,7 +421,7 @@ function onCreateLinkClick(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount(user.id);
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt);
@ -466,7 +467,7 @@ async function onLogout(): Promise<void> {
await Promise.all([
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
projectsStore.clear(),
usersStore.clear(),
agStore.stopWorker(),
agStore.clear(),

39
web/satellite/src/components/navigation/ProjectSelection.vue
View File

@ -14,7 +14,7 @@
>
<div class="project-selection__selected__left">
<ProjectIcon class="project-selection__selected__left__image" />
<p class="project-selection__selected__left__name" :title="projectName">{{ projectName }}</p>
<p class="project-selection__selected__left__name" :title="selectedProject.name">{{ selectedProject.name }}</p>
<p class="project-selection__selected__left__placeholder">Projects</p>
</div>
<ArrowImage class="project-selection__selected__arrow" />
@ -63,19 +63,19 @@ import { computed, reactive, ref } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from '@/utils/localData';
import { Project } from '@/types/projects';
import { User } from '@/types/users';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VLoader from '@/components/common/VLoader.vue';
@ -92,7 +92,7 @@ const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const userStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -119,13 +119,6 @@ const isOnboardingTour = computed((): boolean => {
return router.currentRoute.path.includes(RouteConfig.OnboardingTour.path);
});
/**
* Returns selected project's name.
*/
const projectName = computed((): string => {
return store.getters.selectedProject.name;
});
/**
* Indicates if dropdown is shown.
*/
@ -137,14 +130,14 @@ const isDropdownShown = computed((): boolean => {
* Returns projects list from store.
*/
const projects = computed((): Project[] => {
return store.getters.projectsWithoutSelected;
return projectsStore.projectsWithoutSelected;
});
/**
* Returns selected project from store.
*/
const selectedProject = computed((): Project => {
return store.getters.selectedProject;
return projectsStore.state.selectedProject;
});
/**
@ -175,8 +168,8 @@ async function toggleSelection(): Promise<void> {
isLoading.value = true;
try {
await store.dispatch(PROJECTS_ACTIONS.FETCH);
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
await projectsStore.getProjects();
await projectsStore.getProjectLimits(selectedProject.value.id);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.NAVIGATION_PROJECT_SELECTION);
} finally {
@ -196,8 +189,8 @@ function toggleDropdown(): void {
* @param projectID
*/
async function onProjectSelected(projectID: string): Promise<void> {
await analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
await store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
analytics.eventTriggered(AnalyticsEvent.NAVIGATE_PROJECTS);
projectsStore.selectProject(projectID);
LocalData.setSelectedProjectId(projectID);
pmStore.setSearchQuery('');
closeDropdown();
@ -206,10 +199,6 @@ async function onProjectSelected(projectID: string): Promise<void> {
appStore.updateActiveModal(MODALS.enterPassphrase);
if (isBucketsView.value) {
if (router.currentRoute.name === RouteConfig.BucketsManagement.name) {
await bucketsStore.getBuckets(FIRST_PAGE, projectID);
}
await router.push(RouteConfig.Buckets.path).catch(() => {return; });
return;
@ -222,9 +211,9 @@ async function onProjectSelected(projectID: string): Promise<void> {
try {
await Promise.all([
store.dispatch(PROJECTS_ACTIONS.FETCH_DAILY_DATA, { since: past, before: now }),
projectsStore.getDailyProjectData({ since: past, before: now }),
billingStore.getProjectUsageAndChargesCurrentRollup(),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, projectID),
projectsStore.getProjectLimits(projectID),
bucketsStore.getBuckets(FIRST_PAGE, projectID),
]);
} catch (error) {
@ -246,7 +235,7 @@ async function onProjectSelected(projectID: string): Promise<void> {
if (router.currentRoute.name === RouteConfig.Users.name) {
try {
await pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id);
await pmStore.getProjectMembers(FIRST_PAGE, selectedProject.value.id);
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.NAVIGATION_PROJECT_SELECTION);
}
@ -290,7 +279,7 @@ function onCreateLinkClick(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = userStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount(user.id);
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt);

7
web/satellite/src/components/navigation/QuickStartLinks.vue
View File

@ -50,9 +50,10 @@ import { RouteConfig } from '@/router';
import { User } from '@/types/users';
import { AccessType } from '@/types/createAccessGrant';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useRouter, useStore } from '@/utils/hooks';
import { useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import NewProjectIcon from '@/../static/images/navigation/newProject.svg';
import CreateAGIcon from '@/../static/images/navigation/createAccessGrant.svg';
@ -62,7 +63,7 @@ import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -131,7 +132,7 @@ function navigateToNewProject(): void {
analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount(user.id);
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt);

6
web/satellite/src/components/notifications/ProjectLimitBanner.vue
View File

@ -24,16 +24,16 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useStore } from '@/utils/hooks';
import { LocalData } from '@/utils/localData';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VBanner from '@/components/common/VBanner.vue';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const props = defineProps<{
dashboardRef: HTMLElement;
@ -68,7 +68,7 @@ const isPaidTier = computed((): boolean => {
* Returns user's projects count.
*/
const projectsCount = computed((): number => {
return store.getters.projectsCount(usersStore.state.user.id);
return projectsStore.projectsCount(usersStore.state.user.id);
});
/**

6
web/satellite/src/components/notifications/UpgradeNotification.vue
View File

@ -22,8 +22,8 @@ import { computed, ref } from 'vue';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useStore } from '@/utils/hooks';
import { ProjectLimits } from '@/types/projects';
import { useProjectsStore } from '@/store/modules/projectsStore';
import SunnyIcon from '@/../static/images/notifications/sunnyicon.svg';
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
@ -32,7 +32,7 @@ const props = defineProps<{
openAddPMModal: () => void,
}>();
const store = useStore();
const projectsStore = useProjectsStore();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const isBannerShowing = ref<boolean>(true);
@ -48,7 +48,7 @@ function onCloseClick(): void {
* Returns current limits from store.
*/
const limits = computed((): ProjectLimits => {
return store.state.projectsModule.currentLimits;
return projectsStore.state.currentLimits;
});
/**

7
web/satellite/src/components/objects/BucketDetails.vue
View File

@ -30,9 +30,10 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import BucketDetailsOverview from '@/components/objects/BucketDetailsOverview.vue';
import VOverallLoader from '@/components/common/VOverallLoader.vue';
@ -41,7 +42,7 @@ import ArrowRightIcon from '@/../static/images/common/arrowRight.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -100,7 +101,7 @@ async function openBucket(): Promise<void> {
isLoading.value = true;
try {
await bucketsStore.setS3Client(store.getters.selectedProject.id);
await bucketsStore.setS3Client(projectsStore.state.selectedProject.id);
isLoading.value = false;
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BUCKET_DETAILS_PAGE);

9
web/satellite/src/components/objects/BucketsTable.vue
View File

@ -78,6 +78,7 @@ import { MODALS } from '@/utils/constants/appStatePopUps';
import { EdgeCredentials } from '@/types/accessGrants';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VTable from '@/components/common/VTable.vue';
import BucketItem from '@/components/objects/BucketItem.vue';
@ -102,7 +103,7 @@ const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -167,7 +168,7 @@ function onCreateBucketClick(): void {
*/
async function fetchBuckets(page = 1): Promise<void> {
try {
await bucketsStore.getBuckets(page, store.getters.selectedProject.id);
await bucketsStore.getBuckets(page, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.BUCKET_TABLE);
}
@ -183,7 +184,7 @@ async function searchBuckets(searchQuery: string): Promise<void> {
searchLoading.value = true;
try {
await bucketsStore.getBuckets(1, store.getters.selectedProject.id);
await bucketsStore.getBuckets(1, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch buckets: ${error.message}`, AnalyticsErrorEventSource.BUCKET_TABLE);
}
@ -214,7 +215,7 @@ async function openBucket(bucketName: string): Promise<void> {
overallLoading.value = true;
try {
await bucketsStore.setS3Client(store.getters.selectedProject.id);
await bucketsStore.setS3Client(projectsStore.state.selectedProject.id);
overallLoading.value = false;
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.BUCKET_TABLE);

7
web/satellite/src/components/objects/BucketsView.vue
View File

@ -26,9 +26,10 @@ import { BucketPage } from '@/types/buckets';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import EncryptionBanner from '@/components/objects/EncryptionBanner.vue';
import BucketsTable from '@/components/objects/BucketsTable.vue';
@ -37,7 +38,7 @@ import WhitePlusIcon from '@/../static/images/common/plusWhite.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -63,7 +64,7 @@ const promptForPassphrase = computed((): boolean => {
* Returns selected project id from store.
*/
const selectedProjectID = computed((): string => {
return store.getters.selectedProject.id;
return projectsStore.state.selectedProject.id;
});
/**

9
web/satellite/src/components/objects/UploadFile.vue
View File

@ -15,7 +15,6 @@ import { computed, onBeforeMount, ref, watch } from 'vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
@ -24,6 +23,7 @@ import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import FileBrowser from '@/components/browser/FileBrowser.vue';
import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
@ -31,6 +31,7 @@ import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const projectsStore = useProjectsStore();
const store = useStore();
const router = useRouter();
const notify = useNotify();
@ -114,7 +115,7 @@ async function generateShareLinkUrl(path: string): Promise<string> {
path = `${bucket.value}/${path}`;
const now = new Date();
const LINK_SHARING_AG_NAME = `${path}_shared-object_${now.toISOString()}`;
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(LINK_SHARING_AG_NAME, store.getters.selectedProject.id);
const cleanAPIKey: AccessGrant = await agStore.createAccessGrant(LINK_SHARING_AG_NAME, projectsStore.state.selectedProject.id);
try {
const credentials: EdgeCredentials = await generateCredentials(cleanAPIKey.secret, path, true);
@ -152,7 +153,7 @@ async function generateCredentials(cleanApiKey: string, path: string, areEndless
}
const satelliteNodeURL = appStore.state.config.satelliteNodeURL;
const salt = await store.dispatch(PROJECTS_ACTIONS.GET_SALT, store.getters.selectedProject.id);
const salt = await projectsStore.getProjectSalt(projectsStore.state.selectedProject.id);
worker.value.postMessage({
'type': 'GenerateAccess',
@ -231,7 +232,7 @@ watch(passphrase, async () => {
return;
}
const projectID = store.getters.selectedProject.id;
const projectID = projectsStore.state.selectedProject.id;
try {
await bucketsStore.setS3Client(projectID);

7
web/satellite/src/components/onboardingTour/steps/cliFlow/AGName.vue
View File

@ -31,9 +31,10 @@ import { RouteConfig } from '@/router';
import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import VInput from '@/components/common/VInput.vue';
@ -42,7 +43,7 @@ import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const projectsStore = useProjectsStore();
const router = useRouter();
const notify = useNotify();
@ -96,7 +97,7 @@ async function onNextClick(): Promise<void> {
let createdAccessGrant: AccessGrant;
try {
createdAccessGrant = await agStore.createAccessGrant(name.value, store.getters.selectedProject.id);
createdAccessGrant = await agStore.createAccessGrant(name.value, projectsStore.state.selectedProject.id);
await notify.success('New clean access grant was generated successfully.');
} catch (error) {

7
web/satellite/src/components/onboardingTour/steps/cliFlow/AGPermissions.vue
View File

@ -44,10 +44,11 @@ import { computed, onMounted, reactive, ref } from 'vue';
import { RouteConfig } from '@/router';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import CLIFlowContainer from '@/components/onboardingTour/steps/common/CLIFlowContainer.vue';
import PermissionsSelect from '@/components/onboardingTour/steps/cliFlow/PermissionsSelect.vue';
@ -61,7 +62,7 @@ import Icon from '@/../static/images/onboardingTour/accessGrant.svg';
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const nativeRouter = useRouter();
const router = reactive(nativeRouter);
@ -236,7 +237,7 @@ onMounted(async (): Promise<void> => {
setWorker();
try {
await bucketsStore.getAllBucketsNames(store.getters.selectedProject.id);
await bucketsStore.getAllBucketsNames(projectsStore.state.selectedProject.id);
areBucketNamesFetching.value = false;
} catch (error) {

11
web/satellite/src/components/project/CreateProject.vue
View File

@ -63,20 +63,20 @@
import { ref } from 'vue';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectFields } from '@/types/projects';
import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VLoader from '@/components/common/VLoader.vue';
import VButton from '@/components/common/VButton.vue';
import VInput from '@/components/common/VInput.vue';
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -137,8 +137,7 @@ async function onCreateProjectClick(): Promise<void> {
}
try {
const createdProject = await store.dispatch(PROJECTS_ACTIONS.CREATE, project);
createdProjectId.value = createdProject.id;
createdProjectId.value = await projectsStore.createProject(project);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.CREATE_PROJECT_MODAL);
isLoading.value = false;
@ -160,7 +159,7 @@ async function onCreateProjectClick(): Promise<void> {
* Selects just created project.
*/
function selectCreatedProject(): void {
store.dispatch(PROJECTS_ACTIONS.SELECT, createdProjectId.value);
projectsStore.selectProject(createdProjectId.value);
LocalData.setSelectedProjectId(createdProjectId.value);
}
</script>

23
web/satellite/src/components/project/EditProjectDetails.vue
View File

@ -202,7 +202,6 @@
import { computed, onMounted, ref } from 'vue';
import { Dimensions, Memory, Size } from '@/utils/bytesSize';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import {
MAX_DESCRIPTION_LENGTH,
MAX_NAME_LENGTH,
@ -211,15 +210,16 @@ import {
} from '@/types/projects';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
const usersStore = useUsersStore();
const store = useStore();
const appStore = useAppStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -243,14 +243,14 @@ const bandwidthLimitValue = ref<number>(0);
* Returns selected project from store.
*/
const storedProject = computed((): Project => {
return store.getters.selectedProject;
return projectsStore.state.selectedProject;
});
/**
* Returns current limits from store.
*/
const currentLimits = computed((): ProjectLimits => {
return store.state.projectsModule.currentLimits;
return projectsStore.state.currentLimits;
});
/**
@ -485,7 +485,7 @@ async function onSaveNameButtonClick(): Promise<void> {
const updatedProject = new ProjectFields(nameValue.value, '');
updatedProject.checkName();
await store.dispatch(PROJECTS_ACTIONS.UPDATE_NAME, updatedProject);
await projectsStore.updateProjectName(updatedProject);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.EDIT_PROJECT_DETAILS);
return;
@ -502,7 +502,7 @@ async function onSaveNameButtonClick(): Promise<void> {
async function onSaveDescriptionButtonClick(): Promise<void> {
try {
const updatedProject = new ProjectFields('', descriptionValue.value);
await store.dispatch(PROJECTS_ACTIONS.UPDATE_DESCRIPTION, updatedProject);
await projectsStore.updateProjectDescription(updatedProject);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.EDIT_PROJECT_DETAILS);
return;
@ -527,7 +527,7 @@ async function onSaveStorageLimitButtonClick(): Promise<void> {
}
const updatedProject = new ProjectLimits(0, 0, storageLimit);
await store.dispatch(PROJECTS_ACTIONS.UPDATE_STORAGE_LIMIT, updatedProject);
await projectsStore.updateProjectStorageLimit(updatedProject);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.EDIT_PROJECT_DETAILS);
return;
@ -552,7 +552,7 @@ async function onSaveBandwidthLimitButtonClick(): Promise<void> {
}
const updatedProject = new ProjectLimits(bandwidthLimit);
await store.dispatch(PROJECTS_ACTIONS.UPDATE_BANDWIDTH_LIMIT, updatedProject);
await projectsStore.updateProjectBandwidthLimit(updatedProject);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.EDIT_PROJECT_DETAILS);
return;
@ -632,14 +632,15 @@ function onBackClick(): void {
* Fetches project limits and paid tier status.
*/
onMounted(async (): Promise<void> => {
if (!store.getters.selectedProject.id) return;
const projectID = projectsStore.state.selectedProject.id;
if (!projectID) return;
if (usersStore.state.user.paidTier) {
isPaidTier.value = true;
}
try {
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, store.getters.selectedProject.id);
await projectsStore.getProjectLimits(projectID);
} catch (error) {
notify.error(error.message, AnalyticsErrorEventSource.EDIT_PROJECT_DETAILS);
}

7
web/satellite/src/components/project/dashboard/DashboardFunctionalHeader.vue
View File

@ -62,7 +62,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useRouter, useStore } from '@/utils/hooks';
import { useRouter } from '@/utils/hooks';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { BucketPage } from '@/types/buckets';
import { ProjectLimits } from '@/types/projects';
@ -70,6 +70,7 @@ import { RouteConfig } from '@/router';
import { LocalData } from '@/utils/localData';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
import VLoader from '@/components/common/VLoader.vue';
@ -82,7 +83,7 @@ const props = withDefaults(defineProps<{
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const store = useStore();
const projectsStore = useProjectsStore();
const router = useRouter();
/**
@ -108,7 +109,7 @@ const bucketWasCreated = computed((): boolean => {
* Returns current limits from store.
*/
const limits = computed((): ProjectLimits => {
return store.state.projectsModule.currentLimits;
return projectsStore.state.currentLimits;
});
/**

33
web/satellite/src/components/project/dashboard/ProjectDashboard.vue
View File

@ -155,7 +155,6 @@
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { RouteConfig } from '@/router';
import { DataStamp, Project, ProjectLimits } from '@/types/projects';
import { Dimensions, Size } from '@/utils/bytesSize';
@ -164,11 +163,12 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { LocalData } from '@/utils/localData';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_DROPDOWNS, MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VLoader from '@/components/common/VLoader.vue';
import InfoContainer from '@/components/project/dashboard/InfoContainer.vue';
@ -189,7 +189,7 @@ const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -213,7 +213,7 @@ const isChartsDatePicker = computed((): boolean => {
* Returns current limits from store.
*/
const limits = computed((): ProjectLimits => {
return store.state.projectsModule.currentLimits;
return projectsStore.state.currentLimits;
});
/**
@ -234,9 +234,8 @@ const isProAccount = computed((): boolean => {
* estimatedCharges returns estimated charges summary for selected project.
*/
const estimatedCharges = computed((): number => {
const projID: string = store.getters.selectedProject.id;
const charges = billingStore.state.projectCharges;
return charges.getProjectPrice(projID);
return charges.getProjectPrice(selectedProject.value.id);
});
/**
@ -244,7 +243,7 @@ const estimatedCharges = computed((): number => {
*/
const storageUsage = computed((): DataStamp[] => {
return ChartUtils.populateEmptyUsage(
store.state.projectsModule.storageChartData, chartsSinceDate.value, chartsBeforeDate.value,
projectsStore.state.storageChartData, chartsSinceDate.value, chartsBeforeDate.value,
);
});
@ -253,7 +252,7 @@ const storageUsage = computed((): DataStamp[] => {
*/
const settledBandwidthUsage = computed((): DataStamp[] => {
return ChartUtils.populateEmptyUsage(
store.state.projectsModule.settledBandwidthChartData, chartsSinceDate.value, chartsBeforeDate.value,
projectsStore.state.settledBandwidthChartData, chartsSinceDate.value, chartsBeforeDate.value,
);
});
@ -262,7 +261,7 @@ const settledBandwidthUsage = computed((): DataStamp[] => {
*/
const allocatedBandwidthUsage = computed((): DataStamp[] => {
return ChartUtils.populateEmptyUsage(
store.state.projectsModule.allocatedBandwidthChartData, chartsSinceDate.value, chartsBeforeDate.value,
projectsStore.state.allocatedBandwidthChartData, chartsSinceDate.value, chartsBeforeDate.value,
);
});
@ -270,14 +269,14 @@ const allocatedBandwidthUsage = computed((): DataStamp[] => {
* Returns charts since date from store.
*/
const chartsSinceDate = computed((): Date => {
return store.state.projectsModule.chartDataSince;
return projectsStore.state.chartDataSince;
});
/**
* Returns charts before date from store.
*/
const chartsBeforeDate = computed((): Date => {
return store.state.projectsModule.chartDataBefore;
return projectsStore.state.chartDataBefore;
});
/**
@ -303,7 +302,7 @@ const bucketWasCreated = computed((): boolean => {
* get selected project from store
*/
const selectedProject = computed((): Project => {
return store.getters.selectedProject;
return projectsStore.state.selectedProject;
});
/**
@ -361,7 +360,7 @@ async function onChartsDateRangePick(dateRange: Date[]): Promise<void> {
before.setHours(23, 59, 59, 999);
try {
await store.dispatch(PROJECTS_ACTIONS.FETCH_DAILY_DATA, { since, before });
await projectsStore.getDailyProjectData({ since, before });
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.PROJECT_DASHBOARD_PAGE);
}
@ -386,7 +385,7 @@ function formattedValue(value: Size): string {
onMounted(async (): Promise<void> => {
isServerSideEncryptionBannerHidden.value = LocalData.getServerSideEncryptionBannerHidden();
const projectID = store.getters.selectedProject.id;
const projectID = selectedProject.value.id;
if (!projectID) {
if (appStore.state.config.allProjectsDashboard) {
await router.push(RouteConfig.AllProjectsDashboard.path);
@ -395,7 +394,7 @@ onMounted(async (): Promise<void> => {
const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path;
analytics.pageVisit(onboardingPath);
await router.push(onboardingPath);
router.push(onboardingPath);
return;
}
@ -408,7 +407,7 @@ onMounted(async (): Promise<void> => {
const past = new Date();
past.setDate(past.getDate() - 30);
await store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, projectID);
await projectsStore.getProjectLimits(projectID);
if (hasJustLoggedIn.value) {
if (limits.value.objectCount > 0) {
appStore.updateActiveModal(MODALS.enterPassphrase);
@ -422,7 +421,7 @@ onMounted(async (): Promise<void> => {
appStore.toggleHasJustLoggedIn();
}
await store.dispatch(PROJECTS_ACTIONS.FETCH_DAILY_DATA, { since: past, before: now });
await projectsStore.getDailyProjectData({ since: past, before: now });
await billingStore.getProjectUsageAndChargesCurrentRollup();
} catch (error) {
await notify.error(error.message, AnalyticsErrorEventSource.PROJECT_DASHBOARD_PAGE);

24
web/satellite/src/components/projectsList/ProjectsList.vue
View File

@ -49,30 +49,26 @@
import { computed, onMounted, ref } from 'vue';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project, ProjectsPage } from '@/types/projects';
import { LocalData } from '@/utils/localData';
import { AnalyticsHttpApi } from '@/api/analytics';
import { User } from '@/types/users';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import ProjectsListItem from '@/components/projectsList/ProjectsListItem.vue';
import VTable from '@/components/common/VTable.vue';
import VLoader from '@/components/common/VLoader.vue';
import VButton from '@/components/common/VButton.vue';
const {
FETCH_OWNED,
} = PROJECTS_ACTIONS;
const FIRST_PAGE = 1;
const analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@ -82,7 +78,7 @@ const agStore = useAccessGrantsStore();
const pmStore = useProjectMembersStore();
const billingStore = useBillingStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -94,7 +90,7 @@ const areProjectsFetching = ref<boolean>(true);
* Returns projects page from store.
*/
const projectsPage = computed((): ProjectsPage => {
return store.state.projectsModule.page;
return projectsStore.state.page;
});
/**
@ -104,7 +100,7 @@ const projectsPage = computed((): ProjectsPage => {
async function onPageClick(page: number): Promise<void> {
currentPageNumber.value = page;
try {
await store.dispatch(FETCH_OWNED, currentPageNumber.value);
await projectsStore.getOwnedProjects(currentPageNumber.value);
} catch (error) {
await notify.error(`Unable to fetch owned projects. ${error.message}`, AnalyticsErrorEventSource.PROJECTS_LIST);
}
@ -117,7 +113,7 @@ function onCreateClick(): void {
analytics.eventTriggered(AnalyticsEvent.NEW_PROJECT_CLICKED);
const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount(user.id);
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt);
@ -137,19 +133,17 @@ async function onProjectSelected(project: Project): Promise<void> {
isLoading.value = true;
const projectID = project.id;
await store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
projectsStore.selectProject(projectID);
LocalData.setSelectedProjectId(projectID);
pmStore.setSearchQuery('');
try {
const projectID = store.getters.selectedProject.id;
await Promise.all([
billingStore.getProjectUsageAndChargesCurrentRollup(),
pmStore.getProjectMembers(FIRST_PAGE, projectID),
agStore.getAccessGrants(FIRST_PAGE, projectID),
bucketsStore.getBuckets(FIRST_PAGE, projectID),
store.dispatch(PROJECTS_ACTIONS.GET_LIMITS, projectID),
projectsStore.getProjectLimits(projectID),
]);
analytics.pageVisit(RouteConfig.EditProjectDetails.path);
@ -166,7 +160,7 @@ async function onProjectSelected(project: Project): Promise<void> {
*/
onMounted(async () => {
try {
await store.dispatch(FETCH_OWNED, currentPageNumber.value);
await projectsStore.getOwnedProjects(currentPageNumber.value);
areProjectsFetching.value = false;
} catch (error) {

20
web/satellite/src/components/team/HeaderArea.vue
View File

@ -81,15 +81,15 @@
import { computed, onBeforeUnmount, ref } from 'vue';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ProjectMemberHeaderState } from '@/types/projectMembers';
import { Project } from '@/types/projects';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VInfo from '@/components/common/VInfo.vue';
import VHeader from '@/components/common/VHeader.vue';
@ -103,7 +103,7 @@ declare interface ClearSearch {
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -167,7 +167,7 @@ function onClearSelection(): void {
*/
async function onDelete(): Promise<void> {
try {
await pmStore.deleteProjectMembers(store.getters.selectedProject.id);
await pmStore.deleteProjectMembers(projectsStore.state.selectedProject.id);
await setProjectState();
} catch (error) {
await notify.error(`Error while deleting users from projectMembers. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
@ -187,28 +187,28 @@ async function onDelete(): Promise<void> {
async function processSearchQuery(search: string): Promise<void> {
pmStore.setSearchQuery(search);
try {
await pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id);
await pmStore.getProjectMembers(FIRST_PAGE, projectsStore.state.selectedProject.id);
} catch (error) {
await notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_HEADER);
}
}
async function setProjectState(): Promise<void> {
const projects: Project[] = await store.dispatch(PROJECTS_ACTIONS.FETCH);
const projects: Project[] = await projectsStore.getProjects();
if (!projects.length) {
const onboardingPath = RouteConfig.OnboardingTour.with(RouteConfig.FirstOnboardingStep).path;
analytics.pageVisit(onboardingPath);
await router.push(onboardingPath);
router.push(onboardingPath);
return;
}
if (!projects.includes(store.getters.selectedProject)) {
await store.dispatch(PROJECTS_ACTIONS.SELECT, projects[0].id);
if (!projects.includes(projectsStore.state.selectedProject)) {
projectsStore.selectProject(projects[0].id);
}
await pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id);
await pmStore.getProjectMembers(FIRST_PAGE, projectsStore.state.selectedProject.id);
headerComponent.value?.clearSearch();
}

6
web/satellite/src/components/team/ProjectMemberListItem.vue
View File

@ -18,12 +18,12 @@ import { computed } from 'vue';
import { ProjectMember } from '@/types/projectMembers';
import { useResize } from '@/composables/resize';
import { useStore } from '@/utils/hooks';
import { useProjectsStore } from '@/store/modules/projectsStore';
import TableItem from '@/components/common/TableItem.vue';
const { isMobile, isTablet } = useResize();
const store = useStore();
const projectsStore = useProjectsStore();
const props = withDefaults(defineProps<{
itemData: ProjectMember;
@ -32,7 +32,7 @@ const props = withDefaults(defineProps<{
});
const isProjectOwner = computed((): boolean => {
return props.itemData.user.id === store.getters.selectedProject.ownerId;
return props.itemData.user.id === projectsStore.state.selectedProject.ownerId;
});
const itemToRender = computed((): { [key: string]: string | string[] } => {

15
web/satellite/src/components/team/ProjectMembersArea.vue
View File

@ -53,8 +53,9 @@ import {
ProjectMemberHeaderState,
} from '@/types/projectMembers';
import { AnalyticsErrorEventSource } from '@/utils/constants/analyticsEventNames';
import { useNotify, useStore } from '@/utils/hooks';
import { useNotify } from '@/utils/hooks';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VLoader from '@/components/common/VLoader.vue';
import HeaderArea from '@/components/team/HeaderArea.vue';
@ -64,7 +65,7 @@ import VTable from '@/components/common/VTable.vue';
import EmptySearchResultIcon from '@/../static/images/common/emptySearchResult.svg';
const pmStore = useProjectMembersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const FIRST_PAGE = 1;
@ -77,8 +78,8 @@ const areMembersFetching = ref<boolean>(true);
*/
const projectMembers = computed((): ProjectMember[] => {
const projectMembers = pmStore.state.page.projectMembers;
const projectOwner = projectMembers.find((member) => member.user.id === store.getters.selectedProject.ownerId);
const projectMembersToReturn = projectMembers.filter((member) => member.user.id !== store.getters.selectedProject.ownerId);
const projectOwner = projectMembers.find((member) => member.user.id === projectsStore.state.selectedProject.ownerId);
const projectMembersToReturn = projectMembers.filter((member) => member.user.id !== projectsStore.state.selectedProject.ownerId);
// if the project owner exists, place at the front of the members list
projectOwner && projectMembersToReturn.unshift(projectOwner);
@ -128,7 +129,7 @@ const isEmptySearchResultShown = computed((): boolean => {
* @param member
*/
function onMemberCheckChange(member: ProjectMember): void {
if (store.getters.selectedProject.ownerId !== member.user.id) {
if (projectsStore.state.selectedProject.ownerId !== member.user.id) {
pmStore.toggleProjectMemberSelection(member);
}
}
@ -139,7 +140,7 @@ function onMemberCheckChange(member: ProjectMember): void {
*/
async function onPageClick(index: number): Promise<void> {
try {
await pmStore.getProjectMembers(index, store.getters.selectedProject.id);
await pmStore.getProjectMembers(index, projectsStore.state.selectedProject.id);
} catch (error) {
notify.error(`Unable to fetch project members. ${error.message}`, AnalyticsErrorEventSource.PROJECT_MEMBERS_PAGE);
}
@ -151,7 +152,7 @@ async function onPageClick(index: number): Promise<void> {
*/
onMounted(async (): Promise<void> => {
try {
await pmStore.getProjectMembers(FIRST_PAGE, store.getters.selectedProject.id);
await pmStore.getProjectMembers(FIRST_PAGE, projectsStore.state.selectedProject.id);
areMembersFetching.value = false;
} catch (error) {

111
web/satellite/src/router/index.ts
View File

@ -2,9 +2,11 @@
// See LICENSE for copying information.
import Vue from 'vue';
import Router from 'vue-router';
import Router, { RouteRecord } from 'vue-router';
import { NavigationLink } from '@/types/navigation';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import AllDashboardArea from '@/views/all-dashboard/AllDashboardArea.vue';
import MyProjects from '@/views/all-dashboard/components/MyProjects.vue';
@ -430,3 +432,110 @@ export const router = new Router({
},
],
});
router.beforeEach(async (to, from, next) => {
const appStore = useAppStore();
if (!to.matched.length) {
appStore.setErrorPage(404);
return;
} else if (appStore.state.viewsState.error.visible) {
appStore.removeErrorPage();
}
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.Login.name) {
appStore.toggleHasJustLoggedIn(true);
}
if (to.name === RouteConfig.AllProjectsDashboard.name && from.name === RouteConfig.Login.name) {
appStore.toggleHasJustLoggedIn(true);
}
// On very first login we try to redirect user to project dashboard
// but since there is no project we then redirect user to onboarding flow.
// That's why we toggle this flag here back to false not show create project passphrase modal again
// if user clicks 'Continue in web'.
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.OverviewStep.name) {
appStore.toggleHasJustLoggedIn(false);
}
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.AllProjectsDashboard.name) {
appStore.toggleHasJustLoggedIn(false);
}
// TODO: Disabled this navigation guard because we try to get active pinia before it is initialised.
// In any case this feature is redundant since we have project level passphrase.
// if (!to.path.includes(RouteConfig.UploadFile.path)) {
// const appStore = useAppStore();
// if (appStore.state.viewsState.activeModal !== MODALS.uploadCancelPopup) {
// const areUploadsInProgress: boolean = await store.dispatch(OBJECTS_ACTIONS.CHECK_ONGOING_UPLOADS, to.path);
// if (areUploadsInProgress) return;
// }
// }
if (navigateToDefaultSubTab(to.matched, RouteConfig.Account)) {
next(RouteConfig.Account.with(RouteConfig.Billing).path);
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep))) {
next(RouteConfig.OnboardingTour.path);
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour)) {
const firstOnboardingStep = appStore.state.config.pricingPackagesEnabled
? RouteConfig.PricingPlanStep
: RouteConfig.OverviewStep;
next(RouteConfig.OnboardingTour.with(firstOnboardingStep).path);
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.Buckets)) {
next(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path);
return;
}
if (to.name === 'default') {
next(RouteConfig.ProjectDashboard.path);
return;
}
next();
});
router.afterEach(() => {
updateTitle();
});
/**
* if our route is a tab and has no sub tab route - we will navigate to default subtab.
* F.E. /account/ -> /account/billing/;
* @param routes - array of RouteRecord from vue-router
* @param tabRoute - tabNavigator route
*/
function navigateToDefaultSubTab(routes: RouteRecord[], tabRoute: NavigationLink): boolean {
return (routes.length === 2 && (routes[1].name as string) === tabRoute.name) ||
(routes.length === 3 && (routes[2].name as string) === tabRoute.name);
}
/**
* Updates the title of the webpage.
*/
function updateTitle(): void {
const appStore = useAppStore();
const projectsStore = useProjectsStore();
const routeName = router.currentRoute.name;
const parts = [routeName, appStore.state.config.satelliteName];
if (routeName && !notProjectRelatedRoutes.includes(routeName)) {
parts.unshift(projectsStore.state.selectedProject.name);
}
document.title = parts.filter(s => !!s).join(' | ');
}

129
web/satellite/src/store/index.ts
View File

@ -3,23 +3,14 @@
import Vue from 'vue';
import Vuex from 'vuex';
import { RouteRecord } from 'vue-router';
import { ProjectsApiGql } from '@/api/projects';
import { notProjectRelatedRoutes, RouteConfig, router } from '@/router';
import { makeNotificationsModule, NotificationsState } from '@/store/modules/notifications';
import { makeProjectsModule, PROJECTS_MUTATIONS, ProjectsState } from '@/store/modules/projects';
import { FilesState, makeFilesModule } from '@/store/modules/files';
import { NavigationLink } from '@/types/navigation';
import { useAppStore } from '@/store/modules/appStore';
Vue.use(Vuex);
const projectsApi = new ProjectsApiGql();
export interface ModulesState {
notificationsModule: NotificationsState;
projectsModule: ProjectsState;
files: FilesState;
}
@ -27,128 +18,8 @@ export interface ModulesState {
export const store = new Vuex.Store<ModulesState>({
modules: {
notificationsModule: makeNotificationsModule(),
projectsModule: makeProjectsModule(projectsApi),
files: makeFilesModule(),
},
});
store.subscribe((mutation) => {
switch (mutation.type) {
case PROJECTS_MUTATIONS.REMOVE:
case PROJECTS_MUTATIONS.SELECT_PROJECT:
updateTitle();
}
});
export default store;
/*
These router methods have been moved here to avoid circular imports between
store and the router. Many of the tests require router, however, this implementation
relies on store state for the routing behavior.
*/
router.beforeEach(async (to, from, next) => {
const appStore = useAppStore();
if (!to.matched.length) {
appStore.setErrorPage(404);
return;
} else if (appStore.state.viewsState.error.visible) {
appStore.removeErrorPage();
}
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.Login.name) {
appStore.toggleHasJustLoggedIn(true);
}
if (to.name === RouteConfig.AllProjectsDashboard.name && from.name === RouteConfig.Login.name) {
appStore.toggleHasJustLoggedIn(true);
}
// On very first login we try to redirect user to project dashboard
// but since there is no project we then redirect user to onboarding flow.
// That's why we toggle this flag here back to false not show create project passphrase modal again
// if user clicks 'Continue in web'.
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.OverviewStep.name) {
appStore.toggleHasJustLoggedIn(false);
}
if (to.name === RouteConfig.ProjectDashboard.name && from.name === RouteConfig.AllProjectsDashboard.name) {
appStore.toggleHasJustLoggedIn(false);
}
// TODO: I disabled this navigation guard because we try to get active pinia before it is initialised.
// In any case this feature is redundant since we have project level passphrase.
// if (!to.path.includes(RouteConfig.UploadFile.path)) {
// const appStore = useAppStore();
// if (appStore.state.viewsState.activeModal !== MODALS.uploadCancelPopup) {
// const areUploadsInProgress: boolean = await store.dispatch(OBJECTS_ACTIONS.CHECK_ONGOING_UPLOADS, to.path);
// if (areUploadsInProgress) return;
// }
// }
if (navigateToDefaultSubTab(to.matched, RouteConfig.Account)) {
next(RouteConfig.Account.with(RouteConfig.Billing).path);
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour.with(RouteConfig.OnbCLIStep))) {
next(RouteConfig.OnboardingTour.path);
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.OnboardingTour)) {
const firstOnboardingStep = appStore.state.config.pricingPackagesEnabled
? RouteConfig.PricingPlanStep
: RouteConfig.OverviewStep;
next(RouteConfig.OnboardingTour.with(firstOnboardingStep).path);
return;
}
if (navigateToDefaultSubTab(to.matched, RouteConfig.Buckets)) {
next(RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path);
return;
}
if (to.name === 'default') {
next(RouteConfig.ProjectDashboard.path);
return;
}
next();
});
router.afterEach(() => {
updateTitle();
});
/**
* if our route is a tab and has no sub tab route - we will navigate to default subtab.
* F.E. /account/ -> /account/billing/;
* @param routes - array of RouteRecord from vue-router
* @param tabRoute - tabNavigator route
*/
function navigateToDefaultSubTab(routes: RouteRecord[], tabRoute: NavigationLink): boolean {
return (routes.length === 2 && (routes[1].name as string) === tabRoute.name) ||
(routes.length === 3 && (routes[2].name as string) === tabRoute.name);
}
/**
* Updates the title of the webpage.
*/
function updateTitle(): void {
const appStore = useAppStore();
const routeName = router.currentRoute.name;
const parts = [routeName, appStore.state.config.satelliteName];
if (routeName && !notProjectRelatedRoutes.includes(routeName)) {
parts.unshift(store.state.projectsModule.selectedProject.name);
}
document.title = parts.filter(s => !!s).join(' | ');
}

4
web/satellite/src/store/modules/appStore.ts
View File

@ -88,7 +88,7 @@ export const useAppStore = defineStore('app', () => {
state.viewsState.activeModal = null;
}
function toggleHasJustLoggenIn(hasJustLoggedIn: boolean | null = null): void {
function toggleHasJustLoggedIn(hasJustLoggedIn: boolean | null = null): void {
if (hasJustLoggedIn === null) {
state.viewsState.hasJustLoggedIn = !state.viewsState.hasJustLoggedIn;
return;
@ -169,7 +169,7 @@ export const useAppStore = defineStore('app', () => {
toggleSuccessfulPasswordReset,
updateActiveModal,
removeActiveModal,
toggleHasJustLoggedIn: toggleHasJustLoggenIn,
toggleHasJustLoggedIn,
changeState,
setOnboardingBackRoute,
setOnboardingAPIKeyStepBackRoute,

374
web/satellite/src/store/modules/projects.ts
View File

@ -1,374 +0,0 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import {
DataStamp,
Project,
ProjectFields,
ProjectLimits,
ProjectsApi,
ProjectsCursor,
ProjectsPage,
ProjectsStorageBandwidthDaily,
ProjectUsageDateRange,
} from '@/types/projects';
import { StoreModule } from '@/types/store';
export const PROJECTS_ACTIONS = {
FETCH: 'fetchProjects',
FETCH_OWNED: 'fetchOwnedProjects',
FETCH_DAILY_DATA: 'fetchDailyData',
CREATE: 'createProject',
CREATE_DEFAULT_PROJECT: 'createDefaultProject',
SELECT: 'selectProject',
UPDATE_NAME: 'updateProjectName',
UPDATE_DESCRIPTION: 'updateProjectDescription',
UPDATE_STORAGE_LIMIT: 'updateProjectStorageLimit',
UPDATE_BANDWIDTH_LIMIT: 'updateProjectBandwidthLimit',
DELETE: 'deleteProject',
CLEAR: 'clearProjects',
GET_LIMITS: 'getProjectLimits',
GET_TOTAL_LIMITS: 'getTotalLimits',
GET_SALT: 'getSalt',
};
export const PROJECTS_MUTATIONS = {
ADD: 'CREATE_PROJECT',
REMOVE: 'DELETE_PROJECT',
UPDATE_PROJECT_NAME: 'UPDATE_PROJECT_NAME',
UPDATE_PROJECT_DESCRIPTION: 'UPDATE_PROJECT_DESCRIPTION',
UPDATE_PROJECT_STORAGE_LIMIT: 'UPDATE_STORAGE_LIMIT',
UPDATE_PROJECT_BANDWIDTH_LIMIT: 'UPDATE_BANDWIDTH_LIMIT',
SET_PROJECTS: 'SET_PROJECTS',
SELECT_PROJECT: 'SELECT_PROJECT',
CLEAR_PROJECTS: 'CLEAR_PROJECTS',
SET_LIMITS: 'SET_PROJECT_LIMITS',
SET_TOTAL_LIMITS: 'SET_TOTAL_LIMITS',
SET_PAGE_NUMBER: 'SET_PAGE_NUMBER',
SET_PAGE: 'SET_PAGE',
SET_DAILY_DATA: 'SET_DAILY_DATA',
SET_CHARTS_DATE_RANGE: 'SET_CHARTS_DATE_RANGE',
};
const defaultSelectedProject = new Project('', '', '', '', '', true, 0);
export class ProjectsState {
public projects: Project[] = [];
public selectedProject: Project = defaultSelectedProject;
public currentLimits: ProjectLimits = new ProjectLimits();
public totalLimits: ProjectLimits = new ProjectLimits();
public cursor: ProjectsCursor = new ProjectsCursor();
public page: ProjectsPage = new ProjectsPage();
public allocatedBandwidthChartData: DataStamp[] = [];
public settledBandwidthChartData: DataStamp[] = [];
public storageChartData: DataStamp[] = [];
public chartDataSince: Date = new Date();
public chartDataBefore: Date = new Date();
}
interface ProjectsContext {
state: ProjectsState
commit: (string, ...unknown) => void
rootGetters: {
user: {
id: string
}
}
dispatch: (string, ...unknown) => Promise<any> // eslint-disable-line @typescript-eslint/no-explicit-any
}
const {
FETCH,
FETCH_DAILY_DATA,
CREATE,
CREATE_DEFAULT_PROJECT,
SELECT,
UPDATE_NAME,
UPDATE_DESCRIPTION,
UPDATE_STORAGE_LIMIT,
UPDATE_BANDWIDTH_LIMIT,
DELETE,
CLEAR,
GET_LIMITS,
GET_TOTAL_LIMITS,
FETCH_OWNED,
GET_SALT,
} = PROJECTS_ACTIONS;
const {
ADD,
REMOVE,
UPDATE_PROJECT_NAME,
UPDATE_PROJECT_DESCRIPTION,
UPDATE_PROJECT_STORAGE_LIMIT,
UPDATE_PROJECT_BANDWIDTH_LIMIT,
SET_PROJECTS,
SELECT_PROJECT,
CLEAR_PROJECTS,
SET_LIMITS,
SET_TOTAL_LIMITS,
SET_PAGE_NUMBER,
SET_PAGE,
SET_DAILY_DATA,
SET_CHARTS_DATE_RANGE,
} = PROJECTS_MUTATIONS;
const projectsPageLimit = 7;
export function makeProjectsModule(api: ProjectsApi): StoreModule<ProjectsState, ProjectsContext> {
return {
state: new ProjectsState(),
mutations: {
[ADD](state: ProjectsState, createdProject: Project): void {
state.projects.push(createdProject);
},
[SET_PROJECTS](state: ProjectsState, projects: Project[]): void {
state.projects = projects;
if (!state.selectedProject.id) {
return;
}
const projectsCount = state.projects.length;
for (let i = 0; i < projectsCount; i++) {
const project = state.projects[i];
if (project.id !== state.selectedProject.id) {
continue;
}
state.selectedProject = project;
return;
}
state.selectedProject = defaultSelectedProject;
},
[SELECT_PROJECT](state: ProjectsState, projectID: string): void {
const selected = state.projects.find((project: Project) => project.id === projectID);
if (!selected) {
return;
}
state.selectedProject = selected;
},
[UPDATE_PROJECT_NAME](state: ProjectsState, fieldsToUpdate: ProjectFields): void {
state.selectedProject.name = fieldsToUpdate.name;
},
[UPDATE_PROJECT_DESCRIPTION](state: ProjectsState, fieldsToUpdate: ProjectFields): void {
state.selectedProject.description = fieldsToUpdate.description;
},
[UPDATE_PROJECT_STORAGE_LIMIT](state: ProjectsState, limitsToUpdate: ProjectLimits): void {
state.currentLimits.storageLimit = limitsToUpdate.storageLimit;
},
[UPDATE_PROJECT_BANDWIDTH_LIMIT](state: ProjectsState, limitsToUpdate: ProjectLimits): void {
state.currentLimits.bandwidthLimit = limitsToUpdate.bandwidthLimit;
},
[REMOVE](state: ProjectsState, projectID: string): void {
state.projects = state.projects.filter(project => project.id !== projectID);
if (state.selectedProject.id === projectID) {
state.selectedProject = new Project();
}
},
[SET_LIMITS](state: ProjectsState, limits: ProjectLimits): void {
state.currentLimits = limits;
},
[SET_TOTAL_LIMITS](state: ProjectsState, limits: ProjectLimits): void {
state.totalLimits = limits;
},
[CLEAR_PROJECTS](state: ProjectsState): void {
state.projects = [];
state.selectedProject = defaultSelectedProject;
state.currentLimits = new ProjectLimits();
state.totalLimits = new ProjectLimits();
state.storageChartData = [];
state.allocatedBandwidthChartData = [];
state.settledBandwidthChartData = [];
state.chartDataSince = new Date();
state.chartDataBefore = new Date();
state.cursor = new ProjectsCursor();
state.page = new ProjectsPage();
},
[SET_PAGE_NUMBER](state: ProjectsState, pageNumber: number) {
state.cursor.page = pageNumber;
state.cursor.limit = projectsPageLimit;
},
[SET_PAGE](state: ProjectsState, page: ProjectsPage) {
state.page = page;
},
[SET_DAILY_DATA](state: ProjectsState, payload: ProjectsStorageBandwidthDaily) {
state.allocatedBandwidthChartData = payload.allocatedBandwidth;
state.settledBandwidthChartData = payload.settledBandwidth;
state.storageChartData = payload.storage;
},
[SET_CHARTS_DATE_RANGE](state: ProjectsState, payload: ProjectUsageDateRange) {
state.chartDataSince = payload.since;
state.chartDataBefore = payload.before;
},
},
actions: {
[FETCH]: async function ({ commit }: ProjectsContext): Promise<Project[]> {
const projects = await api.get();
commit(SET_PROJECTS, projects);
return projects;
},
[FETCH_OWNED]: async function ({ commit, state }: ProjectsContext, pageNumber: number): Promise<ProjectsPage> {
commit(SET_PAGE_NUMBER, pageNumber);
const projectsPage: ProjectsPage = await api.getOwnedProjects(state.cursor);
commit(SET_PAGE, projectsPage);
return projectsPage;
},
[FETCH_DAILY_DATA]: async function ({ commit, state }: ProjectsContext, payload: ProjectUsageDateRange): Promise<void> {
const usage: ProjectsStorageBandwidthDaily = await api.getDailyUsage(state.selectedProject.id, payload.since, payload.before);
commit(SET_CHARTS_DATE_RANGE, payload);
commit(SET_DAILY_DATA, usage);
},
[CREATE]: async function ({ commit }: ProjectsContext, createProjectFields: ProjectFields): Promise<Project> {
const project = await api.create(createProjectFields);
commit(ADD, project);
return project;
},
[CREATE_DEFAULT_PROJECT]: async function ({ rootGetters, dispatch }: ProjectsContext, userID: string): Promise<void> {
const UNTITLED_PROJECT_NAME = 'My First Project';
const UNTITLED_PROJECT_DESCRIPTION = '___';
const project = new ProjectFields(
UNTITLED_PROJECT_NAME,
UNTITLED_PROJECT_DESCRIPTION,
userID,
);
const createdProject = await dispatch(CREATE, project);
await dispatch(SELECT, createdProject.id);
},
[SELECT]: function ({ commit }: ProjectsContext, projectID: string): void {
commit(SELECT_PROJECT, projectID);
},
[UPDATE_NAME]: async function ({ commit, state }: ProjectsContext, fieldsToUpdate: ProjectFields): Promise<void> {
const project = new ProjectFields(
fieldsToUpdate.name,
state.selectedProject.description,
state.selectedProject.id,
);
const limit = new ProjectLimits(
state.currentLimits.bandwidthLimit,
state.currentLimits.bandwidthUsed,
state.currentLimits.storageLimit,
state.currentLimits.storageUsed,
);
await api.update(state.selectedProject.id, project, limit);
commit(UPDATE_PROJECT_NAME, fieldsToUpdate);
},
[UPDATE_DESCRIPTION]: async function ({ commit, state }: ProjectsContext, fieldsToUpdate: ProjectFields): Promise<void> {
const project = new ProjectFields(
state.selectedProject.name,
fieldsToUpdate.description,
state.selectedProject.id,
);
const limit = new ProjectLimits(
state.currentLimits.bandwidthLimit,
state.currentLimits.bandwidthUsed,
state.currentLimits.storageLimit,
state.currentLimits.storageUsed,
);
await api.update(state.selectedProject.id, project, limit);
commit(UPDATE_PROJECT_DESCRIPTION, fieldsToUpdate);
},
[UPDATE_STORAGE_LIMIT]: async function ({ commit, state }: ProjectsContext, limitsToUpdate: ProjectLimits): Promise<void> {
const project = new ProjectFields(
state.selectedProject.name,
state.selectedProject.description,
state.selectedProject.id,
);
const limit = new ProjectLimits(
state.currentLimits.bandwidthLimit,
state.currentLimits.bandwidthUsed,
limitsToUpdate.storageLimit,
state.currentLimits.storageUsed,
);
await api.update(state.selectedProject.id, project, limit);
commit(UPDATE_PROJECT_STORAGE_LIMIT, limitsToUpdate);
},
[UPDATE_BANDWIDTH_LIMIT]: async function ({ commit, state }: ProjectsContext, limitsToUpdate: ProjectLimits): Promise<void> {
const project = new ProjectFields(
state.selectedProject.name,
state.selectedProject.description,
state.selectedProject.id,
);
const limit = new ProjectLimits(
limitsToUpdate.bandwidthLimit,
state.currentLimits.bandwidthUsed,
state.currentLimits.storageLimit,
state.currentLimits.storageUsed,
);
await api.update(state.selectedProject.id, project, limit);
commit(UPDATE_PROJECT_BANDWIDTH_LIMIT, limitsToUpdate);
},
[DELETE]: async function ({ commit }: ProjectsContext, projectID: string): Promise<void> {
await api.delete(projectID);
commit(REMOVE, projectID);
},
[GET_LIMITS]: async function ({ commit }: ProjectsContext, projectID: string): Promise<ProjectLimits> {
const limits = await api.getLimits(projectID);
commit(SET_LIMITS, limits);
return limits;
},
[GET_TOTAL_LIMITS]: async function ({ commit }: ProjectsContext): Promise<ProjectLimits> {
const limits = await api.getTotalLimits();
commit(SET_TOTAL_LIMITS, limits);
return limits;
},
[GET_SALT]: async function (_, projectID: string): Promise<string> {
return await api.getSalt(projectID);
},
[CLEAR]: function({ commit }: ProjectsContext): void {
commit(CLEAR_PROJECTS);
},
},
getters: {
projects: (state: ProjectsState): Project[] => {
return state.projects.map((project: Project) => {
if (project.id === state.selectedProject.id) {
project.isSelected = true;
}
return project;
});
},
projectsWithoutSelected: (state: ProjectsState): Project[] => {
return state.projects.filter((project: Project) => {
return project.id !== state.selectedProject.id;
});
},
selectedProject: (state: ProjectsState): Project => state.selectedProject,
projectsCount: (state: ProjectsState) => (userID: string): number => {
let projectsCount = 0;
state.projects.forEach((project: Project) => {
if (project.ownerId === userID) {
projectsCount++;
}
});
return projectsCount;
},
},
};
}

63
web/satellite/src/store/modules/projectsStore.ts
View File

@ -40,7 +40,7 @@ export const useProjectsStore = defineStore('projects', () => {
const api: ProjectsApi = new ProjectsApiGql();
async function fetchProjects(): Promise<Project[]> {
async function getProjects(): Promise<Project[]> {
const projects = await api.get();
setProjects(projects);
@ -72,14 +72,14 @@ export const useProjectsStore = defineStore('projects', () => {
state.selectedProject = defaultSelectedProject;
}
async function fetchOwnedProjects(pageNumber: number): Promise<void> {
async function getOwnedProjects(pageNumber: number): Promise<void> {
state.cursor.page = pageNumber;
state.cursor.limit = PROJECT_PAGE_LIMIT;
state.page = await api.getOwnedProjects(state.cursor);
}
async function fetchDailyProjectData(payload: ProjectUsageDateRange): Promise<void> {
async function getDailyProjectData(payload: ProjectUsageDateRange): Promise<void> {
const usage: ProjectsStorageBandwidthDaily = await api.getDailyUsage(state.selectedProject.id, payload.since, payload.before);
state.allocatedBandwidthChartData = usage.allocatedBandwidth;
@ -191,21 +191,11 @@ export const useProjectsStore = defineStore('projects', () => {
state.currentLimits.bandwidthLimit = limitsToUpdate.bandwidthLimit;
}
async function deleteProject(projectID: string): Promise<void> {
await api.delete(projectID);
state.projects = state.projects.filter(project => project.id !== projectID);
if (state.selectedProject.id === projectID) {
state.selectedProject = new Project();
}
}
async function fetchProjectLimits(projectID: string): Promise<void> {
async function getProjectLimits(projectID: string): Promise<void> {
state.currentLimits = await api.getLimits(projectID);
}
async function fetchTotalLimits(): Promise<void> {
async function getTotalLimits(): Promise<void> {
state.totalLimits = await api.getTotalLimits();
}
@ -213,7 +203,7 @@ export const useProjectsStore = defineStore('projects', () => {
return await api.getSalt(projectID);
}
function clearProjectState(): void {
function clear(): void {
state.projects = [];
state.selectedProject = defaultSelectedProject;
state.currentLimits = new ProjectLimits();
@ -225,6 +215,18 @@ export const useProjectsStore = defineStore('projects', () => {
state.chartDataBefore = new Date();
}
function projectsCount(userID: string): number {
let projectsCount = 0;
state.projects.forEach((project: Project) => {
if (project.ownerId === userID) {
projectsCount++;
}
});
return projectsCount;
}
const projects = computed(() => {
return state.projects.map((project: Project) => {
if (project.id === state.selectedProject.id) {
@ -241,23 +243,11 @@ export const useProjectsStore = defineStore('projects', () => {
});
});
const projectsCount = computed((userID: string) => {
let projectsCount = 0;
state.projects.forEach((project: Project) => {
if (project.ownerId === userID) {
projectsCount++;
}
});
return projectsCount;
});
return {
projectsState: state,
fetchProjects,
fetchOwnedProjects,
fetchDailyProjectData,
state,
getProjects,
getOwnedProjects,
getDailyProjectData,
createProject,
createDefaultProject,
selectProject,
@ -265,13 +255,12 @@ export const useProjectsStore = defineStore('projects', () => {
updateProjectDescription,
updateProjectStorageLimit,
updateProjectBandwidthLimit,
deleteProject,
fetchProjectLimits,
fetchTotalLimits,
getProjectLimits,
getTotalLimits,
getProjectSalt,
clearProjectState,
projectsCount,
clear,
projects,
projectsWithoutSelected,
projectsCount,
};
});

14
web/satellite/src/views/AuthorizeArea.vue
View File

@ -92,17 +92,17 @@ import { onMounted, ref } from 'vue';
import { Validator } from '@/utils/validation';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { Project } from '@/types/projects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { OAuthClient, OAuthClientsAPI } from '@/api/oauthClients';
import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VInput from '@/components/common/VInput.vue';
@ -121,7 +121,7 @@ const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -267,10 +267,10 @@ async function verifyClientConfiguration(): Promise<void> {
}
async function loadProjects(): Promise<void> {
await store.dispatch(PROJECTS_ACTIONS.FETCH);
await projectsStore.getProjects();
const newProjects: Record<string, Project> = {};
for (const project of store.getters.projects) {
for (const project of projectsStore.projects) {
newProjects[project.name] = project;
}
@ -283,9 +283,9 @@ async function setProject(value: string): Promise<void> {
return;
}
const projectID = store.getters.selectedProject.id;
const projectID = projectsStore.state.selectedProject.id;
await store.dispatch(PROJECTS_ACTIONS.SELECT, projects.value[value].id);
projectsStore.selectProject(projects.value[value].id);
await bucketsStore.getAllBucketsNames(projectID);
selectedProjectID.value = projectID;

15
web/satellite/src/views/DashboardArea.vue
View File

@ -102,7 +102,6 @@ import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { RouteConfig } from '@/router';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { CouponType } from '@/types/coupons';
import { Project } from '@/types/projects';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
@ -121,6 +120,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import NavigationArea from '@/components/navigation/NavigationArea.vue';
import InactivityModal from '@/components/modals/InactivityModal.vue';
@ -141,6 +141,7 @@ const billingStore = useBillingStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const projectsStore = useProjectsStore();
const store = useStore();
const notify = useNotify();
const nativeRouter = useRouter();
@ -223,7 +224,7 @@ const limitState = computed((): LimitedState => {
return result;
}
const { currentLimits } = store.state.projectsModule;
const currentLimits = projectsStore.state.currentLimits;
const limitTypeArr = [
{ name: 'bandwidth', usedPercent: Math.round(currentLimits.bandwidthUsed * 100 / currentLimits.bandwidthLimit) },
@ -292,7 +293,7 @@ const isProjectLimitBannerShown = computed((): boolean => {
*/
const hasReachedProjectLimit = computed((): boolean => {
const projectLimit: number = usersStore.state.user.projectLimit;
const projectsCount: number = store.getters.projectsCount(usersStore.state.user.id);
const projectsCount: number = projectsStore.projectsCount(usersStore.state.user.id);
return projectsCount === projectLimit;
});
@ -368,7 +369,7 @@ const isDashboardPage = computed((): boolean => {
* @param projectID - project id string
*/
function storeProject(projectID: string): void {
store.dispatch(PROJECTS_ACTIONS.SELECT, projectID);
projectsStore.selectProject(projectID);
LocalData.setSelectedProjectId(projectID);
}
@ -496,7 +497,7 @@ async function handleInactive(): Promise<void> {
await Promise.all([
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
projectsStore.clear(),
usersStore.clear(),
agStore.stopWorker(),
agStore.clear(),
@ -645,7 +646,7 @@ onMounted(async () => {
let projects: Project[] = [];
try {
projects = await store.dispatch(PROJECTS_ACTIONS.FETCH);
projects = await projectsStore.getProjects();
} catch (error) {
return;
}
@ -653,7 +654,7 @@ onMounted(async () => {
if (!appStore.state.config.allProjectsDashboard) {
try {
if (!projects.length) {
await store.dispatch(PROJECTS_ACTIONS.CREATE_DEFAULT_PROJECT, usersStore.state.user.id);
await projectsStore.createDefaultProject(usersStore.state.user.id);
} else {
selectProject(projects);
}

11
web/satellite/src/views/all-dashboard/AllDashboardArea.vue
View File

@ -112,7 +112,6 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { ErrorUnauthorized } from '@/api/errors/ErrorUnauthorized';
import { FetchState } from '@/utils/constants/fetchStateEnum';
import { LocalData } from '@/utils/localData';
@ -126,6 +125,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import InactivityModal from '@/components/modals/InactivityModal.vue';
import BetaSatBar from '@/components/infoBars/BetaSatBar.vue';
@ -150,6 +150,7 @@ const abTestingStore = useABTestingStore();
const billingStore = useBillingStore();
const agStore = useAccessGrantsStore();
const appStore = useAppStore();
const projectsStore = useProjectsStore();
const analytics = new AnalyticsHttpApi();
const auth: AuthHttpApi = new AuthHttpApi();
@ -228,7 +229,7 @@ const limitState = computed((): LimitedState => {
return result;
}
const { currentLimits } = store.state.projectsModule;
const currentLimits = projectsStore.state.currentLimits;
const limitTypeArr = [
{ name: 'bandwidth', usedPercent: Math.round(currentLimits.bandwidthUsed * 100 / currentLimits.bandwidthLimit) },
@ -313,7 +314,7 @@ const isProjectLimitBannerShown = computed((): boolean => {
*/
const hasReachedProjectLimit = computed((): boolean => {
const projectLimit: number = usersStore.state.user.projectLimit;
const projectsCount: number = store.getters.projectsCount(usersStore.state.user.id);
const projectsCount: number = projectsStore.projectsCount(usersStore.state.user.id);
return projectsCount === projectLimit;
});
@ -357,7 +358,7 @@ async function handleInactive(): Promise<void> {
await Promise.all([
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
projectsStore.clear(),
usersStore.clear(),
agStore.stopWorker(),
agStore.clear(),
@ -586,7 +587,7 @@ onMounted(async () => {
}
try {
await store.dispatch(PROJECTS_ACTIONS.FETCH);
await projectsStore.getProjects();
} catch (error) {
return;
}

6
web/satellite/src/views/all-dashboard/components/EmptyProjectItem.vue
View File

@ -29,7 +29,6 @@
</template>
<script setup lang="ts">
import { useStore } from '@/utils/hooks';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
@ -37,6 +36,7 @@ import { RouteConfig } from '@/router';
import { MODALS } from '@/utils/constants/appStatePopUps';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
@ -44,7 +44,7 @@ import BoxIcon from '@/../static/images/allDashboard/box.svg';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const analytics = new AnalyticsHttpApi();
/**
@ -54,7 +54,7 @@ function onCreateProjectClicked(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount(user.id);
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt);

5
web/satellite/src/views/all-dashboard/components/Heading.vue
View File

@ -103,7 +103,6 @@ import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { User } from '@/types/users';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { AuthHttpApi } from '@/api/auth';
import { useABTestingStore } from '@/store/modules/abTestingStore';
import { useUsersStore } from '@/store/modules/usersStore';
@ -112,6 +111,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
@ -140,6 +140,7 @@ const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const abTestingStore = useABTestingStore();
const billingStore = useBillingStore();
const projectsStore = useProjectsStore();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
@ -231,7 +232,7 @@ async function onLogout(): Promise<void> {
await Promise.all([
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
projectsStore.clear(),
usersStore.clear(),
agStore.stopWorker(),
agStore.clear(),

5
web/satellite/src/views/all-dashboard/components/MyAccountButton.vue
View File

@ -54,7 +54,6 @@ import { computed, ref } from 'vue';
import { RouteConfig } from '@/router';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import {
AnalyticsErrorEventSource,
AnalyticsEvent,
@ -69,6 +68,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
import { useAppStore } from '@/store/modules/appStore';
import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import AccountIcon from '@/../static/images/navigation/account.svg';
import ArrowDownIcon from '@/../static/images/common/dropIcon.svg';
@ -85,6 +85,7 @@ const notify = useNotify();
const analytics = new AnalyticsHttpApi();
const auth = new AuthHttpApi();
const projectsStore = useProjectsStore();
const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const agStore = useAccessGrantsStore();
@ -156,7 +157,7 @@ async function onLogout(): Promise<void> {
await Promise.all([
pmStore.clear(),
store.dispatch(PROJECTS_ACTIONS.CLEAR),
projectsStore.clear(),
usersStore.clear(),
agStore.stopWorker(),
agStore.clear(),

10
web/satellite/src/views/all-dashboard/components/MyProjects.vue
View File

@ -29,7 +29,6 @@
import { computed } from 'vue';
import { Project } from '@/types/projects';
import { useRoute, useRouter, useStore } from '@/utils/hooks';
import { RouteConfig } from '@/router';
import {
AnalyticsEvent,
@ -41,6 +40,7 @@ import EmptyProjectItem from '@/views/all-dashboard/components/EmptyProjectItem.
import ProjectItem from '@/views/all-dashboard/components/ProjectItem.vue';
import { useUsersStore } from '@/store/modules/usersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
@ -48,9 +48,7 @@ import RocketIcon from '@/../static/images/common/rocket.svg';
const appStore = useAppStore();
const usersStore = useUsersStore();
const store = useStore();
const router = useRouter();
const route = useRoute();
const projectsStore = useProjectsStore();
const analytics = new AnalyticsHttpApi();
@ -58,7 +56,7 @@ const analytics = new AnalyticsHttpApi();
* Returns projects list from store.
*/
const projects = computed((): Project[] => {
return store.getters.projects;
return projectsStore.projects;
});
/**
@ -68,7 +66,7 @@ function onCreateProjectClicked(): void {
analytics.eventTriggered(AnalyticsEvent.CREATE_NEW_CLICKED);
const user: User = usersStore.state.user;
const ownProjectsCount: number = store.getters.projectsCount(user.id);
const ownProjectsCount: number = projectsStore.projectsCount(user.id);
if (!user.paidTier && user.projectLimit === ownProjectsCount) {
appStore.updateActiveModal(MODALS.createProjectPrompt);

8
web/satellite/src/views/all-dashboard/components/ProjectItem.vue
View File

@ -49,11 +49,10 @@
import { computed } from 'vue';
import { Project } from '@/types/projects';
import { useNotify, useRouter, useStore } from '@/utils/hooks';
import { useNotify, useRouter } from '@/utils/hooks';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { User } from '@/types/users';
import { AnalyticsHttpApi } from '@/api/analytics';
import { PROJECTS_ACTIONS } from '@/store/modules/projects';
import { LocalData } from '@/utils/localData';
import { RouteConfig } from '@/router';
import { MODALS } from '@/utils/constants/appStatePopUps';
@ -61,6 +60,7 @@ import { useUsersStore } from '@/store/modules/usersStore';
import { useProjectMembersStore } from '@/store/modules/projectMembersStore';
import { useAppStore } from '@/store/modules/appStore';
import { useBucketsStore } from '@/store/modules/bucketsStore';
import { useProjectsStore } from '@/store/modules/projectsStore';
import VButton from '@/components/common/VButton.vue';
import ProjectOwnershipTag from '@/components/project/ProjectOwnershipTag.vue';
@ -73,7 +73,7 @@ const bucketsStore = useBucketsStore();
const appStore = useAppStore();
const pmStore = useProjectMembersStore();
const usersStore = useUsersStore();
const store = useStore();
const projectsStore = useProjectsStore();
const notify = useNotify();
const router = useRouter();
@ -129,7 +129,7 @@ async function onOpenClicked(): Promise<void> {
}
async function selectProject() {
await store.dispatch(PROJECTS_ACTIONS.SELECT, props.project.id);
projectsStore.selectProject(props.project.id);
LocalData.setSelectedProjectId(props.project.id);
pmStore.setSearchQuery('');

7
web/satellite/tests/unit/ignore/onboardingTour/OnboardingTourArea.spec.ts
View File

@ -4,19 +4,14 @@
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '@/../tests/unit/mock/api/projects';
import { router } from '@/router';
import { makeProjectsModule } from '@/store/modules/projects';
import OnboardingTourArea from '@/components/onboardingTour/OnboardingTourArea.vue';
const localVue = createLocalVue();
localVue.use(Vuex);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const store = new Vuex.Store({ modules: { projectsModule } });
const store = new Vuex.Store({});
describe('OnboardingTourArea.vue', () => {
it('renders correctly', (): void => {

6
web/satellite/tests/unit/ignore/project/CreateProject.spec.ts
View File

@ -4,8 +4,6 @@
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '@/../tests/unit/mock/api/projects';
import { makeProjectsModule } from '@/store/modules/projects';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
import CreateProject from '@/components/project/CreateProject.vue';
@ -14,9 +12,7 @@ const localVue = createLocalVue();
localVue.use(Vuex);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const store = new Vuex.Store({ modules: { projectsModule } });
const store = new Vuex.Store({});
localVue.use(new NotificatorPlugin(store));

7
web/satellite/tests/unit/ignore/project/EditProjectDetails.spec.ts
View File

@ -5,7 +5,6 @@ import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '@/../tests/unit/mock/api/projects';
import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
import { Project, ProjectLimits } from '@/types/projects';
import { NotificatorPlugin } from '@/utils/plugins/notificator';
import { makeNotificationsModule } from '@/store/modules/notifications';
@ -18,12 +17,10 @@ localVue.use(Vuex);
const projectLimits = new ProjectLimits(1000, 100, 1000, 100);
const projectsApi = new ProjectsApiMock();
projectsApi.setMockLimits(projectLimits);
const projectsModule = makeProjectsModule(projectsApi);
const notificationsModule = makeNotificationsModule();
const store = new Vuex.Store({
modules: {
projectsModule,
notificationsModule,
usersModule: {
state: {
@ -38,10 +35,6 @@ const project = new Project('id', 'test', 'test', 'test', 'ownedId', false);
describe('EditProjectDetails.vue', () => {
it('renders correctly', (): void => {
store.commit(PROJECTS_MUTATIONS.ADD, project);
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, project.id);
store.commit(PROJECTS_MUTATIONS.SET_LIMITS, projectLimits);
const wrapper = shallowMount<EditProjectDetails>(EditProjectDetails, {
store,
localVue,

9
web/satellite/tests/unit/ignore/projectMembers/ProjectMemberListItem.spec.ts
View File

@ -4,8 +4,6 @@
import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiGql } from '@/api/projects';
import { makeProjectsModule, PROJECTS_MUTATIONS } from '@/store/modules/projects';
import { ProjectMember } from '@/types/projectMembers';
import { Project } from '@/types/projects';
@ -16,16 +14,11 @@ const localVue = createLocalVue();
localVue.use(Vuex);
describe('', () => {
const pApi = new ProjectsApiGql();
const projectsModule = makeProjectsModule(pApi);
const data = new Date(0);
const member: ProjectMember = new ProjectMember('testFullName', 'testShortName', 'test@example.com', data, '1');
const project: Project = new Project('testId', 'testName', 'testDescr', 'testDate', '1');
const store = new Vuex.Store({ modules: { projectsModule } });
store.commit(PROJECTS_MUTATIONS.SET_PROJECTS, [project]);
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, 'testId');
const store = new Vuex.Store({});
it('should render correctly', function () {
const wrapper = shallowMount(ProjectMemberListItem, {

4
web/satellite/tests/unit/ignore/projectMembers/ProjectMembersArea.spec.ts
View File

@ -5,7 +5,6 @@ import Vuex from 'vuex';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { ProjectsApiMock } from '@/../tests/unit/mock/api/projects';
import { makeProjectsModule } from '@/store/modules/projects';
import { ProjectMember, ProjectMembersPage } from '@/types/projectMembers';
import { Project } from '@/types/projects';
@ -15,8 +14,7 @@ const localVue = createLocalVue();
localVue.use(Vuex);
const projectsApi = new ProjectsApiMock();
const projectsModule = makeProjectsModule(projectsApi);
const store = new Vuex.Store({ modules: { projectsModule } });
const store = new Vuex.Store({});
describe('ProjectMembersArea.vue', () => {
const project = new Project('id', 'projectName', 'projectDescription', 'test', 'testOwnerId', true);

9
web/satellite/tests/unit/ignore/store/buckets.spec.ts
View File

@ -5,25 +5,18 @@ import Vuex from 'vuex';
import { createLocalVue } from '@vue/test-utils';
import { BucketsApiGql } from '@/api/buckets';
import { ProjectsApiGql } from '@/api/projects';
import { makeProjectsModule } from '@/store/modules/projects';
import { Bucket, BucketCursor, BucketPage } from '@/types/buckets';
import { Project } from '@/types/projects';
const Vue = createLocalVue();
const bucketsApi = new BucketsApiGql();
const projectsApi = new ProjectsApiGql();
const projectsModule = makeProjectsModule(projectsApi);
const selectedProject = new Project();
selectedProject.id = '1';
projectsModule.state.selectedProject = selectedProject;
Vue.use(Vuex);
const store = new Vuex.Store<{
projectsModule: typeof projectsModule.state,
}>({ modules: { projectsModule } });
const store = new Vuex.Store({});
// const state = store.state.bucketsModule;
const bucket = new Bucket('test', 10, 10, 1, 1, new Date(), new Date());
const page: BucketPage = { buckets: [bucket], currentPage: 1, pageCount: 1, offset: 0, limit: 7, search: 'test', totalCount: 1 };

297
web/satellite/tests/unit/store/projects.spec.ts
View File

@ -1,48 +1,14 @@
// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.
import Vuex from 'vuex';
import { createLocalVue } from '@vue/test-utils';
import { createPinia, setActivePinia } from 'pinia';
import { ProjectsApiGql } from '@/api/projects';
import { makeProjectsModule, PROJECTS_ACTIONS, PROJECTS_MUTATIONS } from '@/store/modules/projects';
import { Project, ProjectFields, ProjectLimits } from '@/types/projects';
import { useProjectsStore } from '@/store/modules/projectsStore';
const Vue = createLocalVue();
const projectsApi = new ProjectsApiGql();
const {
FETCH,
CREATE,
SELECT,
DELETE,
CLEAR,
UPDATE_NAME,
UPDATE_DESCRIPTION,
GET_LIMITS,
} = PROJECTS_ACTIONS;
const {
ADD,
SET_PROJECTS,
SELECT_PROJECT,
UPDATE_PROJECT_NAME,
UPDATE_PROJECT_DESCRIPTION,
REMOVE,
CLEAR_PROJECTS,
SET_LIMITS,
} = PROJECTS_MUTATIONS;
const projectsModule = makeProjectsModule(projectsApi);
const selectedProject = new Project('1', '', '', '');
projectsModule.state.selectedProject = selectedProject;
Vue.use(Vuex);
const store = new Vuex.Store<{
projectsModule: typeof projectsModule.state,
}>({ modules: { projectsModule } });
const state = store.state.projectsModule;
const limits = new ProjectLimits(15, 12, 14, 13);
const project = new Project('11', 'name', 'descr', '23', 'testOwnerId');
const projects = [
new Project(
'11',
@ -62,270 +28,135 @@ const projects = [
),
];
const limits = new ProjectLimits(15, 12, 14, 13);
const project = new Project('11', 'name', 'descr', '23', 'testOwnerId');
describe('mutations', () => {
describe('actions', () => {
beforeEach(() => {
createLocalVue().use(Vuex);
});
it('add project', () => {
store.commit(ADD, project);
expect(state.projects[0].id).toBe(project.id);
expect(state.projects[0].name).toBe(project.name);
expect(state.projects[0].description).toBe(project.description);
expect(state.projects[0].createdAt).toBe(project.createdAt);
expect(state.projects[0].ownerId).toBe(project.ownerId);
});
it('set projects', () => {
store.commit(SET_PROJECTS, projects);
expect(state.projects).toBe(projects);
expect(state.selectedProject.id).toBe('1');
setActivePinia(createPinia());
jest.resetAllMocks();
});
it('select project', () => {
state.projects = projects;
const store = useProjectsStore();
store.commit(SELECT_PROJECT, '11');
expect(state.selectedProject.id).toBe('11');
expect(state.currentLimits.bandwidthLimit).toBe(0);
});
store.state.projects = projects;
store.selectProject('11');
it('update project name', () => {
state.projects = projects;
const newName = 'newName';
store.commit(UPDATE_PROJECT_NAME, { id: '11', name: newName });
const project = state.projects.find((pr: Project) => pr.id === '11');
expect(project).toBeDefined();
if (project) expect(project.name).toBe(newName);
});
it('update project description', () => {
state.projects = projects;
const newDescription = 'newDescription';
store.commit(UPDATE_PROJECT_DESCRIPTION, { id: '11', description: newDescription });
const project = state.projects.find((pr: Project) => pr.id === '11');
expect(project).toBeDefined();
if (project) expect(project.description).toBe(newDescription);
});
it('remove project', () => {
state.projects = projects;
store.commit(REMOVE, '11');
expect(state.projects.length).toBe(1);
expect(state.projects[0].id).toBe('1');
});
it('set limits', () => {
state.projects = projects;
store.commit(SET_LIMITS, limits);
expect(state.currentLimits.bandwidthUsed).toBe(12);
expect(state.currentLimits.bandwidthLimit).toBe(15);
expect(state.currentLimits.storageUsed).toBe(13);
expect(state.currentLimits.storageLimit).toBe(14);
});
it('clear projects', () => {
state.projects = projects;
store.commit(CLEAR_PROJECTS);
expect(state.projects.length).toBe(0);
});
});
describe('actions', () => {
beforeEach(() => {
jest.resetAllMocks();
createLocalVue().use(Vuex);
expect(store.state.selectedProject.id).toBe('11');
expect(store.state.currentLimits.bandwidthLimit).toBe(0);
});
it('success fetch projects', async () => {
jest.spyOn(projectsApi, 'get').mockReturnValue(
const store = useProjectsStore();
jest.spyOn(ProjectsApiGql.prototype, 'get').mockReturnValue(
Promise.resolve(projects),
);
await store.dispatch(FETCH);
await store.getProjects();
expect(state.projects).toBe(projects);
expect(store.state.projects).toBe(projects);
});
it('fetch throws an error when api call fails', async () => {
state.projects = [];
jest.spyOn(projectsApi, 'get').mockImplementation(() => { throw new Error(); });
const store = useProjectsStore();
jest.spyOn(ProjectsApiGql.prototype, 'get').mockImplementation(() => { throw new Error(); });
try {
await store.dispatch(FETCH);
await store.getProjects();
} catch (error) {
expect(state.projects.length).toBe(0);
expect(state.currentLimits.bandwidthLimit).toBe(0);
expect(store.state.projects.length).toBe(0);
expect(store.state.currentLimits.bandwidthLimit).toBe(0);
}
});
it('success create project', async () => {
state.projects = [];
jest.spyOn(projectsApi, 'create').mockReturnValue(
const store = useProjectsStore();
jest.spyOn(ProjectsApiGql.prototype, 'create').mockReturnValue(
Promise.resolve(project),
);
await store.dispatch(CREATE, { name: '', description: '' });
expect(state.projects.length).toBe(1);
expect(state.currentLimits.bandwidthLimit).toBe(0);
await store.createProject(new ProjectFields());
expect(store.state.projects.length).toBe(1);
expect(store.state.currentLimits.bandwidthLimit).toBe(0);
});
it('create throws an error when create api call fails', async () => {
state.projects = [];
jest.spyOn(projectsApi, 'create').mockImplementation(() => { throw new Error(); });
const store = useProjectsStore();
jest.spyOn(ProjectsApiGql.prototype, 'create').mockImplementation(() => { throw new Error(); });
try {
await store.dispatch(CREATE, 'testName');
await store.createProject(new ProjectFields());
expect(true).toBe(false);
} catch (error) {
expect(state.projects.length).toBe(0);
expect(state.currentLimits.bandwidthLimit).toBe(0);
expect(store.state.projects.length).toBe(0);
expect(store.state.currentLimits.bandwidthLimit).toBe(0);
}
});
it('success delete project', async () => {
jest.spyOn(projectsApi, 'delete').mockReturnValue(
Promise.resolve(),
);
state.projects = projects;
await store.dispatch(DELETE, '11');
expect(state.projects.length).toBe(1);
expect(state.projects[0].id).toBe('1');
});
it('delete throws an error when api call fails', async () => {
jest.spyOn(projectsApi, 'delete').mockImplementation(() => { throw new Error(); });
state.projects = projects;
try {
await store.dispatch(DELETE, '11');
expect(true).toBe(false);
} catch (error) {
expect(state.projects).toEqual(projects);
}
});
it('success select project', () => {
state.projects = projects;
store.dispatch(SELECT, '1');
expect(state.selectedProject.id).toEqual('1');
});
it('success update project name', async () => {
jest.spyOn(projectsApi, 'update').mockReturnValue(
const store = useProjectsStore();
jest.spyOn(ProjectsApiGql.prototype, 'update').mockReturnValue(
Promise.resolve(),
);
state.projects = projects;
store.state.selectedProject = projects[0];
const newName = 'newName';
const fieldsToUpdate = new ProjectFields(newName, state.projects[0].description);
const fieldsToUpdate = new ProjectFields(newName, projects[0].description);
await store.dispatch(UPDATE_NAME, fieldsToUpdate);
await store.updateProjectName(fieldsToUpdate);
const project = state.projects.find((pr: Project) => pr.id === '1');
expect(project).toBeDefined();
if (project) expect(project.name).toBe(newName);
expect(store.state.selectedProject.name).toBe(newName);
});
it('success update project description', async () => {
jest.spyOn(projectsApi, 'update').mockReturnValue(
const store = useProjectsStore();
jest.spyOn(ProjectsApiGql.prototype, 'update').mockReturnValue(
Promise.resolve(),
);
state.projects = projects;
store.state.selectedProject = projects[0];
const newDescription = 'newDescription1';
const fieldsToUpdate = new ProjectFields(state.projects[0].name, newDescription);
const fieldsToUpdate = new ProjectFields(projects[0].name, newDescription);
await store.dispatch(UPDATE_DESCRIPTION, fieldsToUpdate);
await store.updateProjectDescription(fieldsToUpdate);
const project = state.projects.find((pr: Project) => pr.id === '1');
expect(project).toBeDefined();
if (project) expect(project.description).toBe(newDescription);
});
it('update throws an error when api call fails', async () => {
jest.spyOn(projectsApi, 'update').mockImplementation(() => { throw new Error(); });
state.projects = projects;
const newDescription = 'newDescription2';
const fieldsToUpdate = new ProjectFields(state.projects[0].name, newDescription);
try {
await store.dispatch(UPDATE_DESCRIPTION, fieldsToUpdate);
expect(true).toBe(false);
} catch (error) {
const project = state.projects.find((pr: Project) => pr.id === '1');
expect(project).toBeDefined();
if (project) expect(project.description).toBe('newDescription1');
}
expect(store.state.selectedProject.description).toBe(newDescription);
});
it('success get project limits', async () => {
jest.spyOn(projectsApi, 'getLimits').mockReturnValue(
const store = useProjectsStore();
jest.spyOn(ProjectsApiGql.prototype, 'getLimits').mockReturnValue(
Promise.resolve(limits),
);
state.projects = projects;
store.state.projects = projects;
await store.dispatch(GET_LIMITS, state.selectedProject.id);
await store.getProjectLimits(store.state.selectedProject.id);
expect(state.currentLimits.bandwidthUsed).toBe(12);
expect(state.currentLimits.bandwidthLimit).toBe(15);
expect(state.currentLimits.storageUsed).toBe(13);
expect(state.currentLimits.storageLimit).toBe(14);
});
it('success clearProjects', () => {
state.projects = projects;
store.dispatch(CLEAR);
expect(state.projects.length).toEqual(0);
expect(store.state.currentLimits.bandwidthUsed).toBe(12);
expect(store.state.currentLimits.bandwidthLimit).toBe(15);
expect(store.state.currentLimits.storageUsed).toBe(13);
expect(store.state.currentLimits.storageLimit).toBe(14);
});
});
describe('getters', () => {
beforeEach(() => {
createLocalVue().use(Vuex);
});
it('selectedProject', () => {
store.commit(PROJECTS_MUTATIONS.SET_PROJECTS, projects);
store.commit(PROJECTS_MUTATIONS.SELECT_PROJECT, '1');
const selectedProject = store.getters.selectedProject;
expect(selectedProject.id).toBe('1');
setActivePinia(createPinia());
});
it('projects array', () => {
store.commit(PROJECTS_MUTATIONS.SET_PROJECTS, projects);
const store = useProjectsStore();
const allProjects = store.getters.projects;
store.state.projects = projects;
const allProjects = store.projects;
expect(allProjects.length).toEqual(2);
});