feat(openalex): Display guided tour only for the first visit

dataesr · Dec 12, 2024 · a0b00b2 · a0b00b2
1 parent 78ae49e
commit a0b00b2
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/client/src/pages/openalex-affiliations/results/index.jsx b/client/src/pages/openalex-affiliations/results/index.jsx
@@ -97,6 +97,12 @@ export default function Affiliations() {
     enabled: false,
   });
 
+  useEffect(() => {
+    console.log('useEffect');
+    // Enable guided tour only for the first visit
+    if (localStorage.getItem('works-magnet-tour-results') !== 'done') setStepsEnabled(true);
+  }, [setStepsEnabled]);
+
   useEffect(() => {
     const get = async () => {
       const addedRors = await Promise.all(
@@ -197,7 +203,6 @@ export default function Affiliations() {
     );
     setFilteredAffiliations(filteredAffiliationsTmp);
     setIsLoading(false);
-    setStepsEnabled(true);
   }, [affiliations, filteredAffiliationName]);
 
   useEffect(() => {
@@ -217,8 +222,6 @@ export default function Affiliations() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ror]);
 
-  const onExit = () => setStepsEnabled(false);
-
   const toggleRemovedRor = (affiliationId, rorId) => {
     const updatedAffiliations = affiliations.map((affiliation) => {
       if (affiliation.id === affiliationId) {
@@ -397,7 +400,11 @@ export default function Affiliations() {
             <Steps
               enabled={stepsEnabled}
               initialStep={0}
-              onExit={() => onExit()}
+              onComplete={() => localStorage.setItem('works-magnet-tour-results', 'done')}
+              onExit={() => {
+                setStepsEnabled(false);
+                localStorage.setItem('works-magnet-tour-results', 'done');
+              }}
               steps={steps}
             />
             <Row>

diff --git a/client/src/pages/openalex-affiliations/search.jsx b/client/src/pages/openalex-affiliations/search.jsx
@@ -27,7 +27,7 @@ const years = [...Array(new Date().getFullYear() - START_YEAR + 1).keys()]
   .map((year) => (year + START_YEAR).toString())
   .map((year) => ({ label: year, value: year }));
 
-export default function OpenalexAffiliationsSearch() {
+export default function Search() {
   const { search } = useLocation();
   const navigate = useNavigate();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -41,7 +41,7 @@ export default function OpenalexAffiliationsSearch() {
   const [messageType, setMessageType] = useState('');
   const [onInputAffiliationsHandler, setOnInputAffiliationsHandler] = useState(false);
   const [searchedAffiliations, setSearchedAffiliations] = useState([]);
-  const [stepsEnabled, setStepsEnabled] = useState(true);
+  const [stepsEnabled, setStepsEnabled] = useState(false);
   const [tags, setTags] = useState([]);
 
   const steps = [
@@ -189,6 +189,12 @@ export default function OpenalexAffiliationsSearch() {
     getData();
   }, [currentSearchParams.getRorChildren, deletedAffiliations, searchedAffiliations]);
 
+  useEffect(() => {
+    console.log('useEffect');
+    // Enable guided tour only for the first visit
+    if (localStorage.getItem('works-magnet-tour-search') !== 'done') setStepsEnabled(true);
+  }, [setStepsEnabled]);
+
   const checkAndSendQuery = () => {
     if (onInputAffiliationsHandler) {
       setMessageType('error');
@@ -209,8 +215,6 @@ export default function OpenalexAffiliationsSearch() {
     navigate(`/openalex-affiliations/results?${_searchParams.toString()}`);
   };
 
-  const onExit = () => setStepsEnabled(false);
-
   const onTagsChange = async (_affiliations, _deletedAffiliations) => {
     const affiliations = _affiliations
       .filter((affiliation) => affiliation.source === 'user')
@@ -255,7 +259,11 @@ export default function OpenalexAffiliationsSearch() {
       <Steps
         enabled={stepsEnabled}
         initialStep={0}
-        onExit={() => onExit()}
+        onComplete={() => localStorage.setItem('works-magnet-tour-search', 'done')}
+        onExit={() => {
+          setStepsEnabled(false);
+          localStorage.setItem('works-magnet-tour-search', 'done');
+        }}
         steps={steps}
       />
       <Modal isOpen={isOpen} hide={() => setIsOpen(false)} size="xl">