Refactor(stores): Move stores to features

src/app/app.module.ts

@@ -1,20 +1,13 @@
 import { NgModule } from '@angular/core';
 import { NgxsModule } from '@ngxs/store';
 import { AuthState } from '@core/store/auth';
-import { HomeState } from 'src/app/features/home/store';
-import { TokensState } from '@core/store/settings';
-import { AddonsState } from '@core/store/settings/addons';
+import { AddonsState } from '@osf/features/settings/addons/store';
 import { SearchState } from '@osf/features/search/store';
+import { TokensState } from '@osf/features/settings/tokens/store';
 
 @NgModule({
   imports: [
-    NgxsModule.forRoot([
-      AuthState,
-      TokensState,
-      AddonsState,
-      HomeState,
-      SearchState,
-    ]),
+    NgxsModule.forRoot([AuthState, TokensState, AddonsState, SearchState]),
   ],
 })
 export class AppModule {}

src/app/app.routes.ts

@@ -82,7 +82,7 @@ export const routes: Routes = [
       {
         path: 'my-projects/:id',
         loadComponent: () =>
-          import('./features/my-projects/project/project.component').then(
+          import('@osf/features/project/project.component').then(
             (mod) => mod.ProjectComponent,
           ),
         children: [
@@ -95,35 +95,35 @@ export const routes: Routes = [
             path: 'overview',
             loadComponent: () =>
               import(
-                './features/my-projects/project/overview/project-overview.component'
+                '@osf/features/project/overview/project-overview.component'
               ).then((mod) => mod.ProjectOverviewComponent),
           },
           {
             path: 'metadata',
             loadComponent: () =>
               import(
-                './features/my-projects/project/metadata/project-metadata.component'
+                '@osf/features/project/metadata/project-metadata.component'
               ).then((mod) => mod.ProjectMetadataComponent),
           },
           {
             path: 'files',
             loadComponent: () =>
               import(
-                './features/my-projects/project/files/project-files.component'
+                '@osf/features/project/files/project-files.component'
               ).then((mod) => mod.ProjectFilesComponent),
           },
           {
             path: 'files/:fileId',
             loadComponent: () =>
               import(
-                './features/my-projects/project/files/file-detail/file-detail.component'
+                '@osf/features/project/files/file-detail/file-detail.component'
               ).then((mod) => mod.FileDetailComponent),
           },
           {
             path: 'registrations',
             loadComponent: () =>
               import(
-                '@osf/features/my-projects/project/registrations/registrations.component'
+                '@osf/features/project/registrations/registrations.component'
               ).then((mod) => mod.RegistrationsComponent),
           },
         ],

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -48,7 +48,11 @@ export class NavMenuComponent {
 
   #convertToMenuItem(item: NavItem): MenuItem {
     const currentUrl = this.#router.url;
-    const isExpanded = item.isCollapsible && currentUrl.startsWith(item.path);
+    const isExpanded =
+      item.isCollapsible &&
+      (currentUrl.startsWith(item.path) ||
+        (item.items?.some((subItem) => currentUrl.startsWith(subItem.path)) ??
+          false));
 
     return {
       label: item.label,

src/app/core/constants/ngxs-states.constant.ts

@@ -1,10 +1,10 @@
 import { AuthState } from '@core/store/auth';
-import { TokensState } from '@core/store/settings';
-import { AddonsState } from '@core/store/settings/addons';
+import { TokensState } from '@osf/features/settings/tokens/store';
+import { AddonsState } from '@osf/features/settings/addons/store';
 import { UserState } from '@core/store/user';
-import { MyProjectsState } from '@core/store/my-projects';
+import { MyProjectsState } from '@osf/features/my-projects/store';
 import { SearchState } from '@osf/features/search/store';
-import { InstitutionsState } from '@core/store/institutions';
+import { InstitutionsState } from '@osf/features/institutions/store';
 
 export const STATES = [
   AuthState,

src/app/core/services/json-api/json-api.service.ts

@@ -9,7 +9,7 @@ import { JsonApiResponse } from '@core/services/json-api/json-api.entity';
 export class JsonApiService {
   http: HttpClient = inject(HttpClient);
   readonly #token =
-    'Bearer UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm';
+    'Bearer 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
   readonly #headers = new HttpHeaders({
     Authorization: this.#token,
     Accept: 'application/vnd.api+json',

src/app/features/home/home.component.ts

@@ -23,11 +23,11 @@ import {
   MyProjectsSelectors,
   GetMyProjects,
   ClearMyProjects,
-} from '@core/store/my-projects';
+} from '@osf/features/my-projects/store';
 import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
 import { MyProjectsSearchFilters } from '@osf/features/my-projects/entities/my-projects-search-filters.models';
 import { MyProjectsItem } from '@osf/features/my-projects/entities/my-projects.entities';
-import { GetUserInstitutions } from '@osf/core/store/institutions';
+import { GetUserInstitutions } from '@osf/features/institutions/store';
 import { DialogService } from 'primeng/dynamicdialog';
 import { AddProjectFormComponent } from '@shared/components/add-project-form/add-project-form.component';
 

src/app/features/institutions/institutions.service.ts

@@ -18,6 +18,7 @@ export class InstitutionsService {
 
   getUserInstitutions(): Observable<Institution[]> {
     const url = this.#baseUrl + 'users/me/institutions/';
+    // const url = this.#baseUrl + 'users/26c59/institutions/';
     return this.#jsonApiService
       .get<JsonApiResponse<UserInstitutionGetResponse[], null>>(url)
       .pipe(

src/app/features/my-projects/my-projects.component.ts

@@ -30,7 +30,7 @@ import {
   GetMyPreprints,
   GetBookmarksCollectionId,
   GetMyBookmarks,
-} from '@core/store/my-projects';
+} from '@osf/features/my-projects/store';
 import { debounceTime, distinctUntilChanged, Subject } from 'rxjs';
 import { MyProjectsSearchFilters } from '@osf/features/my-projects/entities/my-projects-search-filters.models';
 import { TableParameters } from '@shared/entities/table-parameters.interface';
@@ -40,7 +40,7 @@ import { SortOrder } from '@shared/utils/sort-order.enum';
 import { MyProjectsItem } from '@osf/features/my-projects/entities/my-projects.entities';
 import { QueryParams } from '@osf/shared/entities/query-params.interface';
 import { MyProjectsTableComponent } from '@shared/components/my-projects-table/my-projects-table.component';
-import { GetUserInstitutions } from '@core/store/institutions';
+import { GetUserInstitutions } from '@osf/features/institutions/store';
 
 @Component({
   selector: 'osf-my-projects',

src/app/features/my-projects/my-projects.service.ts

@@ -14,12 +14,12 @@ import { map } from 'rxjs/operators';
 import { SortOrder } from '@shared/utils/sort-order.enum';
 import { EndpointType } from '@osf/features/my-projects/entities/my-projects.types';
 import { CreateProjectPayload } from './entities/create-project.entities';
+import { environment } from '../../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class MyProjectsService {
-  #baseUrl = 'https://api.staging4.osf.io/v2/';
   #jsonApiService = inject(JsonApiService);
   #sortFieldMap: Record<string, string> = {
     title: 'title',
@@ -58,10 +58,10 @@ export class MyProjectsService {
     } else {
       params['sort'] = '-date_modified';
     }
-    // const url = this.#baseUrl + endpoint + '/';
-    const url = endpoint.startsWith('collections/')
-      ? this.#baseUrl + endpoint
-      : this.#baseUrl + 'users/me/' + endpoint;
+    const url = environment.apiUrl + '/' + endpoint + '/';
+    // const url = endpoint.startsWith('collections/')
+    //   ? environment.apiUrl + '/' + endpoint
+    //   : environment.apiUrl + '/users/me/' + endpoint;
 
     return this.#jsonApiService
       .get<MyProjectsJsonApiResponse>(url, params)
@@ -89,7 +89,10 @@ export class MyProjectsService {
     };
 
     return this.#jsonApiService
-      .get<SparseCollectionsResponse>(this.#baseUrl + 'collections/', params)
+      .get<SparseCollectionsResponse>(
+        environment.apiUrl + '/collections/',
+        params,
+      )
       .pipe(
         map((response) => {
           const bookmarksCollection = response.data.find(
@@ -175,7 +178,7 @@ export class MyProjectsService {
 
     return this.#jsonApiService
       .post<MyProjectsItemGetResponse>(
-        `${this.#baseUrl}nodes/`,
+        `${environment.apiUrl}/nodes/`,
         payload,
         params,
       )

src/app/core/store/my-projects/my-projects.selectors.ts → src/app/features/my-projects/store/my-projects.selectors.ts

@@ -1,6 +1,6 @@
 import { Selector } from '@ngxs/store';
 import { MyProjectsStateModel } from './my-projects.model';
-import { MyProjectsState } from '@core/store/my-projects/my-projects.state';
+import { MyProjectsState } from '@osf/features/my-projects/store/my-projects.state';
 
 export class MyProjectsSelectors {
   @Selector([MyProjectsState])

src/app/features/my-projects/project/files/project-files.component.scss → src/app/features/project/files/project-files.component.scss

@@ -1,5 +1,5 @@
-@use "assets/styles/variables" as var;
-@use "assets/styles/mixins" as mix;
+@use "../../../../assets/styles/variables" as var;
+@use "../../../../assets/styles/mixins" as mix;
 
 :host {
   @include mix.flex-column;

src/app/features/my-projects/project/files/project-files.component.ts → src/app/features/project/files/project-files.component.ts

@@ -10,7 +10,7 @@ import { TableModule } from 'primeng/table';
 import {
   FileItem,
   FILES,
-} from '@osf/features/my-projects/project/files/project-files.entities';
+} from '@osf/features/project/files/project-files.entities';
 import { Router } from '@angular/router';
 import { Select } from 'primeng/select';
 import { FloatLabel } from 'primeng/floatlabel';

src/app/features/my-projects/project/metadata/project-metadata.component.scss → src/app/features/project/metadata/project-metadata.component.scss

@@ -1,4 +1,4 @@
-@use "assets/styles/variables" as var;
+@use "../../../../assets/styles/variables" as var;
 
 .metadata {
   border: 1px solid var(--grey-2);

src/app/features/my-projects/project/metadata/project-metadata.component.ts → src/app/features/project/metadata/project-metadata.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
-import { metadataTemplates } from '@osf/features/my-projects/project/metadata/metadata';
+import { metadataTemplates } from '@osf/features/project/metadata/metadata';
 import { Button } from 'primeng/button';
 
 @Component({

src/app/features/my-projects/project/overview/project-overview.component.html → src/app/features/project/overview/project-overview.component.html

@@ -203,14 +203,14 @@ <h3>Affiliated Institutions</h3>
         <div class="flex gap-2">
           <img
             alt="Center of Open Science"
-            ngSrc="assets/images/project/center-for-os.png"
+            ngSrc="../../../../assets/images/project/center-for-os.png"
             width="155"
             height="45"
           />
 
           <img
             alt="Center of Open Science"
-            ngSrc="assets/images/project/arnold-ven.png"
+            ngSrc="../../../../assets/images/project/arnold-ven.png"
             width="145"
             height="45"
           />

src/app/features/my-projects/project/overview/project-overview.component.scss → src/app/features/project/overview/project-overview.component.scss

@@ -1,4 +1,4 @@
-@use "assets/styles/variables" as var;
+@use "../../../../assets/styles/variables" as var;
 
 .desktop {
   margin-top: 4.5rem;

src/app/features/my-projects/project/registrations/registration-card/registration-card.component.scss → src/app/features/project/registrations/registration-card/registration-card.component.scss

@@ -1,4 +1,4 @@
-@use "../../../../../../assets/styles/mixins" as mix;
+@use "../../../../../assets/styles/mixins" as mix;
 
 :host {
   .icon-container {

src/app/features/project/registrations/registrations.component.scss

@@ -0,0 +1,7 @@
+@use "../../../../assets/styles/variables" as var;
+@use "../../../../assets/styles/mixins" as mix;
+
+:host {
+  @include mix.flex-column;
+  flex: 1;
+}

src/app/features/my-projects/project/registrations/registrations.component.ts → src/app/features/project/registrations/registrations.component.ts

@@ -8,12 +8,12 @@ import { DialogService } from 'primeng/dynamicdialog';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { IS_MEDIUM, IS_WEB, IS_XSMALL } from '@shared/utils/breakpoints.tokens';
 import { TabOption } from '@shared/entities/tab-option.interface';
-import { RegistrationCardComponent } from '@osf/features/my-projects/project/registrations/registration-card/registration-card.component';
+import { RegistrationCardComponent } from '@osf/features/project/registrations/registration-card/registration-card.component';
 import { Select } from 'primeng/select';
 import { SubHeaderComponent } from '@shared/components/sub-header/sub-header.component';
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'primeng/tabs';
 import { FormsModule } from '@angular/forms';
-import { RegistrationCard } from '@osf/features/my-projects/project/registrations/registration-card/registration-card.interface';
+import { RegistrationCard } from '@osf/features/project/registrations/registration-card/registration-card.interface';
 
 @Component({
   selector: 'osf-registrations',

src/app/features/settings/addons/addon-card/addon-card.component.ts

@@ -9,7 +9,7 @@ import {
 } from '@osf/features/settings/addons/entities/addons.entities';
 import { NgClass } from '@angular/common';
 import { Store } from '@ngxs/store';
-import { DeleteAuthorizedAddon } from '@core/store/settings/addons';
+import { DeleteAuthorizedAddon } from '@osf/features/settings/addons/store';
 import { DialogModule } from 'primeng/dialog';
 
 @Component({

src/app/features/settings/addons/addons.component.ts

@@ -23,7 +23,7 @@ import {
   GetAuthorizedStorageAddons,
   GetAuthorizedCitationAddons,
   GetAddonsUserReference,
-} from '@core/store/settings/addons';
+} from '@osf/features/settings/addons/store';
 import { SelectOption } from '@shared/entities/select-option.interface';
 import { UserSelectors } from '@core/store/user/user.selectors';
 

src/app/features/settings/addons/addons.service.ts

@@ -15,21 +15,21 @@ import { AddonMapper } from '@osf/features/settings/addons/addon.mapper';
 import { Store } from '@ngxs/store';
 import { JsonApiResponse } from '@core/services/json-api/json-api.entity';
 import { UserSelectors } from '@core/store/user/user.selectors';
+import { environment } from '../../../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AddonsService {
   #store = inject(Store);
-  #baseUrl = 'https://addons.staging4.osf.io/v1/';
   #jsonApiService = inject(JsonApiService);
   #currentUser = this.#store.selectSignal(UserSelectors.getCurrentUser);
 
   getAddons(addonType: string): Observable<Addon[]> {
     return this.#jsonApiService
       .get<
         JsonApiResponse<AddonGetResponse[], null>
-      >(this.#baseUrl + `external-${addonType}-services`)
+      >(`${environment.addonsApiUrl}/external-${addonType}-services`)
       .pipe(
         map((response) => {
           return response.data.map((item) => AddonMapper.fromResponse(item));
@@ -49,7 +49,7 @@ export class AddonsService {
     return this.#jsonApiService
       .get<
         JsonApiResponse<UserReference[], null>
-      >(this.#baseUrl + 'user-references/', params)
+      >(environment.addonsApiUrl + '/user-references/', params)
       .pipe(map((response) => response.data));
   }
 
@@ -63,7 +63,7 @@ export class AddonsService {
     return this.#jsonApiService
       .get<
         JsonApiResponse<AuthorizedAddonGetResponse[], IncludedAddonData[]>
-      >(this.#baseUrl + `user-references/${referenceId}/authorized_${addonType}_accounts/?include=external-${addonType}-service`, params)
+      >(`${environment.addonsApiUrl}/user-references/${referenceId}/authorized_${addonType}_accounts/?include=external-${addonType}-service`, params)
       .pipe(
         map((response) => {
           return response.data.map((item) =>
@@ -78,7 +78,7 @@ export class AddonsService {
     addonType: string,
   ): Observable<AddonResponse> {
     return this.#jsonApiService.post<AddonResponse>(
-      this.#baseUrl + `authorized-${addonType}-accounts/`,
+      `${environment.addonsApiUrl}/authorized-${addonType}-accounts/`,
       addonRequestPayload,
     );
   }
@@ -89,14 +89,14 @@ export class AddonsService {
     addonId: string,
   ): Observable<AddonResponse> {
     return this.#jsonApiService.patch<AddonResponse>(
-      this.#baseUrl + `authorized-${addonType}-accounts/${addonId}/`,
+      `${environment.addonsApiUrl}/authorized-${addonType}-accounts/${addonId}/`,
       addonRequestPayload,
     );
   }
 
   deleteAuthorizedAddon(id: string, addonType: string): Observable<void> {
     return this.#jsonApiService.delete(
-      this.#baseUrl + `authorized-${addonType}-accounts/${id}/`,
+      `${environment.addonsApiUrl}/authorized-${addonType}-accounts/${id}/`,
     );
   }
 }

src/app/features/settings/addons/connect-addon/connect-addon.component.ts

@@ -34,7 +34,7 @@ import {
   AddonsSelectors,
   CreateAuthorizedAddon,
   UpdateAuthorizedAddon,
-} from '@core/store/settings/addons';
+} from '@osf/features/settings/addons/store';
 import {
   AddonForm,
   AddonFormControls,