Project switching (#206)

* Register notice component globally

* Render button as flex in full width

* Add buttons to / route

* Rename block->full-width

* Add hyrate overlay / project chooser placeholder

* Make routes named

* Dehydrate / hydrate when switching projects

* Add choose project buttons to / route

* Add main app component and hydration loader effect

* Improve routing flow

* Remove unused import statement

* Fix test
This commit is contained in:
Rijk van Zanten
2020-03-17 16:25:43 -04:00
committed by GitHub
parent b26b91f785
commit 346e6f95ce
23 changed files with 252 additions and 55 deletions

View File

@@ -67,7 +67,7 @@ describe('Stores / Projects', () => {
.mockImplementation(() => Promise.resolve({ data: { data: {} } }));
await projectsStore.setCurrentProject('my-project');
expect(spy).toHaveBeenCalledWith('/my-project/');
expect(projectsStore.state.projects[0]).toEqual({ key: 'my-project' });
expect(projectsStore.state.projects?.[0]).toEqual({ key: 'my-project' });
});
it('Returns true if the project exists', async () => {

View File

@@ -12,12 +12,12 @@ export const useProjectsStore = createStore({
state: () => ({
needsInstall: false,
error: null as LoadingError,
projects: [] as Projects,
projects: null as Projects | null,
currentProjectKey: null as string | null
}),
getters: {
currentProject: (state): ProjectWithKey | ProjectError | null => {
return state.projects.find(({ key }) => key === state.currentProjectKey) || null;
return state.projects?.find(({ key }) => key === state.currentProjectKey) || null;
}
},
actions: {
@@ -29,7 +29,8 @@ export const useProjectsStore = createStore({
* Returns a boolean if the operation succeeded or not.
*/
async setCurrentProject(key: string): Promise<boolean> {
const projectKeys = this.state.projects.map(project => project.key);
const projects = this.state.projects || ([] as Projects);
const projectKeys = projects.map(project => project.key);
if (projectKeys.includes(key) === false) {
try {
@@ -38,7 +39,7 @@ export const useProjectsStore = createStore({
key: key,
...projectInfoResponse.data.data
};
this.state.projects = [...this.state.projects, project];
this.state.projects = [...projects, project];
} catch {
return false;
}