Load INI from storage (#411)

* Fix actions registration

* Load correct ini version

src/App.tsx

@@ -29,7 +29,6 @@ import {
   UIState,
 } from './types/state';
 import useDb from './hooks/useDb';
-import useServerStorage from './hooks/useServerStorage';
 import Info from './pages/Info';
 import Hub from './pages/Hub';
 
@@ -57,7 +56,6 @@ const mapStateToProps = (state: AppState) => ({
 const App = ({ ui, navigation }: { ui: UIState, navigation: NavigationState }) => {
   const margin = ui.sidebarCollapsed ? 80 : 250;
   const { getTune } = useDb();
-  const { getFile } = useServerStorage();
 
   // const [lastDialogPath, setLastDialogPath] = useState<string|null>();
   // const lastDialogPath = storageGetSync('lastDialog');
@@ -68,14 +66,8 @@ const App = ({ ui, navigation }: { ui: UIState, navigation: NavigationState }) =
   useEffect(() => {
     if (tuneId) {
       getTune(tuneId).then(async (tuneData) => {
-        const [tuneRaw, iniRaw] = await Promise.all([
-          getFile(tuneData.tuneFile!),
-          getFile(tuneData.customIniFile!),
-        ]);
-
+        loadTune(tuneData);
         store.dispatch({ type: 'tuneData/load', payload: tuneData });
-
-        loadTune(tuneRaw, iniRaw);
       });
 
       store.dispatch({ type: 'navigation/tuneId', payload: tuneId });

src/components/CommandPalette.tsx

@@ -6,7 +6,6 @@ import {
   useMemo,
   ReactNode,
   useCallback,
-  useEffect,
 } from 'react';
 import {
   ActionId,
@@ -19,7 +18,7 @@ import {
   useMatches,
   ActionImpl,
   Action,
-  useKBar,
+  useRegisterActions,
 } from 'kbar';
 import { connect } from 'react-redux';
 import {
@@ -230,7 +229,6 @@ const buildTuneUrl = (tuneId: string, route: string) => generatePath(route, { tu
 
 const ActionsProvider = (props: CommandPaletteProps) => {
   const { config, tune, navigation } = props;
-  const { query } = useKBar();
   const navigate = useNavigate();
 
   const generateActions = useCallback((types: MenusType) => {
@@ -289,12 +287,15 @@ const ActionsProvider = (props: CommandPaletteProps) => {
     return newActions;
   }, [navigate, navigation.tuneId]);
 
-  useEffect(() => {
+  const getActions = () => {
     if (Object.keys(tune.constants).length) {
-      // TODO: unregister old actions
-      query.registerActions(generateActions(config.menus));
+      return generateActions(config.menus);
     }
-  }, [config.menus, generateActions, query, tune.constants]);
+
+    return [];
+  };
+
+  useRegisterActions(getActions(), [tune.constants]);
 
   return null;
 };

src/components/StatusBar.tsx

@@ -1,9 +1,13 @@
-
+import {
+  useEffect,
+  useState,
+} from 'react';
 import {
   Layout,
   Space,
   Row,
   Col,
+  Typography,
 } from 'antd';
 import {
   InfoCircleOutlined,
@@ -12,8 +16,7 @@ import {
 import { connect } from 'react-redux';
 import {
   AppState,
-  ConfigState,
-  StatusState,
+  TuneState,
 } from '../types/state';
 
 const { Footer } = Layout;
@@ -21,22 +24,37 @@ const { Footer } = Layout;
 const mapStateToProps = (state: AppState) => ({
   status: state.status,
   config: state.config,
+  tune: state.tune,
 });
 
-const firmware = (signature: string) => (
-  <Space>
-    <InfoCircleOutlined />
-    {signature}
-  </Space>
-);
+const Firmware = ({ tune }: { tune: TuneState }) => {
+  const [width, setWidth] = useState(1000);
+  const calculateWidth = () => setWidth(window.innerWidth - 130);
 
-const StatusBar = ({ status, config }: { status: StatusState, config: ConfigState }) => (
+  useEffect(() => {
+    calculateWidth();
+    window.addEventListener('resize', calculateWidth);
+
+    return () => window.removeEventListener('resize', calculateWidth);
+  }, []);
+
+  return (
+    <Space>
+      <InfoCircleOutlined />
+      <Typography.Text ellipsis style={{ maxWidth: width }}>
+        {`${tune.details.signature} - ${tune.details.writeDate} - ${tune.details.author}`}
+      </Typography.Text>
+    </Space>
+  );
+};
+
+const StatusBar = ({ tune }: { tune: TuneState }) => (
   <Footer className="app-status-bar">
     <Row>
-      <Col span={12}>
-        {config.megaTune && firmware(config.megaTune.signature)}
+      <Col span={20}>
+        {tune.details.author && <Firmware tune={tune} />}
       </Col>
-      <Col span={12} style={{ textAlign: 'right' }}>
+      <Col span={4} style={{ textAlign: 'right' }}>
         <a
           href="https://github.com/speedy-tuner/speedy-tuner-cloud"
           target="__blank"

src/hooks/useServerStorage.ts

@@ -9,16 +9,16 @@ import {
 } from 'firebase/storage';
 import { storage } from '../firebase';
 
-const BASE_PATH = 'public/users';
+const PUBLIC_PATH = 'public';
+const USERS_PATH = `${PUBLIC_PATH}/users`;
+const INI_PATH = `${PUBLIC_PATH}/ini`;
 
-const genericError = (error: Error) => notification.error({ message: 'Database Error', description: error.message });
+const genericError = (error: Error) => notification.error({ message: 'Storage Error', description: error.message });
 
 const useServerStorage = () => {
   const getFile = async (path: string) => {
     try {
-      const buffer = await getBytes(ref(storage, path));
-
-      return Promise.resolve(buffer);
+      return Promise.resolve(await getBytes(ref(storage, path)));
     } catch (error) {
       Sentry.captureException(error);
       console.error(error);
@@ -28,6 +28,37 @@ const useServerStorage = () => {
     }
   };
 
+  const getINIFile = async (signature: string) => {
+    const { version, baseVersion } = /.+?(?<version>(?<baseVersion>\d+)(-\w+)*)/.exec(signature)?.groups || { version: null, baseVersion: null };
+
+    try {
+      return Promise.resolve(await getBytes(ref(storage, `${INI_PATH}/${version}.ini.gz`)));
+    } catch (error) {
+      Sentry.captureException(error);
+      console.error(error);
+
+      notification.warning({
+        message: 'INI not found',
+        description: `INI version: "${version}" not found. Trying base version: "${baseVersion}"!` ,
+      });
+
+      try {
+        return Promise.resolve(await getBytes(ref(storage, `${INI_PATH}/${baseVersion}.ini.gz`)));
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      } catch (error) {
+        Sentry.captureException(error);
+        console.error(error);
+
+        notification.error({
+          message: 'INI not found',
+          description: `INI version: "${baseVersion}" not found. Try uploading custom INI file!` ,
+        });
+      }
+
+      return Promise.reject(error);
+    }
+  };
+
   const removeFile = async (path: string) => {
     try {
       await deleteObject(ref(storage, path));
@@ -52,9 +83,10 @@ const useServerStorage = () => {
 
   return {
     getFile: (path: string): Promise<ArrayBuffer> => getFile(path),
+    getINIFile: (signature: string): Promise<ArrayBuffer> => getINIFile(signature),
     removeFile: (path: string): Promise<void> => removeFile(path),
     uploadFile: (path: string, file: File, data: Uint8Array): UploadTask => uploadFile(path, file, data),
-    basePathForFile: (userUuid: string, tuneId: string, fileName: string): string => `${BASE_PATH}/${userUuid}/tunes/${tuneId}/${fileName}`,
+    basePathForFile: (userUuid: string, tuneId: string, fileName: string): string => `${USERS_PATH}/${userUuid}/tunes/${tuneId}/${fileName}`,
   };
 };
 

src/store.ts

@@ -36,6 +36,7 @@ const toggleSidebar = createAction('ui/toggleSidebar');
 const initialState: AppState = {
   tune: {
     constants: {},
+    details: {} as any,
   },
   tuneData: {},
   logs: [],

src/types/state.ts

@@ -1,13 +1,13 @@
 import {
   Config,
   Logs,
-  Tune,
 } from '@speedy-tuner/types';
+import { TuneWithDetails } from '../utils/tune/TuneParser';
 import { TuneDbData } from './dbData';
 
 export interface ConfigState extends Config {}
 
-export interface TuneState extends Tune {}
+export interface TuneState extends TuneWithDetails {}
 
 export interface TuneDataState extends TuneDbData {}
 

src/utils/api.ts

@@ -9,19 +9,25 @@ import {
   onProgress as onProgressType,
 } from './http';
 import TuneParser from './tune/TuneParser';
+import { TuneDbData } from '../types/dbData';
+import useServerStorage from '../hooks/useServerStorage';
 
-export const loadTune = async (tuneRaw: ArrayBuffer, iniRaw: ArrayBuffer) => {
+export const loadTune = async (tuneData: TuneDbData) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { getFile, getINIFile } = useServerStorage();
   const started = new Date();
-
+  const tuneRaw = getFile(tuneData.tuneFile!);
   const tuneParser = new TuneParser()
-    .parse(pako.inflate(new Uint8Array(tuneRaw)));
+    .parse(pako.inflate(new Uint8Array(await tuneRaw)));
 
   if (!tuneParser.isValid()) {
     // TODO: capture exception
     console.error('Invalid tune');
   }
 
-  const buff = pako.inflate(new Uint8Array(iniRaw));
+  const tune = tuneParser.getTune();
+  const iniRaw = tuneData.customIniFile ? getFile(tuneData.customIniFile) : getINIFile(tune.details.signature);
+  const buff = pako.inflate(new Uint8Array(await iniRaw));
   const config = new INI(buff).parse().getResults();
 
   // override / merge standard dialogs, constants and help
@@ -39,11 +45,8 @@ export const loadTune = async (tuneRaw: ArrayBuffer, iniRaw: ArrayBuffer) => {
   console.log(loadingTimeInfo);
 
   store.dispatch({ type: 'config/load', payload: config });
-  store.dispatch({ type: 'tune/load', payload: tuneParser.getTune() });
-  store.dispatch({
-    type: 'status',
-    payload: loadingTimeInfo,
-  });
+  store.dispatch({ type: 'tune/load', payload: tune });
+  store.dispatch({ type: 'status', payload: loadingTimeInfo });
 };
 
 export const loadLogs = (onProgress?: onProgressType, signal?: AbortSignal) =>

src/utils/tune/TuneParser.ts

@@ -1,16 +1,50 @@
 import { Tune } from '@speedy-tuner/types';
 
+export interface TuneWithDetails extends Tune {
+  details: {
+    author: string;
+    tuneComment: string;
+    writeDate: string;
+    fileFormat: string;
+    firmwareInfo: string;
+    nPages: number;
+    signature: string;
+  };
+}
+
 class TuneParser {
   private isTuneValid = false;
 
-  private tune: Tune = {
+  // TODO: move this to types package
+  private tune: TuneWithDetails = {
     constants: {},
+    details: {
+      author: '',
+      tuneComment: '',
+      writeDate: '',
+      fileFormat: '',
+      firmwareInfo: '',
+      nPages: 0,
+      signature: '',
+    },
   };
 
   parse(buffer: ArrayBuffer): TuneParser {
     const raw = (new TextDecoder()).decode(buffer);
     const xml = (new DOMParser()).parseFromString(raw, 'text/xml');
     const xmlPages = xml.getElementsByTagName('page');
+    const bibliography = xml.getElementsByTagName('bibliography')[0].attributes as any;
+    const versionInfo = xml.getElementsByTagName('versionInfo')[0].attributes as any;
+
+    this.tune.details = {
+      author: bibliography.author.value,
+      tuneComment: `${bibliography.tuneComment.value}`.trim(),
+      writeDate: bibliography.writeDate.value,
+      fileFormat: versionInfo.fileFormat.value,
+      firmwareInfo: versionInfo.firmwareInfo.value,
+      nPages: Number.parseInt(versionInfo.nPages.value, 2),
+      signature: versionInfo.signature.value,
+    };
 
     Object.keys(xmlPages).forEach((key: any) => {
       const page = xmlPages[key];
@@ -48,7 +82,7 @@ class TuneParser {
     return this;
   }
 
-  getTune(): Tune {
+  getTune(): TuneWithDetails {
     return this.tune;
   }