From 0d953a9088fceac9f532046328c3596ffe45e735 Mon Sep 17 00:00:00 2001
From: Neka Artajaya <53235670+nekaartajaya@users.noreply.github.com>
Date: Thu, 13 Apr 2023 05:38:13 +0800
Subject: [PATCH] fix: anonymous (#1800)

* fix: handle anonymous home

* feat: redirect timeline on search to home
---
 .../ExpericenceRightBar/Experience.tsx        |  3 +-
 .../ExperienceList.container.tsx              |  4 +--
 .../ExperienceList/ExperienceListDiscover.tsx |  2 +-
 .../ExperienceList/ExperienceListRightBar.tsx |  2 +-
 .../ExperiencePreview/ExperiencePreview.tsx   |  2 +-
 src/components/Menu/Menu.tsx                  | 31 ++++++++++---------
 src/components/Menu/use-menu-list.tsx         |  3 ++
 .../render/ExperienceInfo/ExperienceInfo.tsx  |  5 +--
 .../PostList/PostList.container.tsx           |  4 ++-
 .../hooks/use-timeline-filter.hook.ts         |  6 ++--
 src/components/RightMenuBar/RightMenuBar.tsx  | 19 +++++++++---
 .../Timeline/Render/ExperienceCard.tsx        |  3 +-
 src/components/Timeline/Timeline.layout.tsx   |  4 +--
 .../TimelineFilter/TimelineFilter.tsx         |  7 +++--
 .../WalletBalance/WalletBalanceContainer.tsx  | 17 +++++++++-
 src/components/atoms/Tabs/Tabs.styles.ts      |  3 ++
 .../template/Default/DefaultLayout.tsx        |  2 +-
 src/locale/en.json                            |  2 +-
 src/locale/id.json                            |  2 +-
 src/locale/ru.json                            |  2 +-
 20 files changed, 79 insertions(+), 44 deletions(-)

diff --git a/src/components/ExpericenceRightBar/Experience.tsx b/src/components/ExpericenceRightBar/Experience.tsx
index 264c9e9df..3c7d78c1f 100644
--- a/src/components/ExpericenceRightBar/Experience.tsx
+++ b/src/components/ExpericenceRightBar/Experience.tsx
@@ -79,8 +79,7 @@ export const Experience: React.FC<ExperienceProps> = props => {
   const isOwnExperience = userExperience.experience.user.id === user?.id;
   const experienceId = userExperience.experience.id;
   const userExperienceId = userExperience.id;
-  const link =
-    publicRuntimeConfig.appAuthURL + `?type=experience&id=${experienceId}`;
+  const link = publicRuntimeConfig.appAuthURL + `?type=all&id=${experienceId}`;
   const { userExperiencesMeta } = useExperienceHook();
   const totalOwnedExperience =
     userExperiencesMeta.additionalData?.totalOwnedExperience ?? 0;
diff --git a/src/components/ExperienceList/ExperienceList.container.tsx b/src/components/ExperienceList/ExperienceList.container.tsx
index de2e92a0e..639c59dfe 100644
--- a/src/components/ExperienceList/ExperienceList.container.tsx
+++ b/src/components/ExperienceList/ExperienceList.container.tsx
@@ -92,8 +92,8 @@ export const ExperienceListContainer: React.FC<ExperienceListContainerProps> =
     ) => {
       router.push(
         userExperience
-          ? `/?type=experience&id=${userExperience.experience.id}`
-          : `/?type=experience`,
+          ? `/?type=all&id=${userExperience.experience.id}`
+          : `/?type=all`,
         undefined,
         {
           shallow: true,
diff --git a/src/components/ExperienceList/ExperienceListDiscover.tsx b/src/components/ExperienceList/ExperienceListDiscover.tsx
index f95cdbe9d..d97732100 100644
--- a/src/components/ExperienceList/ExperienceListDiscover.tsx
+++ b/src/components/ExperienceList/ExperienceListDiscover.tsx
@@ -56,7 +56,7 @@ export const ExperienceListDiscover: React.FC<ExperienceListDiscoverProps> =
 
     const handleSelectExperience =
       (userExperience: WrappedExperience) => () => {
-        router.push(`/experience/${userExperience.experience.id}`);
+        router.push(`/?type=all&id=${userExperience.experience.id}`);
       };
 
     return (
diff --git a/src/components/ExperienceList/ExperienceListRightBar.tsx b/src/components/ExperienceList/ExperienceListRightBar.tsx
index 0500219c1..d8931173a 100644
--- a/src/components/ExperienceList/ExperienceListRightBar.tsx
+++ b/src/components/ExperienceList/ExperienceListRightBar.tsx
@@ -44,7 +44,7 @@ export const ExperienceListRightBar: React.FC<ExperienceListProps> = props => {
   const [selectedExperienceId, setSelectedExperienceId] = useState<string>();
 
   useEffect(() => {
-    const experienceId = getIdByType('experience');
+    const experienceId = getIdByType('all');
     const exists = experiences.find(
       item => item.experience.id === experienceId,
     );
diff --git a/src/components/ExperiencePreview/ExperiencePreview.tsx b/src/components/ExperiencePreview/ExperiencePreview.tsx
index 9d086bfdd..6fb7c4543 100644
--- a/src/components/ExperiencePreview/ExperiencePreview.tsx
+++ b/src/components/ExperiencePreview/ExperiencePreview.tsx
@@ -211,7 +211,7 @@ export const ExperiencePreview: React.FC<Props> = props => {
 
   const getSelectedIds = async (selected: SelectedUserIds[]) => {
     setIsLoadingSelectedUser(true);
-    const userIds = selected.map(e => e.userId);
+    const userIds = selected?.map(e => e.userId);
     const response = await UserAPI.getUserByIds(userIds, pageUserIds);
     setSelectedUserIds([
       ...selectedUserIds,
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index b2bf90efb..a80e7a216 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -138,7 +138,7 @@ export const Menu: React.FC<MenuProps> = props => {
   const { query, replace } = useQueryParams();
 
   const menu = useMenuList(
-    query.type && query.type === 'all' ? 'all' : 'timeline',
+    anonymous ? 'all' : query.type && query.type === 'all' ? 'all' : 'timeline',
   );
 
   const gotoHome = () => {
@@ -219,19 +219,22 @@ export const Menu: React.FC<MenuProps> = props => {
 
         {menu
           .filter(ar => ar.isDesktop === true)
-          .map(item => (
-            <ListItemComponent
-              data-testid={`list-item-${item.id}`}
-              id={item.id}
-              key={item.id}
-              title={item.title}
-              icon={item.icon}
-              active={router.pathname === '/' ? item.active : false}
-              onClick={async () => openMenu(item)}
-              url={item.url}
-              isAnimated={item.isAnimated}
-            />
-          ))}
+          .map(item => {
+            if (anonymous && !item.allowAnonymous) return;
+            return (
+              <ListItemComponent
+                data-testid={`list-item-${item.id}`}
+                id={item.id}
+                key={item.id}
+                title={item.title}
+                icon={item.icon}
+                active={router.pathname === '/' ? item.active : false}
+                onClick={async () => openMenu(item)}
+                url={item.url}
+                isAnimated={item.isAnimated}
+              />
+            );
+          })}
 
         <div style={{ padding: '0 30px', marginTop: '20px' }}>
           <Button
diff --git a/src/components/Menu/use-menu-list.tsx b/src/components/Menu/use-menu-list.tsx
index ba2d9aa02..50912461b 100644
--- a/src/components/Menu/use-menu-list.tsx
+++ b/src/components/Menu/use-menu-list.tsx
@@ -141,6 +141,7 @@ export type MenuDetail = {
   url: string;
   isDesktop: boolean;
   isAnimated: boolean;
+  allowAnonymous: boolean;
 };
 
 export const useMenuList = (selected: MenuId): MenuDetail[] => {
@@ -154,6 +155,7 @@ export const useMenuList = (selected: MenuId): MenuDetail[] => {
         url: '/',
         isDesktop: true,
         isAnimated: false,
+        allowAnonymous: false,
       },
       {
         id: 'all',
@@ -163,6 +165,7 @@ export const useMenuList = (selected: MenuId): MenuDetail[] => {
         url: '/all',
         isDesktop: true,
         isAnimated: false,
+        allowAnonymous: true,
       },
     ],
     [selected],
diff --git a/src/components/PostDetail/render/ExperienceInfo/ExperienceInfo.tsx b/src/components/PostDetail/render/ExperienceInfo/ExperienceInfo.tsx
index cb9059f98..edb2f5a1b 100644
--- a/src/components/PostDetail/render/ExperienceInfo/ExperienceInfo.tsx
+++ b/src/components/PostDetail/render/ExperienceInfo/ExperienceInfo.tsx
@@ -43,10 +43,7 @@ export const ExperienceInfo: React.FC<ExperienceInfo> = props => {
       &nbsp;• {i18n.t('Post_Detail.Experience.Added')}&nbsp;
       {!!experiences && !!experiences.length && (
         <>
-          <Link
-            href={`/?type=experience&id=${experiences[0].id}`}
-            shallow
-            passHref>
+          <Link href={`/?type=all&id=${experiences[0].id}`} shallow passHref>
             <span className={style.link}>{experiences[0].name}</span>
           </Link>
           <ShowIf condition={totalExperience > 1}>
diff --git a/src/components/PostList/PostList.container.tsx b/src/components/PostList/PostList.container.tsx
index d7895b4db..c1f5fb4e1 100644
--- a/src/components/PostList/PostList.container.tsx
+++ b/src/components/PostList/PostList.container.tsx
@@ -59,6 +59,7 @@ export const PostsListContainer: React.FC<PostsListContainerProps> = props => {
 
   useEffect(() => {
     clear();
+    if (!user) filterTimeline({ ...query, timelineType: TimelineType.ALL });
     filterTimeline(query);
 
     loadAllBlockedUser();
@@ -81,7 +82,8 @@ export const PostsListContainer: React.FC<PostsListContainerProps> = props => {
     return (
       <EmptyResult
         emptyContent={
-          query.type && query.type === TimelineType.EXPERIENCE
+          (query.type && query.type === TimelineType.EXPERIENCE) ||
+          (!query.type && user)
             ? EmptyContentEnum.DISCOVER
             : EmptyContentEnum.POST
         }
diff --git a/src/components/PostList/hooks/use-timeline-filter.hook.ts b/src/components/PostList/hooks/use-timeline-filter.hook.ts
index 577451675..c8270324b 100644
--- a/src/components/PostList/hooks/use-timeline-filter.hook.ts
+++ b/src/components/PostList/hooks/use-timeline-filter.hook.ts
@@ -61,7 +61,7 @@ export const useTimelineFilter = (filters?: TimelineFilterFields) => {
 
   const filterTimeline = useCallback(
     async (query?: ParsedUrlQuery) => {
-      let timelineType = TimelineType.EXPERIENCE;
+      let timelineType = query.timelineType ?? TimelineType.EXPERIENCE;
       let timelineOrder = TimelineOrderType.LATEST;
       let tags: string[] = [];
       let search: string;
@@ -111,7 +111,7 @@ export const useTimelineFilter = (filters?: TimelineFilterFields) => {
         // TODO: anonymous user should only see trending posts
       }
 
-      if (query?.type === TimelineType.EXPERIENCE && query?.id) {
+      if (query?.type === TimelineType.ALL && query?.id) {
         const expFilterFields: TimelineFilterFields = {
           ...filterFields,
           experienceId: query.id as string,
@@ -125,7 +125,7 @@ export const useTimelineFilter = (filters?: TimelineFilterFields) => {
               order: timelineOrder,
               query: search,
             },
-            timelineType,
+            TimelineType.EXPERIENCE,
           ),
         );
       } else {
diff --git a/src/components/RightMenuBar/RightMenuBar.tsx b/src/components/RightMenuBar/RightMenuBar.tsx
index 750966155..331edafa9 100644
--- a/src/components/RightMenuBar/RightMenuBar.tsx
+++ b/src/components/RightMenuBar/RightMenuBar.tsx
@@ -52,11 +52,18 @@ const CustomFolderIcon = () => (
   </svg>
 );
 
-export const RightMenuBar: React.FC = () => {
+interface RightMenuBarProps {
+  anonymous?: boolean;
+}
+
+export const RightMenuBar: React.FC<RightMenuBarProps> = props => {
   const { t } = useTranslation();
+  const { anonymous } = props;
   const classes = useStyles();
 
-  const [activeTab, setActiveTab] = useState('experienceTabMenu');
+  const [activeTab, setActiveTab] = useState(
+    anonymous ? 'trendingExperienceTabPanel' : 'experienceTabMenu',
+  );
 
   const handleChangeTab = (tab: string) => {
     setActiveTab(tab);
@@ -76,6 +83,7 @@ export const RightMenuBar: React.FC = () => {
         </div>
       ),
       component: <ExperienceTab />,
+      allowAnonymous: false,
     },
     {
       id: 'trendingExperienceTabPanel',
@@ -90,6 +98,7 @@ export const RightMenuBar: React.FC = () => {
         </div>
       ),
       component: <TrendingExperienceTab />,
+      allowAnonymous: true,
     },
   ];
 
@@ -97,12 +106,14 @@ export const RightMenuBar: React.FC = () => {
     <div className={classes.root}>
       <TabsComponent
         selected={activeTab}
-        tabs={iconTabs}
+        tabs={
+          anonymous ? iconTabs.filter(item => item.allowAnonymous) : iconTabs
+        }
         position="space-between"
         mark="cover"
         size="medium"
         onChangeTab={handleChangeTab}
-        width={'48%'}
+        width={anonymous ? '100%' : '48%'}
       />
     </div>
   );
diff --git a/src/components/Timeline/Render/ExperienceCard.tsx b/src/components/Timeline/Render/ExperienceCard.tsx
index b3f281cee..799b9aabe 100644
--- a/src/components/Timeline/Render/ExperienceCard.tsx
+++ b/src/components/Timeline/Render/ExperienceCard.tsx
@@ -65,8 +65,7 @@ export const ExperienceCard: React.FC<ExperienceCardProps> = props => {
     useState<null | HTMLElement>(null);
   const { userExperiencesMeta, removeExperience, loadExperience } =
     useExperienceHook();
-  const link =
-    publicRuntimeConfig.appAuthURL + `?type=experience&id=${experience.id}`;
+  const link = publicRuntimeConfig.appAuthURL + `?type=all&id=${experience.id}`;
   const isOwnExperience = experience?.createdBy === user?.id;
   const isHidden = () => {
     if (experience.private && !experience.friend) return true;
diff --git a/src/components/Timeline/Timeline.layout.tsx b/src/components/Timeline/Timeline.layout.tsx
index ce50b65f1..80b6b796d 100644
--- a/src/components/Timeline/Timeline.layout.tsx
+++ b/src/components/Timeline/Timeline.layout.tsx
@@ -39,7 +39,7 @@ export const Timeline: React.FC<TimelineContainerProps> = props => {
   }, []);
 
   useEffect(() => {
-    if (query.type === 'experience') {
+    if (query.type === 'all') {
       query.id && getExperienceDetail(query.id);
     }
   }, [query.id]);
@@ -52,7 +52,7 @@ export const Timeline: React.FC<TimelineContainerProps> = props => {
         </Grid>
 
         <TimelineAutoReloader />
-        {query.type === 'experience' && query.id && experience && (
+        {query.type === 'all' && query.id && experience && (
           <ExperienceCard
             experience={experience}
             userExperiences={userExperiences}
diff --git a/src/components/TimelineFilter/TimelineFilter.tsx b/src/components/TimelineFilter/TimelineFilter.tsx
index 0c91d91e7..607eee199 100644
--- a/src/components/TimelineFilter/TimelineFilter.tsx
+++ b/src/components/TimelineFilter/TimelineFilter.tsx
@@ -35,6 +35,7 @@ export type TimelineFilterProps = {
 
 export const TimelineFilter: React.FC<TimelineFilterProps> = props => {
   const {
+    user,
     order,
     originType,
     filterType,
@@ -58,13 +59,15 @@ export const TimelineFilter: React.FC<TimelineFilterProps> = props => {
         <div className={styles.itemContainer}>
           <div>
             <SvgIcon
-              component={query.type === 'all' ? GlobeAltIcon : CustomFolderIcon}
+              component={
+                query.type === 'all' || !user ? GlobeAltIcon : CustomFolderIcon
+              }
             />
             <div className={styles.border}></div>
           </div>
 
           <Typography className={styles.text}>
-            {query.type === 'all'
+            {query.type === 'all' || !user
               ? i18n.t('Experience.New.AllOfMyriad')
               : i18n.t('Experience.New.TimelineIFollow')}
           </Typography>
diff --git a/src/components/WalletBalance/WalletBalanceContainer.tsx b/src/components/WalletBalance/WalletBalanceContainer.tsx
index ae1072885..61c36c404 100644
--- a/src/components/WalletBalance/WalletBalanceContainer.tsx
+++ b/src/components/WalletBalance/WalletBalanceContainer.tsx
@@ -6,6 +6,7 @@ import { Typography } from '@material-ui/core';
 import { WalletBalances as WalletBalancesComponent } from '.';
 import { BoxComponent } from '../atoms/Box';
 
+import { InfoIconYellow } from 'src/images/Icons';
 import i18n from 'src/locale';
 import { RootState } from 'src/reducers';
 import { BalanceState } from 'src/reducers/balance/reducer';
@@ -22,7 +23,21 @@ export const WalletBalancesContainer: React.FC = () => {
   if (anonymous)
     return (
       <BoxComponent title={i18n.t('Wallet.Header')}>
-        <Typography>{i18n.t('Wallet.Anonymous')}</Typography>
+        <div
+          style={{
+            backgroundColor: '#ffc85726',
+            padding: 10,
+            borderRadius: 8,
+            fontSize: 14,
+            display: 'flex',
+            alignItems: 'start',
+            marginBottom: 16,
+          }}>
+          <div style={{ marginRight: 8, marginTop: 4 }}>
+            <InfoIconYellow />
+          </div>
+          <Typography>{i18n.t('Wallet.Anonymous')}</Typography>
+        </div>
       </BoxComponent>
     );
 
diff --git a/src/components/atoms/Tabs/Tabs.styles.ts b/src/components/atoms/Tabs/Tabs.styles.ts
index f6449fb37..5467d5acd 100644
--- a/src/components/atoms/Tabs/Tabs.styles.ts
+++ b/src/components/atoms/Tabs/Tabs.styles.ts
@@ -16,6 +16,9 @@ export const useStyles = makeStyles<Theme, StylesProps>(theme =>
         justifyContent: props => props.position ?? null,
         gap: props => (props.position === 'left' ? 20 : null),
       },
+      '& .MuiTab-root': {
+        maxWidth: '100%',
+      },
     },
   }),
 );
diff --git a/src/components/template/Default/DefaultLayout.tsx b/src/components/template/Default/DefaultLayout.tsx
index bcc4fc225..7021ae55a 100644
--- a/src/components/template/Default/DefaultLayout.tsx
+++ b/src/components/template/Default/DefaultLayout.tsx
@@ -212,7 +212,7 @@ const Default: React.FC<DefaultLayoutProps> = props => {
                   />
                 </div>
                 <div>
-                  <RightMenuBar />
+                  <RightMenuBar anonymous={anonymous} />
                 </div>
               </div>
             </div>
diff --git a/src/locale/en.json b/src/locale/en.json
index f6fd985dd..8462c2cce 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -1090,7 +1090,7 @@
   "Wallet": {
     "Title": "{{appname}} - Wallet",
     "Header": "Wallet",
-    "Anonymous": "Please Log-in to access this feature",
+    "Anonymous": "You are signed-out. Sign-in with crypto wallet to access this feature.",
     "Tab": {
       "Balance": "Balance",
       "History": "History",
diff --git a/src/locale/id.json b/src/locale/id.json
index 7d9f7b672..5de1dedaf 100644
--- a/src/locale/id.json
+++ b/src/locale/id.json
@@ -1085,7 +1085,7 @@
   "Wallet": {
     "Title": "{{appname}} - Dompet",
     "Header": "Dompet",
-    "Anonymous": "Please Login to access this feature",
+    "Anonymous": "Anda belum masuk. Masuk dengan dompet kripto untuk menggunakan fitur ini",
     "Tab": {
       "Balance": "Saldo",
       "History": "Riwayat",
diff --git a/src/locale/ru.json b/src/locale/ru.json
index 14e551234..f88bc062d 100644
--- a/src/locale/ru.json
+++ b/src/locale/ru.json
@@ -1072,7 +1072,7 @@
   "Wallet": {
     "Title": "{{appname}} - Кошелек",
     "Header": "Кошелек",
-    "Anonymous": "Пожалуйста войдите чтобы воспользоваться",
+    "Anonymous": "You are signed-out. Sign-in with crypto wallet to access this feature.",
     "Tab": {
       "Balance": "Баланс",
       "History": "История",