[#1936] Migrate store.js to TypeScript

frontend/src/store/store.js → frontend/src/store/store.ts

@@ -1,55 +1,62 @@
 import { createStore } from 'vuex';
+import { AuthorshipFile, CommitResult, DailyCommit } from '../types/types';
+import {
+  AuthorshipInfo,
+  StoreState,
+  SummaryDates,
+  ZoomInfo,
+} from '../types/vuex.d';
 
-export default createStore({
+export default createStore<StoreState>({
   state: {
-    tabAuthorshipInfo: {},
-    tabZoomInfo: {},
-    summaryDates: {},
+    tabAuthorshipInfo: {} as AuthorshipInfo,
+    tabZoomInfo: {} as ZoomInfo,
+    summaryDates: {} as SummaryDates,
     mergedGroups: [],
     fileTypeColors: {},
     loadingOverlayCount: 0,
     loadingOverlayMessage: '',
     isTabActive: true,
-  },
+  } as StoreState,
   mutations: {
-    updateTabZoomInfo(state, info) {
+    updateTabZoomInfo(state: StoreState, info: ZoomInfo) {
       state.tabZoomInfo = info;
     },
-    updateTabAuthorshipInfo(state, info) {
+    updateTabAuthorshipInfo(state: StoreState, info: AuthorshipInfo) {
       state.tabAuthorshipInfo = info;
     },
-    updateSummaryDates(state, info) {
+    updateSummaryDates(state: StoreState, info: SummaryDates) {
       state.summaryDates = info;
     },
-    updateFileTypeColors(state, info) {
+    updateFileTypeColors(state: StoreState, info: { [key: string]: string }) {
       state.fileTypeColors = info;
     },
-    updateMergedGroup(state, info) {
+    updateMergedGroup(state: StoreState, info: string[]) {
       state.mergedGroups = info;
     },
-    incrementLoadingOverlayCount(state, increment) {
+    incrementLoadingOverlayCount(state: StoreState, increment: number) {
       state.loadingOverlayCount += increment;
       if (state.loadingOverlayCount === 0) {
         state.loadingOverlayMessage = 'Loading. Please wait...';
       }
     },
-    updateLoadingOverlayMessage(state, message) {
+    updateLoadingOverlayMessage(state: StoreState, message: string) {
       state.loadingOverlayMessage = message;
     },
-    updateTabState(state, isTabOpen) {
+    updateTabState(state: StoreState, isTabOpen: boolean) {
       state.isTabActive = isTabOpen;
-      window.addHash('tabOpen', isTabOpen);
+      window.addHash('tabOpen', isTabOpen.toString());
       if (!isTabOpen) {
         window.removeHash('tabType');
       }
       window.encodeHash();
     },
-    toggleZoomCommitMessageBody(_, slice) {
+    toggleZoomCommitMessageBody(_, slice: CommitResult) {
       if (slice.isOpen !== undefined) {
         slice.isOpen = !slice.isOpen;
       }
     },
-    setAllZoomCommitMessageBody(_, { isOpen, commits }) {
+    setAllZoomCommitMessageBody(_, { isOpen, commits }: { isOpen: boolean; commits: DailyCommit[] }) {
       commits.forEach((commit) => {
         commit.commitResults.forEach((slice) => {
           if (slice.isOpen !== undefined) {
@@ -58,14 +65,14 @@ export default createStore({
         });
       });
     },
-    updateTabAuthorshipFiles(state, files) {
+    updateTabAuthorshipFiles(state: StoreState, files: AuthorshipFile[]) {
       state.tabAuthorshipInfo.files.splice(0, state.tabAuthorshipInfo.files.length, ...files);
     },
-    toggleAuthorshipFileActiveProperty(_, file) {
+    toggleAuthorshipFileActiveProperty(_, file: AuthorshipFile) {
       file.active = !file.active;
       file.wasCodeLoaded = file.wasCodeLoaded || file.active;
     },
-    setAllAuthorshipFileActiveProperty(_, { isActive, files }) {
+    setAllAuthorshipFileActiveProperty(_, { isActive, files }: { isActive: boolean; files: AuthorshipFile[] }) {
       files.forEach((file) => {
         file.active = isActive;
         file.wasCodeLoaded = file.wasCodeLoaded || file.active;
@@ -75,7 +82,7 @@ export default createStore({
   actions: {
     // Actions are called with dispatch
 
-    async incrementLoadingOverlayCountForceReload({ commit }, increment) {
+    async incrementLoadingOverlayCountForceReload({ commit }, increment: number) {
       commit('incrementLoadingOverlayCount', increment);
       await new Promise(window.requestAnimationFrame);
       await new Promise(window.requestAnimationFrame);

frontend/src/types/types.ts

@@ -11,6 +11,7 @@ export interface CommitResult extends CommitResultRaw {
   repoId: string;
   insertions: number;
   deletions: number;
+  isOpen?: boolean;
 }
 
 // Similar to AuthorDailyContributions, but uses the updated CommitResult with the three new fields
@@ -45,3 +46,23 @@ export interface Repo extends RepoRaw {
   files?: FileResult[];
   users?: User[];
 }
+
+interface AuthorshipFileSegment {
+  authored: boolean;
+  lineNumbers: number[];
+  lines: string[];
+}
+
+export interface AuthorshipFile {
+  active: boolean;
+  blankLineCount: number;
+  charCount: number;
+  fileSize: number | undefined; // not actually in schema - to verify relevancy when migrating c-authorship.vue
+  fileType: string;
+  isBinary: boolean;
+  isIgnored: boolean;
+  lineCount: number;
+  path: string;
+  segments: AuthorshipFileSegment[];
+  wasCodeLoaded: boolean;
+}

frontend/src/types/vuex.d.ts

@@ -0,0 +1,57 @@
+import { Store } from 'vuex';
+import { AuthorshipFile, User } from './types';
+
+interface AuthorshipInfo {
+  author: string;
+  checkedFileTypes?: string[];
+  files: AuthorshipFile[];
+  isMergeGroup: boolean;
+  isRefresh?: boolean;
+  location: string | undefined;
+  maxDate: string;
+  minDate: string;
+  name: string;
+  repo: string;
+}
+
+interface ZoomInfo {
+  isRefreshing?: boolean;
+  zAuthor: string;
+  zAvgCommitSize: number | string;
+  zFileTypeColors: { [key: string]: string };
+  zFilterGroup: string;
+  zFilterSearch: string;
+  zFromRamp: boolean;
+  zIsMerged: boolean;
+  zLocation: string | undefined;
+  zRepo: string;
+  zSince: string;
+  zTimeFrame: string;
+  zUntil: string;
+  zUser: User;
+}
+
+interface SummaryDates {
+  since: string;
+  until: string;
+}
+
+interface StoreState {
+  tabAuthorshipInfo: AuthorshipInfo;
+  tabZoomInfo: ZoomInfo;
+  summaryDates: SummaryDates;
+  mergedGroups: string[];
+  fileTypeColors: { [key: string]: string };
+  loadingOverlayCount: number;
+  loadingOverlayMessage: string;
+  isTabActive: boolean;
+}
+
+declare module '@vue/runtime-core' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface State extends StoreState {
+  }
+  interface ComponentCustomProperties {
+    $store: Store<State>;
+  }
+}