2262 feature flag survey and mobile survey (#2269)

* fix feature refetch after add and delete

* Fix user is null when use featureflag

* Update userFeedbacksurvey mobile size

* Undo usefeatureflag hook refech name

* Update App.jsx

Fixed spelling of userFeedbackSurvey

* Fix refresh when add & delete

---------

Co-authored-by: John Darragh <[email protected]>

Author: junjun107

client/src/App.jsx

@@ -12,8 +12,11 @@ import { AppStateProvider } from "./appReducer";
 import SEO from "./components/SEO";
 import AppRoutes from "./Routes";
 import { MapProvider } from "react-map-gl";
+import useFeatureFlag from "./hooks/useFeatureFlag";
 
 function App() {
+  const hasUserFeedbackSuveyFeatureFlag = useFeatureFlag("userFeedbackSurvey");
+
   useEffect(() => {
     analytics.postEvent("visitAppComponent");
   }, []);
@@ -41,7 +44,7 @@ function App() {
                 <MapProvider>
                   <Router>
                     <AppRoutes />
-                    <SurveySnackbar />
+                    {hasUserFeedbackSuveyFeatureFlag && <SurveySnackbar />}
                   </Router>
                 </MapProvider>
               </ThemeProvider>

client/src/components/Admin/Features.jsx

@@ -51,7 +51,11 @@ const Features = () => {
     refetch: featureToLoginRefetch,
   } = useFeatureToLogin();
 
-  const { data: featuresData, loading: featuresLoading } = useFeatures();
+  const {
+    data: featuresData,
+    loading: featuresLoading,
+    refetch: featureRefetch,
+  } = useFeatures();
 
   useEffect(() => {
     if (featuresData && featureToLoginData) {
@@ -120,7 +124,7 @@ const Features = () => {
     }),
     onSubmit: async (values, { resetForm, setSubmitting }) => {
       await featureService.post(values);
-      featureToLoginRefetch();
+      await featureRefetch();
       resetForm();
       setSubmitting(false);
       handleModalClose();
@@ -288,7 +292,7 @@ const Features = () => {
                       onClick={async () => {
                         try {
                           await featureService.remove(row.featureId);
-                          featureToLoginRefetch();
+                          featureRefetch();
                         } catch (error) {
                           console.error(
                             "Failed to remove user from feature:",

client/src/components/UI/SurveySnackbar.jsx

@@ -33,8 +33,9 @@ const SurveySnackbar = () => {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between",
-        width: "520px",
+        width: { xs: "100%" },
         cursor: "pointer",
+        gap: { xs: 1 },
       }}
     >
       <span> Participate in a quick survey</span>

client/src/hooks/useFeatureFlag.js

@@ -1,16 +1,18 @@
-import { useUserContext } from "../contexts/userContext";
 import { useFeatures } from "../hooks/useFeatures";
 
 export default function useFeatureFlag(flagName) {
-  const { user } = useUserContext();
   const { data: featureFlags } = useFeatures();
 
   const featureFlag = featureFlags.find((feature) => feature.name === flagName);
 
   const isFeatureEnabled = featureFlag && featureFlag.is_enabled;
 
+  const sessionUser = JSON.parse(sessionStorage.getItem("user") || "{}");
+
   const userHasFeature =
-    user && user.features && user.features.includes(flagName);
+    sessionUser &&
+    sessionUser.features &&
+    sessionUser.features.includes(flagName);
 
   return isFeatureEnabled || userHasFeature;
 }

client/src/hooks/useFeatures.js

@@ -25,5 +25,6 @@ export const useFeatures = () => {
   useEffect(() => {
     fetch();
   }, [fetch]);
+
   return { data, error, loading, refetch: fetch };
 };