Merge pull request #150 from AlphadayHQ/dev

v2.1.0 — Activity logs + multiple dep updates
AlphadayHQ · Nov 27, 2023 · f32114e · f32114e
2 parents fd6e54e + 6b89b70
commit f32114e
Show file tree

Hide file tree

Showing 21 changed files with 368 additions and 143 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,16 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: npm # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+      day: "friday"
+      time: "05:00"
+      timezone: UTC
+    open-pull-requests-limit: 3
+    versioning-strategy: increase
diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
@@ -67,7 +67,7 @@ jobs:
                   VITE_ETHPLORER_API_KEY: ${{ secrets.STAGING__FRONTEND__API_KEY_ETHPLORER }}
                   VITE_ZAPPER_API_KEY: ${{ secrets.STAGING__FRONTEND__API_KEY_ZAPPER }}
 
-                  VITE_WALLET_CONNECT_PROJECT_ID: ${{ secrets.DEV__REACT_APP_WALLET_CONNECT_PROJECT_ID }}
+                  VITE_WALLET_CONNECT_PROJECT_ID: ${{ secrets.STAGING__REACT_APP_WALLET_CONNECT_PROJECT_ID }}
 
                   VITE_FIRE_API_KEY: ${{ secrets.STAGING__REACT_APP_FIRE_API_KEY }}
                   VITE_FIRE_AUTH_DOMAIN: ${{ secrets.STAGING__REACT_APP_FIRE_AUTH_DOMAIN }}

diff --git a/package.json b/package.json
@@ -35,7 +35,7 @@
     "eslint": "8.35.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.0.0",
-    "eslint-config-prettier": "8.8.0",
+    "eslint-config-prettier": "9.0.0",
     "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.4.1",

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alphaday/frontend",
   "private": true,
-  "version": "2.0.0",
+  "version": "2.1.0",
   "type": "module",
   "scripts": {
     "prepare": "export VITE_COMMIT=$(git rev-parse --short HEAD)",

diff --git a/packages/frontend/src/api/hooks/index.ts b/packages/frontend/src/api/hooks/index.ts
@@ -1,3 +1,4 @@
+export * from "./useActivityLogger";
 export * from "./useAppInit";
 export * from "./useAccount";
 export * from "./useAvailableViews";

diff --git a/packages/frontend/src/api/hooks/useActivityLogger.ts b/packages/frontend/src/api/hooks/useActivityLogger.ts
@@ -0,0 +1,87 @@
+import { useSendActivityLogMutation } from "src/api/services";
+import {
+    EActivityLogEventTypes,
+    EActivityLogObjectTypes,
+} from "src/api/services/activity-log/types";
+import { ECookieChoice } from "src/api/types";
+import { Logger } from "../utils/logging";
+
+interface IActivityLogger {
+    logCookieChoice: (choice: ECookieChoice) => void;
+    logViewVisited: (id: number) => void;
+    logKeywordSelected: (id: number) => void;
+}
+
+export const useActivityLogger = (): IActivityLogger => {
+    const [sendActivityLog] = useSendActivityLogMutation();
+
+    const logViewVisited = (viewId: number) => {
+        sendActivityLog({
+            event_type: EActivityLogEventTypes.ViewVisited,
+            object_type: 3,
+            object_id: viewId,
+        })
+            .unwrap()
+            .then((resp) =>
+                Logger.debug(
+                    "useActivityLogger::logVisitedView: updated view activity log",
+                    resp
+                )
+            )
+            .catch((err) =>
+                Logger.error(
+                    "useActivityLogger::logVisitedView: error updating view activity log",
+                    err
+                )
+            );
+    };
+
+    const logCookieChoice = (choice: ECookieChoice) => {
+        sendActivityLog({
+            event_type: EActivityLogEventTypes.CookieChoiceSet,
+            data: {
+                choice,
+            },
+        })
+            .unwrap()
+            .then((resp) =>
+                Logger.debug(
+                    "useActivityLogger::logCookieChoice: updated cookie activity log",
+                    resp
+                )
+            )
+            .catch((err) =>
+                Logger.error(
+                    "useActivityLogger::logCookieChoice: error updating cookie activity log",
+                    err
+                )
+            );
+    };
+
+    const logKeywordSelected = (keywordId: number) => {
+        sendActivityLog({
+            event_type: EActivityLogEventTypes.KeywordSelected,
+            object_id: keywordId,
+            object_type: EActivityLogObjectTypes.Keyword,
+        })
+            .unwrap()
+            .then((resp) =>
+                Logger.debug(
+                    "useActivityLogger::logKeywordSelected: updated keyword activity log",
+                    resp
+                )
+            )
+            .catch((err) =>
+                Logger.error(
+                    "useActivityLogger::logKeywordSelected: error updating keyword activity log",
+                    err
+                )
+            );
+    };
+
+    return {
+        logViewVisited,
+        logCookieChoice,
+        logKeywordSelected,
+    };
+};
diff --git a/packages/frontend/src/api/services/activity-log/activityEndpoints.ts b/packages/frontend/src/api/services/activity-log/activityEndpoints.ts
@@ -0,0 +1,24 @@
+import CONFIG from "../../../config/config";
+import { alphadayApi } from "../alphadayApi";
+import { TActivityLogRequest, TActivityLogResponse } from "./types";
+
+const API_CONFIG = CONFIG.API.DEFAULT;
+const { ACTIVITY_LOG } = API_CONFIG.ROUTES;
+
+const activityLogsApi = alphadayApi.injectEndpoints({
+    endpoints: (builder) => ({
+        sendActivityLog: builder.mutation<
+            TActivityLogResponse,
+            TActivityLogRequest
+        >({
+            query: (request) => ({
+                url: `${ACTIVITY_LOG.BASE}${ACTIVITY_LOG.DEFAULT}`,
+                method: "POST",
+                body: request,
+            }),
+        }),
+    }),
+    overrideExisting: false,
+});
+
+export const { useSendActivityLogMutation } = activityLogsApi;
diff --git a/packages/frontend/src/api/services/activity-log/types.ts b/packages/frontend/src/api/services/activity-log/types.ts
@@ -0,0 +1,47 @@
+export enum EActivityLogEventTypes {
+    ViewVisited = "VIEW_VISITED",
+    WidgetInteraction = "WIDGET_INTERACTION", // Placeholder, TBD
+    KeywordSelected = "KEYWORD_SELECTED",
+    CookieChoiceSet = "COOKIE_CHOICE_SET",
+}
+
+export enum EActivityLogObjectTypes {
+    Keyword = 1,
+    Widget,
+    View,
+}
+
+export type TKeywordActivityLog = {
+    event_type: EActivityLogEventTypes.KeywordSelected;
+    object_type: EActivityLogObjectTypes.Keyword;
+    object_id: number;
+    data?: JSONValue;
+};
+
+export type TWidgetActivityLog = {
+    event_type: EActivityLogEventTypes.WidgetInteraction;
+    object_type: EActivityLogObjectTypes.Widget;
+    object_id: number;
+    data?: JSONValue;
+};
+
+export type TViewActivityLog = {
+    event_type: EActivityLogEventTypes.ViewVisited;
+    object_type: EActivityLogObjectTypes.View;
+    object_id: number;
+    data?: JSONValue;
+};
+
+export type TCookieActivityLog = {
+    event_type: EActivityLogEventTypes.CookieChoiceSet;
+    data: JSONValue;
+};
+
+export type TRemoteActivityLog =
+    | TKeywordActivityLog
+    | TWidgetActivityLog
+    | TViewActivityLog
+    | TCookieActivityLog;
+
+export type TActivityLogRequest = TRemoteActivityLog;
+export type TActivityLogResponse = TRemoteActivityLog;
diff --git a/packages/frontend/src/api/services/index.ts b/packages/frontend/src/api/services/index.ts
@@ -1,3 +1,6 @@
+export * from "./activity-log/activityEndpoints";
+export * from "./activity-log/types";
+
 export * from "./coins/coinsEndpoints";
 export * from "./coins/types";
 

diff --git a/packages/frontend/src/api/store/migrations.ts b/packages/frontend/src/api/store/migrations.ts
@@ -26,15 +26,15 @@ type PersistedRootState = PersistedState & RootState;
  *   102: (s: RootStateV101) => PersistedRootState
  */
 
-// type RootStateV100 = PersistedRootState;
+type RootStateV100 = PersistedRootState;
 
 export type TMigrationFunction = (
     state: Partial<PersistedRootState>
 ) => MaybeAsync<PersistedRootState>;
 
 type TMigrations = {
     // 101: (s: RootStateV100) => PersistedRootState
-    100: (s: unknown) => undefined;
+    100: (s: PersistedState) => RootStateV100 | undefined;
 };
 
 /**
@@ -119,7 +119,26 @@ export const removeFieldFromState = <S extends Record<string, unknown>>(
  * TMigrationStateVariant type.
  */
 const migrations: TMigrations = {
-    100: (_s: unknown) => undefined,
+    100: (s: PersistedState) => {
+        // eslint-disable-next-line no-underscore-dangle
+        const version = s?._persist?.version;
+        // v21 was last storage version in legacy repo
+        // we'll reset state for versions older than that
+        if (version && version < 21) {
+            Logger.warn(
+                `Found old storage version ${version}, resetting state`
+            );
+            return undefined;
+        }
+        if (version && version === 22) {
+            Logger.debug("migrations: found version 22, preserving");
+            return s as RootStateV100;
+        }
+        Logger.debug(
+            `migrations: unexpected version ${version}, reseting state`
+        );
+        return undefined;
+    },
 };
 
 export default migrations;
diff --git a/packages/frontend/src/components/video/VideoPlayer.tsx b/packages/frontend/src/components/video/VideoPlayer.tsx
@@ -99,7 +99,7 @@ const VideoPlayer: FC<IVideoPlayer> = ({
                             {video.title}
                         </p>
 
-                        <p className="flex mt-[8.5px] fontGroup-support text-primaryVariant100 text-center [&_.bookmark]:block [&_.bookmark]:mt-[1px] [&_.bookmark]:cursor-pointer">
+                        <p className="flex mt-[8.5px] fontGroup-mini text-primaryVariant100 text-center [&_.bookmark]:block [&_.bookmark]:mt-[1px] [&_.bookmark]:cursor-pointer">
                             <span>{video.sourceName}</span>
                             <span className="my-0 mx-[7px]">•</span>
                             <span className="date">{duration}</span>

diff --git a/packages/frontend/src/config/backend.ts b/packages/frontend/src/config/backend.ts
@@ -14,6 +14,10 @@ const API_V0 = {
     },
     API_BASE_URL: import.meta.env.VITE_API_BASE_URL,
     ROUTES: {
+        ACTIVITY_LOG: {
+            BASE: "activity_log",
+            DEFAULT: "/",
+        },
         NEWS: {
             BASE: "items/news",
             TRENDING: "/trending/",

diff --git a/packages/frontend/src/containers/base/BaseContainer.tsx b/packages/frontend/src/containers/base/BaseContainer.tsx
@@ -9,7 +9,6 @@ import {
 import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
 import {
     useCallbackState,
-    useKeyPress,
     useView,
     useWidgetHeight,
     useWindowSize,
@@ -95,7 +94,9 @@ const BaseContainer: FC<IBaseContainerProps> = ({
             })
         );
     };
-    const [showMobileDialog, setShowMobileDialog] = useState(false);
+    const [showMobileDialog, setShowMobileDialog] = useState(
+        width <= breakpoints.TwoColMinWidth && showFullSize
+    );
     const [showSettings, setShowSettings] = useState<boolean | undefined>();
     const handleShowDialog = () => {
         setShowMobileDialog(false);
@@ -166,12 +167,6 @@ const BaseContainer: FC<IBaseContainerProps> = ({
         document.addEventListener("mousemove", resize, false);
     };
 
-    useKeyPress({
-        targetKey: "Escape",
-        callback: handleShowFullSize,
-        skip: !showFullSize,
-    });
-
     const moduleId = `module-${moduleData.hash}`;
 
     // TODO(elcharitas): Review this, Do we need to hide the module if it is not visible?
@@ -257,38 +252,43 @@ const BaseContainer: FC<IBaseContainerProps> = ({
                     )}
                 </div>
             </div>
-            {onToggleShowFullSize && allowFullSize && (
-                <Modal
-                    size="max"
-                    showModal={!!showFullSize}
-                    onClose={handleShowFullSize}
-                >
-                    <BaseContainerHeader
-                        headerRef={headerRef}
-                        toggleCollapse={toggleCollapse}
-                        tags={tags}
-                        handleShowFullSize={handleShowFullSize}
-                        title={title}
-                        removeTagFromViewWidget={removeTagFromViewWidget}
-                        widgetDescription={widgetDescription}
-                        removeWidget={removeWidget}
-                        toggleSettings={toggleSettings}
-                        alreadyCollapsed={alreadyCollapsed}
-                        moduleData={moduleData}
-                        showFullSize={showFullSize}
-                        allowFullSize={allowFullSize}
-                    />
-                    {children}
-                    <div className="foot-block" />
-                </Modal>
-            )}
+            {onToggleShowFullSize &&
+                allowFullSize &&
+                width > breakpoints.TwoColMinWidth && (
+                    <Modal
+                        size="max"
+                        showModal={!!showFullSize}
+                        onClose={handleShowFullSize}
+                    >
+                        <BaseContainerHeader
+                            headerRef={headerRef}
+                            toggleCollapse={toggleCollapse}
+                            tags={tags}
+                            handleShowFullSize={handleShowFullSize}
+                            title={title}
+                            removeTagFromViewWidget={removeTagFromViewWidget}
+                            widgetDescription={widgetDescription}
+                            removeWidget={removeWidget}
+                            toggleSettings={toggleSettings}
+                            alreadyCollapsed={alreadyCollapsed}
+                            moduleData={moduleData}
+                            showFullSize={showFullSize}
+                            allowFullSize={allowFullSize}
+                        />
+                        {children}
+                        <div className="foot-block" />
+                    </Modal>
+                )}
             <Dialog
                 title="Alphaday"
                 showXButton
                 saveButtonText="Close"
                 showDialog={showMobileDialog}
                 onSave={handleShowDialog}
-                onClose={handleShowDialog}
+                onClose={() => {
+                    handleShowDialog();
+                    handleShowFullSize();
+                }}
                 size="sm"
             >
                 <p>Switch to Desktop to get the best experience of {title}</p>

diff --git a/packages/frontend/src/containers/base/BaseContainerHeader.tsx b/packages/frontend/src/containers/base/BaseContainerHeader.tsx
@@ -42,7 +42,7 @@ const BaseContainerHeader: FC<IBaseContainerHeader> = ({
                     role="button"
                     tabIndex={0}
                     onClick={toggleCollapse}
-                    className="flex h-[inherit] w-full pb-0.5"
+                    className="flex h-[inherit] w-full pb-0.5 focus-visible:outline-none"
                 >
                     <h6 className="text-primaryVariant100 fontGroup-highlight m-0 inline-flex uppercase">
                         {title}