Merge pull request #257 from map-of-pi/reviews-revamp

Approved (1).

Author: swoocn

context/AppContextProvider.tsx

@@ -23,16 +23,20 @@ interface IAppContextProps {
   currentUser: IUser | null;
   setCurrentUser: React.Dispatch<SetStateAction<IUser | null>>;
   registerUser: () => void;
-  autoLoginUser:()=> void,
-  isSigningInUser: boolean
+  autoLoginUser: ()=> void;
+  isSigningInUser: boolean;
+  reload: boolean;
+  setReload: React.Dispatch<SetStateAction<boolean>>;
 }
 
 const initialState: IAppContextProps = {
   currentUser: null,
   setCurrentUser: () => {},
   registerUser: () => { },
-  autoLoginUser:()=> {},
-  isSigningInUser:false
+  autoLoginUser: ()=> {},
+  isSigningInUser: false,
+  reload: false,
+  setReload: () => {},
 };
 
 export const AppContext = createContext<IAppContextProps>(initialState);
@@ -45,6 +49,7 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
   const t = useTranslations();
   const [currentUser, setCurrentUser] = useState<IUser | null>(null);
   const [isSigningInUser, setIsSigningInUser] = useState(false);
+  const [reload, setReload] = useState(false);
 
   const registerUser = async () => {
     logger.info('Initializing Pi SDK for user registration.');
@@ -111,7 +116,7 @@ const AppContextProvider = ({ children }: AppContextProviderProps) => {
   }, []);
 
   return (
-    <AppContext.Provider value={{ currentUser, setCurrentUser, registerUser, autoLoginUser, isSigningInUser }}>
+    <AppContext.Provider value={{ currentUser, setCurrentUser, registerUser, autoLoginUser, isSigningInUser, reload, setReload }}>
       {children}
     </AppContext.Provider>
   );

messages/en-GB.json

@@ -104,7 +104,7 @@
       "FEEDBACK_PHOTO_UPLOAD_LABEL": "Feedback photo upload",
       "VALIDATION": {
         "LOADING_REVIEW_FAILURE": "Error loading review",
-        "SELF_REVIEW_PROHIBITED": "Self-review is prohibited"
+        "SELF_REVIEW_NOT_POSSIBLE": "Self-review is not possible"
       }
     }
   },

messages/en.json

@@ -105,7 +105,7 @@
       "FEEDBACK_PHOTO_UPLOAD_LABEL": "Feedback photo upload",
       "VALIDATION": {
         "LOADING_REVIEW_FAILURE": "Error loading review",
-        "SELF_REVIEW_PROHIBITED": "Self-review is prohibited"
+        "SELF_REVIEW_NOT_POSSIBLE": "Self-review is not possible"
       }
     }
   },

messages/es.json

@@ -104,7 +104,7 @@
       "FEEDBACK_PHOTO_UPLOAD_LABEL": "Subir foto de retroalimentación",
       "VALIDATION": {
         "LOADING_REVIEW_FAILURE": "Error al cargar la reseña",
-        "SELF_REVIEW_PROHIBITED": "La autoevaluación está prohibida"
+        "SELF_REVIEW_NOT_POSSIBLE": "No es posible autoevaluarse"
       }
     }
   },

messages/ewe-BJ.json

@@ -104,7 +104,7 @@
       "FEEDBACK_PHOTO_UPLOAD_LABEL": "Photo na vovɔ",
       "VALIDATION": {
         "LOADING_REVIEW_FAILURE": "Dzudzɔmenyã meyinaa nuwò dzi o",
-        "SELF_REVIEW_PROHIBITED": "Wòdzɔ wò nɔnɔ kple wòkplɔ míaɖu o"
+        "SELF_REVIEW_NOT_POSSIBLE": "Metsɔ eme eŋu srɔ ŋgɔmetɔ ƒe yiwo"
       }
     }
   },

messages/hau-NG.json

@@ -104,7 +104,7 @@
       "FEEDBACK_PHOTO_UPLOAD_LABEL": "Loda Hoto Martani",
       "VALIDATION": {
         "LOADING_REVIEW_FAILURE": "Kuskure wajen ɗaukar bita",
-        "SELF_REVIEW_PROHIBITED": "Binciken kai an hana"
+        "SELF_REVIEW_NOT_POSSIBLE": "Ba zai yiwu ka duba kanka ba"
       }
     }
   },

messages/ko.json

@@ -104,7 +104,7 @@
       "FEEDBACK_PHOTO_UPLOAD_LABEL": "피드백 사진 업로드",
       "VALIDATION": {
         "LOADING_REVIEW_FAILURE": "리뷰 로딩 오류",
-        "SELF_REVIEW_PROHIBITED": "자기 평가는 금지되어 있습니다"
+        "SELF_REVIEW_NOT_POSSIBLE": "자기 평가가 불가능합니다"
       }
     }
   },

src/app/[locale]/seller/reviews/[id]/page.tsx

@@ -43,12 +43,11 @@ function SellerReviews({
   const userId = params.id;
 
   const [giverReviews, setGiverReviews] = useState<ReviewInt[] | null>(null);
-  const [receiverReviews, setReciverReviews] = useState<ReviewInt[] | null>(null);
-  const [searchLoading, setSearchLoading] = useState<boolean>(false);
+  const [receiverReviews, setReceiverReviews] = useState<ReviewInt[] | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   const [isSaveEnabled, setIsSaveEnabled] = useState(false);
-  const { currentUser } = useContext(AppContext);
+  const { currentUser, setReload, reload } = useContext(AppContext);
   const inputRef = useRef<HTMLInputElement>(null);
   const [searchBarValue, setSearchBarValue] = useState('');
 
@@ -95,17 +94,18 @@ function SellerReviews({
           logger.info(`Fetched ${data.length} reviews for seller ID: ${userId}`);
           const { giverReviews, receiverReviews } = processReviews(data, userId);
           setGiverReviews(giverReviews);
-          setReciverReviews(receiverReviews);
+          setReceiverReviews(receiverReviews);
         } else {
           logger.warn(`No reviews found for seller ID: ${userId}`);
           setGiverReviews([]);
-          setReciverReviews([]);
+          setReceiverReviews([]);
         }
       } catch (error) {
         logger.error(`Error fetching reviews for seller ID: ${userId}`, { error });
         setError('Error fetching reviews. Please try again later.');
       } finally {
         setLoading(false);
+        setReload(false)
       }
     };
 
@@ -114,7 +114,7 @@ function SellerReviews({
 
   // Handle search logic
   const handleSearch = async () => {
-    setSearchLoading(true);
+    setReload(true);
     try {
       logger.info(`Searching reviews for seller ID: ${userId} with query: ${searchBarValue}`);
       const data = await fetchReviews(userId, searchBarValue);
@@ -123,17 +123,17 @@ function SellerReviews({
         logger.info(`Found ${data.length} reviews for seller ID: ${userId}`);
         const { giverReviews, receiverReviews } = processReviews(data, userId);
         setGiverReviews(giverReviews);
-        setReciverReviews(receiverReviews);
+        setReceiverReviews(receiverReviews);
       } else {
         logger.warn(`No reviews found for seller ID: ${userId} with query: ${searchBarValue}`);
         setGiverReviews([]);
-        setReciverReviews([]);
+        setReceiverReviews([]);
       }
     } catch (error) {
       logger.error(`Error searching reviews for seller ID: ${userId}`, { error });
       setError('Error searching reviews. Please try again later.');
     } finally {
-      setSearchLoading(false);
+      setReload(false);
     }
   };
 
@@ -157,7 +157,7 @@ function SellerReviews({
 
         {/* Search area */}
         <div className='flex gap-3 items-center justify-items-center py-3'>
-        <span>{t('SHARED.PIONEER_LABEL')}</span>
+          <span>{t('SHARED.PIONEER_LABEL')}</span>
           <FormControl className="flex-grow mr-2">
             <TextField
               id="search-input"
@@ -180,21 +180,61 @@ function SellerReviews({
             <SearchIcon className="text-[#ffc153]" />
           </button>
         </div>
-        
-        {searchLoading && (<div className='text-center text-primary text-lg'>
-          {t('SHARED.SEARCH_LOADING')}
-        </div>)        
-        }
 
         <ToggleCollapse header={t('SCREEN.REVIEWS.GIVE_REVIEW_SECTION_HEADER')}>
           <div>
-            <EmojiPicker sellerId={userId} setIsSaveEnabled={setIsSaveEnabled} currentUser={currentUser} />
+            <EmojiPicker sellerId={userId} setIsSaveEnabled={setIsSaveEnabled} currentUser={currentUser} setReload={setReload} />
           </div>
-        </ToggleCollapse>
-
+        </ToggleCollapse>      
         <ToggleCollapse header={t('SCREEN.REVIEWS.REVIEWS_GIVEN_SECTION_HEADER')}>
-          
-          {giverReviews && giverReviews.map((review, index) => (
+          {reload 
+            ? <Skeleton type='seller_review' />
+            : giverReviews && giverReviews.map((review, index) => (
+              <div key={index} className="seller_item_container mb-5">
+                <div className="flex justify-between items-start mb-3">
+                  {/* Left content */}
+                  <div className="flex-grow">
+                    <p className="text-primary text-sm">
+                      {review.giver} {' -> '}
+                      <span className="text-primary text-sm">{review.receiver}</span>
+                    </p>
+                    <p className="text-md break-words">{review.heading}</p>
+                  </div>
+
+                  {/* Right content */}
+                  <div className="flex flex-col items-end space-y-2">
+                    <div className="text-[#828282] text-sm text-right whitespace-nowrap">
+                      <p>{review.date}</p>
+                      <p>{review.time}</p>
+                    </div>
+                    <div className="flex gap-2 items-center">
+                      <Image
+                        src={review.image}
+                        alt="emoji image"
+                        width={50}
+                        height={50}
+                        className="object-cover rounded-md"
+                      />
+                      <p className="text-xl max-w-[50px]" title={review.reaction}>
+                        {review.unicode}
+                      </p>
+                    </div>
+                    <div className="flex justify-between items-center">
+                      <Link href={`/seller/reviews/feedback/${review.reviewId}?seller_name=${review.giver}`}>
+                        <OutlineBtn label={t('SHARED.REPLY')} />
+                      </Link>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))
+          }
+        </ToggleCollapse>
+ 
+        <ToggleCollapse header={t('SCREEN.REVIEWS.REVIEWS_RECEIVED_SECTION_HEADER')} open={true}>
+        {reload
+          ? <Skeleton type='seller_review' />
+          : receiverReviews && receiverReviews.map((review, index) => (
             <div key={index} className="seller_item_container mb-5">
               <div className="flex justify-between items-start mb-3">
                 {/* Left content */}
@@ -220,7 +260,9 @@ function SellerReviews({
                       height={50}
                       className="object-cover rounded-md"
                     />
-                    <p className="text-xl max-w-[50px]">{review.unicode}</p>
+                    <p className="text-xl max-w-[50px]" title={review.reaction}>
+                      {review.unicode}
+                    </p>
                   </div>
                   <div className="flex justify-between items-center">
                     <Link href={`/seller/reviews/feedback/${review.reviewId}?seller_name=${review.giver}`}>
@@ -230,47 +272,8 @@ function SellerReviews({
                 </div>
               </div>
             </div>
-          ))}
-        </ToggleCollapse>
-          
-        <ToggleCollapse header={t('SCREEN.REVIEWS.REVIEWS_RECEIVED_SECTION_HEADER')} open={true}>
-        {receiverReviews && receiverReviews.map((review, index) => (
-            <div key={index} className="seller_item_container mb-5">
-              <div className="flex justify-between items-start mb-3">
-                    {/* Left content */}
-                    <div className="flex-grow">
-                      <p className="text-primary text-sm">
-                        {review.giver} {' -> '}
-                        <span className="text-primary text-sm">{review.receiver}</span>
-                      </p>
-                      <p className="text-md break-words">{review.heading}</p>
-                    </div>
-
-                    {/* Right content */}
-                    <div className="flex flex-col items-end space-y-2">
-                      <div className="text-[#828282] text-sm text-right whitespace-nowrap">
-                        <p>{review.date}</p>
-                        <p>{review.time}</p>
-                      </div>
-                      <div className="flex gap-2 items-center">
-                        <Image
-                          src={review.image}
-                          alt="emoji image"
-                          width={50}
-                          height={50}
-                          className="object-cover rounded-md"
-                        />
-                        <p className="text-xl max-w-[50px]">{review.unicode}</p>
-                      </div>
-                      <div className="flex justify-between items-center">
-                        <Link href={`/seller/reviews/feedback/${review.reviewId}?seller_name=${review.giver}`}>
-                          <OutlineBtn label={t('SHARED.REPLY')} />
-                        </Link>
-                      </div>
-                    </div>
-                  </div>
-            </div>
-          ))}
+          ))
+        }
         </ToggleCollapse>
       </div>
     </>

src/app/[locale]/seller/reviews/feedback/[id]/page.tsx

@@ -172,7 +172,9 @@ export default function ReplyToReviewPage({ params, searchParams }: ReplyToRevie
                           height={50}
                           className="object-cover rounded-md"
                         />
-                        <p className="text-xl max-w-[50px]">{review.unicode}</p>
+                        <p className="text-xl max-w-[50px]" title={review.reaction}>
+                          {review.unicode}
+                        </p>
                       </div>
                     </div>
                   </div>

src/components/shared/Review/emojipicker.tsx

@@ -95,7 +95,7 @@ export default function EmojiPicker(props: any) {
       if (props.currentUser) {
         if (props.currentUser.pi_uid === props.sellerId) {
           logger.warn(`Attempted self review by user ${props.currentUser.pi_uid}`);
-          toast.error(t('SCREEN.REPLY_TO_REVIEW.VALIDATION.SELF_REVIEW_PROHIBITED'));
+          toast.error(t('SCREEN.REPLY_TO_REVIEW.VALIDATION.SELF_REVIEW_NOT_POSSIBLE'));
         }
         if (reviewEmoji === null) {
           logger.warn('Attempted to save review without selecting an emoji.');