fix: selected user ids interfaces on experience (#1780)

* fix: updated selected user id interfaces on timeline

* fear: added new option friend only visibility on create experience

Author: abdulhakim2902

pages/experience/[experienceId]/clone.tsx

@@ -111,10 +111,10 @@ export const getServerSideProps = wrapper.getServerSideProps(
 
       if (experience?.visibility === 'selected_user') {
         const user = (await dispatch(fetchUser())) as unknown as User;
-        if (
-          !experience?.selectedUserIds?.includes(user?.id) &&
-          experience?.createdBy !== user?.id
-        )
+        const found = experience?.selectedUserIds?.find(
+          e => e.userId === user?.id,
+        );
+        if (!found && experience?.createdBy !== user?.id)
           return {
             notFound: true,
           };

pages/experience/[experienceId]/index.tsx

@@ -147,11 +147,10 @@ export const getServerSideProps = wrapper.getServerSideProps(
         if (anonymous) hidden = true;
 
         const user = (await dispatch(fetchUser())) as unknown as User;
-        if (
-          !experience?.selectedUserIds?.includes(user?.id) &&
-          experience?.createdBy !== user?.id
-        )
-          hidden = true;
+        const found = experience?.selectedUserIds?.find(
+          e => e.userId === user?.id,
+        );
+        if (!found && experience?.createdBy !== user?.id) hidden = true;
       }
 
       if (experience?.visibility === 'private') {

src/components/ExperienceEditor/ExperienceEditor.tsx

@@ -33,6 +33,7 @@ import {
   ExperienceProps,
   VisibilityItem,
   Tag,
+  SelectedUserIds,
 } from '../../interfaces/experience';
 import { People } from '../../interfaces/people';
 import { PostDetailExperience } from '../PostDetailExperience/PostDetailExperience';
@@ -408,6 +409,10 @@ export const ExperienceEditor: React.FC<ExperienceEditorProps> = props => {
       id: 'selected_user',
       name: i18n.t('Experience.Editor.Visibility.Custom'),
     },
+    {
+      id: 'friend',
+      name: i18n.t('Experience.Editor.Visibility.Friend_Only'),
+    },
   ];
 
   const handleVisibilityChange = (
@@ -474,7 +479,15 @@ export const ExperienceEditor: React.FC<ExperienceEditorProps> = props => {
   const mappingUserIds = () => {
     console.log({ selectedVisibility });
     if (selectedVisibility?.id === 'selected_user') {
-      const mapIds = Object.values(selectedUserIds.map(option => option.id));
+      const timestamp = Date.now();
+      const mapIds = Object.values(
+        selectedUserIds.map(option => {
+          return {
+            userId: option.id,
+            addedAt: timestamp,
+          };
+        }),
+      );
       setNewExperience(prevExperience => ({
         ...prevExperience,
         selectedUserIds: mapIds,
@@ -493,8 +506,9 @@ export const ExperienceEditor: React.FC<ExperienceEditorProps> = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedUserIds, experience]);
 
-  const getSelectedIds = async (userIds: string[]) => {
+  const getSelectedIds = async (selected: SelectedUserIds[]) => {
     setIsLoadingSelectedUser(true);
+    const userIds = selected.map(e => e.userId);
     const response = await UserAPI.getUserByIds(userIds, pageUserIds);
     setSelectedUserIds([
       ...selectedUserIds,
@@ -508,6 +522,7 @@ export const ExperienceEditor: React.FC<ExperienceEditorProps> = props => {
   React.useEffect(() => {
     getSelectedIds(experience?.selectedUserIds);
   }, [experience, pageUserIds]);
+
   useEffect(() => {
     if (experience) {
       const visibility = visibilityList.find(

src/components/ExperiencePreview/ExperiencePreview.tsx

@@ -23,7 +23,11 @@ import ShowIf from 'components/common/show-if.component';
 import { ListItemPeopleComponent } from 'src/components/atoms/ListItem/ListItemPeople';
 import { acronym } from 'src/helpers/string';
 import { useExperienceHook } from 'src/hooks/use-experience-hook';
-import { Experience, WrappedExperience } from 'src/interfaces/experience';
+import {
+  Experience,
+  SelectedUserIds,
+  WrappedExperience,
+} from 'src/interfaces/experience';
 import { People } from 'src/interfaces/people';
 import { SocialsEnum } from 'src/interfaces/social';
 import { User } from 'src/interfaces/user';
@@ -205,8 +209,9 @@ export const ExperiencePreview: React.FC<Props> = props => {
       return i18n.t('Experience.Editor.Visibility.Custom');
   };
 
-  const getSelectedIds = async (userIds: string[]) => {
+  const getSelectedIds = async (selected: SelectedUserIds[]) => {
     setIsLoadingSelectedUser(true);
+    const userIds = selected.map(e => e.userId);
     const response = await UserAPI.getUserByIds(userIds, pageUserIds);
     setSelectedUserIds([
       ...selectedUserIds,

src/interfaces/experience.ts

@@ -15,6 +15,11 @@ export type TagProps = {
   hide?: boolean;
 };
 
+export interface SelectedUserIds {
+  userId: string;
+  addedAt: number;
+}
+
 export interface Tag extends TagProps, Omit<BaseModel, 'id'> {}
 
 export interface Topic extends Searchable {
@@ -37,7 +42,7 @@ export interface ExperienceProps extends Searchable {
   prohibitedTags?: string[];
   people: People[];
   visibility: string;
-  selectedUserIds: string[];
+  selectedUserIds: SelectedUserIds[];
 }
 
 export interface Experience extends ExperienceProps, BaseModel {

src/locale/en.json

@@ -121,7 +121,8 @@
       "Visibility": {
         "Public": "Public",
         "OnlyMe": "Only Me",
-        "Custom": "Custom"
+        "Custom": "Custom",
+        "Friend_Only": "Friend Only"
       }
     },
     "Modal_Add_Post": {

src/locale/id.json

@@ -121,7 +121,8 @@
       "Visibility": {
         "Public": "Publik",
         "OnlyMe": "Hanya Saya",
-        "Custom": "Kustom"
+        "Custom": "Kustom",
+        "Friend_Only": "Hanya teman"
       }
     },
     "Modal_Add_Post": {

src/locale/ru.json

@@ -121,7 +121,8 @@
       "Visibility": {
         "Public": "Общественный",
         "OnlyMe": "Только я",
-        "Custom": "Обычай"
+        "Custom": "Обычай",
+        "Friend_Only": "Только друзья"
       }
     },
     "Modal_Add_Post": {