track consent without state - functionality

Backend/Models/User.cs

@@ -69,6 +69,9 @@ public class User
         [BsonElement("otelConsent")]
         public bool OtelConsent { get; set; }
 
+        [BsonElement("answeredConsent")]
+        public bool AnsweredConsent { get; set; }
+
         [BsonElement("uiLang")]
         public string UILang { get; set; }
 
@@ -101,6 +104,7 @@ public User()
             Password = "";
             Username = "";
             OtelConsent = false;
+            AnsweredConsent = false;
             UILang = "";
             GlossSuggestion = AutocompleteSetting.On;
             Token = "";
@@ -124,6 +128,7 @@ public User Clone()
                 Password = Password,
                 Username = Username,
                 OtelConsent = OtelConsent,
+                AnsweredConsent = AnsweredConsent,
                 UILang = UILang,
                 GlossSuggestion = GlossSuggestion,
                 Token = Token,
@@ -147,6 +152,7 @@ public bool ContentEquals(User other)
                 other.Password.Equals(Password, StringComparison.Ordinal) &&
                 other.Username.Equals(Username, StringComparison.Ordinal) &&
                 other.OtelConsent == OtelConsent &&
+                other.AnsweredConsent == AnsweredConsent &&
                 other.UILang.Equals(UILang, StringComparison.Ordinal) &&
                 other.GlossSuggestion.Equals(GlossSuggestion) &&
                 other.Token.Equals(Token, StringComparison.Ordinal) &&
@@ -185,6 +191,7 @@ public override int GetHashCode()
             hash.Add(Password);
             hash.Add(Username);
             hash.Add(OtelConsent);
+            hash.Add(AnsweredConsent);
             hash.Add(UILang);
             hash.Add(GlossSuggestion);
             hash.Add(Token);

Backend/Repositories/UserRepository.cs

@@ -197,6 +197,7 @@ public async Task<ResultOfUpdate> Update(string userId, User user, bool updateIs
                 .Set(x => x.Agreement, user.Agreement)
                 .Set(x => x.Username, user.Username)
                 .Set(x => x.OtelConsent, user.OtelConsent)
+                .Set(x => x.AnsweredConsent, user.AnsweredConsent)
                 .Set(x => x.UILang, user.UILang)
                 .Set(x => x.GlossSuggestion, user.GlossSuggestion);
 

src/api/models/user.ts

@@ -98,6 +98,12 @@ export interface User {
    * @memberof User
    */
   otelConsent?: boolean;
+  /**
+   *
+   * @type {boolean}
+   * @memberof User
+   */
+  answeredConsent?: boolean;
   /**
    *
    * @type {string}

src/components/AnalyticsConsent/AnalyticsConsent.tsx

@@ -0,0 +1,20 @@
+import { ReactElement } from "react";
+
+interface ConsentProps {
+  onOtelChange: (consent: boolean) => void;
+}
+
+export function AnalyticsConsent(props: ConsentProps): ReactElement {
+  const acceptAnalytics = (): void => {
+    props.onOtelChange(true);
+  };
+  const denyAnalytics = (): void => {
+    props.onOtelChange(false);
+  };
+  return (
+    <div>
+      <button onClick={acceptAnalytics}>Accept</button>
+      <button onClick={denyAnalytics}>Deny</button>
+    </div>
+  );
+}

src/components/App/AppLoggedIn.tsx

@@ -17,6 +17,9 @@ import { Path } from "types/path";
 import FontContext, { ProjectFonts } from "utilities/fontContext";
 import { getProjCss } from "utilities/fontCssUtilities";
 import { routerPath } from "utilities/pathUtilities";
+import { AnalyticsConsent } from "components/AnalyticsConsent/AnalyticsConsent";
+import { updateUser } from "backend";
+import { getCurrentUser } from "backend/localStorage";
 
 const BaseGoalScreen = loadable(
   () => import("goals/DefaultGoal/BaseGoalScreen")
@@ -30,6 +33,8 @@ const UserSettings = loadable(
   () => import("components/UserSettings/UserSettings")
 );
 
+// export function UserConsent(): ReactElement;
+
 export default function AppWithBar(): ReactElement {
   const proj = useAppSelector(
     (state: StoreState) => state.currentProjectState.project,
@@ -48,6 +53,29 @@ export default function AppWithBar(): ReactElement {
 
   const [styleOverrides, setStyleOverrides] = useState<string>();
 
+  const [answeredConsent, setAnsweredConsent] = useState(
+    getCurrentUser()?.answeredConsent
+  );
+
+  async function handleConsent(otelConsent: boolean): Promise<void> {
+    await updateUser({
+      ...getCurrentUser()!,
+      otelConsent,
+      answeredConsent: true,
+    });
+    setAnsweredConsent(true);
+  }
+
+  // useEffect(() => {
+  //   setAnsweredConsent(true);
+  // }, [answeredConsent]);
+
+  // const handleConsent = (otelConsent: boolean): void => {
+  //   const user = getCurrentUser();
+  //   console.log(user);
+  //   console.log(otelConsent);
+  // };
+
   useEffect(() => {
     updateLangFromUser();
   }, []);
@@ -80,9 +108,18 @@ export default function AppWithBar(): ReactElement {
     <DatePickersLocalizationProvider>
       <SignalRHub />
       <AppBar />
+      <div>HI THERE</div>
       <FontContext.Provider value={projFonts}>
+        {/* <div>HI</div> */}
         <ThemeProvider theme={overrideThemeFont}>
+          {/* <div>HI</div> */}
           <CssBaseline />
+          <div>HEY</div>
+          {answeredConsent ? null : (
+            <div>
+              <AnalyticsConsent onOtelChange={handleConsent}></AnalyticsConsent>
+            </div>
+          )}
           <Routes>
             <Route path={routerPath(Path.DataEntry)} element={<DataEntry />} />
             <Route path={routerPath(Path.Goals)} element={<GoalTimeline />} />

src/components/App/index.tsx

@@ -3,7 +3,7 @@ import { RouterProvider } from "react-router-dom";
 
 import AnnouncementBanner from "components/AnnouncementBanner";
 import UpperRightToastContainer from "components/Toast/UpperRightToastContainer";
-import CookieConsent from "cookies/CookieConsent";
+// import CookieConsent from "cookies/CookieConsent";
 import router from "router/browserRouter";
 
 /**
@@ -13,7 +13,7 @@ export default function App(): ReactElement {
   return (
     <div className="App">
       <Suspense fallback={<div />}>
-        <CookieConsent />
+        {/* <CookieConsent /> */}
         <AnnouncementBanner />
         <UpperRightToastContainer />
         <RouterProvider router={router} />

src/components/UserSettings/UserSettings.tsx

@@ -11,18 +11,18 @@ import {
   Typography,
 } from "@mui/material";
 import { enqueueSnackbar } from "notistack";
-import { FormEvent, Fragment, ReactElement, useEffect, useState } from "react";
+import { FormEvent, Fragment, ReactElement, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { show } from "vanilla-cookieconsent";
 
 import { AutocompleteSetting, User } from "api/models";
 import { isEmailTaken, updateUser } from "backend";
 import { getAvatar, getCurrentUser } from "backend/localStorage";
+import { AnalyticsConsent } from "components/AnalyticsConsent/AnalyticsConsent";
 import { asyncLoadSemanticDomains } from "components/Project/ProjectActions";
 import ClickableAvatar from "components/UserSettings/ClickableAvatar";
 import { updateLangFromUser } from "i18n";
-import { useAppDispatch, useAppSelector } from "rootRedux/hooks";
-import { StoreState } from "rootRedux/types";
+import { useAppDispatch } from "rootRedux/hooks";
+// import { StoreState } from "rootRedux/types";
 import theme from "types/theme";
 import { uiWritingSystems } from "types/writingSystem";
 
@@ -58,14 +58,14 @@ export function UserSettings(props: {
 }): ReactElement {
   const dispatch = useAppDispatch();
 
-  const analyticsConsent = useAppSelector(
-    (state: StoreState) => state.analyticsState.consent
-  );
+  // const analyticsConsent = useAppSelector(
+  //   (state: StoreState) => state.analyticsState.consent
+  // );
 
   const [name, setName] = useState(props.user.name);
   const [phone, setPhone] = useState(props.user.phone);
   const [email, setEmail] = useState(props.user.email);
-  const [otelConsent, setOtelConsent] = useState(analyticsConsent);
+  const [otelConsent, setOtelConsent] = useState(props.user.otelConsent);
   const [uiLang, setUiLang] = useState(props.user.uiLang ?? "");
   const [glossSuggestion, setGlossSuggestion] = useState(
     props.user.glossSuggestion
@@ -81,9 +81,13 @@ export function UserSettings(props: {
     return unchanged || !(await isEmailTaken(unicodeEmail));
   }
 
-  useEffect(() => {
-    setOtelConsent(analyticsConsent);
-  }, [analyticsConsent]);
+  const [showOptions, setShowOptions] = useState(false);
+  const show = (): void => setShowOptions(true);
+
+  const handleConsentChange = (consentVal: boolean): void => {
+    setOtelConsent(consentVal);
+    setShowOptions(false);
+  };
 
   const disabled =
     name === props.user.name &&
@@ -293,19 +297,26 @@ export function UserSettings(props: {
                 <Grid item>
                   <Typography>
                     {t(
-                      analyticsConsent
+                      otelConsent
                         ? "userSettings.analyticsConsent.consentYes"
                         : "userSettings.analyticsConsent.consentNo"
                     )}
                   </Typography>
                   <Button
                     data-testid={UserSettingsIds.ButtonChangeConsent}
                     id={UserSettingsIds.ButtonChangeConsent}
-                    onClick={() => show(true)}
+                    onClick={show}
                     variant="outlined"
                   >
                     {t("userSettings.analyticsConsent.button")}
                   </Button>
+                  {showOptions ? (
+                    <div>
+                      <AnalyticsConsent
+                        onOtelChange={handleConsentChange}
+                      ></AnalyticsConsent>
+                    </div>
+                  ) : null}
                 </Grid>
               </Grid>
 

src/types/user.ts

@@ -15,6 +15,7 @@ export function newUser(name = "", username = "", password = ""): User {
     glossSuggestion: AutocompleteSetting.On,
     token: "",
     isAdmin: false,
+    answeredConsent: false,
   };
 }