Xtdh voting

components/drops/view/DropsList.tsx

@@ -39,6 +39,8 @@ interface DropsListProps {
   readonly location?: DropLocation;
 }
 
+
+
 const MemoizedDrop = memo(Drop);
 const MemoizedLightDrop = memo(LightDrop);
 const DropsList = memo(function DropsList({
@@ -58,6 +60,7 @@ const DropsList = memo(function DropsList({
   dropViewDropId,
   location = DropLocation.WAVE,
 }: DropsListProps) {
+
   const handleReply = useCallback<DropActionHandler>(
     ({ drop, partId }) => onReply({ drop, partId }),
     [onReply]
@@ -168,7 +171,7 @@ const DropsList = memo(function DropsList({
           </HighlightDropWrapper>
         );
       }),
-    [orderedDrops, getItemData] // Only depends on orderedDrops array and the memoized item data
+    [orderedDrops, getItemData, location]
   );
 
   return memoizedDrops;

components/waves/create-wave/voting/CreateWaveVoting.tsx

@@ -11,6 +11,13 @@ import NegativeVotingToggle from "./NegativeVotingToggle";
 import TimeWeightedVoting from "./TimeWeightedVoting";
 import { TimeWeightedVotingConfig } from "./types";
 
+const VOTING_TYPES_ORDER: Record<ApiWaveCreditType, number> = {
+  [ApiWaveCreditType.Tdh]: 0,
+  [ApiWaveCreditType.Xtdh]: 1,
+  [ApiWaveCreditType.TdhPlusXtdh]: 2,
+  [ApiWaveCreditType.Rep]: 3,
+};
+
 export default function CreateWaveVoting({
   waveType,
   selectedType,
@@ -55,13 +62,15 @@ export default function CreateWaveVoting({
         {TITLES[waveType]}
       </p>
       <div className="tw-mt-3 tw-grid lg:tw-grid-cols-3 tw-gap-x-4 tw-gap-y-4">
-        {Object.values(ApiWaveCreditType).map((votingType) => (
+        {(
+          Object.keys(VOTING_TYPES_ORDER) as ApiWaveCreditType[]
+        ).map((votingType) => (
           <CommonBorderedRadioButton
             key={votingType}
             type={votingType}
             selected={selectedType}
             disabled={false}
-            label={WAVE_VOTING_LABELS[votingType]}
+            label={`By ${WAVE_VOTING_LABELS[votingType]}`}
             onChange={onTypeChange}
           />
         ))}

components/waves/drop/SingleWaveDropLog.tsx

@@ -6,6 +6,7 @@ import {
 } from "@/helpers/Helpers";
 import Link from "next/link";
 import { ApiWaveCreditType } from "@/generated/models/ApiWaveCreditType";
+import { WAVE_VOTING_LABELS } from "@/helpers/waves/waves.constants";
 import { SystemAdjustmentPill } from "@/components/common/SystemAdjustmentPill";
 import useIsMobileScreen from "@/hooks/isMobileScreen";
 import Image from "next/image";
@@ -41,9 +42,8 @@ export const SingleWaveDropLog: React.FC<SingleWaveDropLogProps> = ({
     />
   ) : (
     <div
-      className={`tw-rounded-md tw-ring-1 tw-ring-white/10 tw-bg-iron-800 tw-flex-shrink-0 ${
-        isMobile ? "tw-size-7" : "tw-size-6"
-      }`}
+      className={`tw-rounded-md tw-ring-1 tw-ring-white/10 tw-bg-iron-800 tw-flex-shrink-0 ${isMobile ? "tw-size-7" : "tw-size-6"
+        }`}
     />
   );
 
@@ -54,9 +54,8 @@ export const SingleWaveDropLog: React.FC<SingleWaveDropLogProps> = ({
         className="tw-no-underline tw-group desktop-hover:hover:tw-opacity-80 tw-transition-all tw-duration-300"
       >
         <span
-          className={`tw-inline-block${
-            shouldLimit ? " tw-truncate tw-max-w-[8rem]" : ""
-          }`}
+          className={`tw-inline-block${shouldLimit ? " tw-truncate tw-max-w-[8rem]" : ""
+            }`}
         >
           <span className="tw-text-sm tw-font-medium tw-text-iron-50 tw-transition-all tw-duration-300 desktop-hover:group-hover:tw-text-iron-300">
             {log.invoker.handle}
@@ -110,11 +109,10 @@ export const SingleWaveDropLog: React.FC<SingleWaveDropLogProps> = ({
                 </span>
               )}
               <span
-                className={`tw-text-sm tw-font-semibold tw-whitespace-nowrap ${
-                  log.contents.newVote > 0 ? "tw-text-green" : "tw-text-red"
-                }`}
+                className={`tw-text-sm tw-font-semibold tw-whitespace-nowrap ${log.contents.newVote > 0 ? "tw-text-green" : "tw-text-red"
+                  }`}
               >
-                {formatNumberWithCommas(log.contents.newVote)} {creditType}
+                {formatNumberWithCommas(log.contents.newVote)} {WAVE_VOTING_LABELS[creditType]}
               </span>
               {log.contents?.reason === "CREDIT_OVERSPENT" && (
                 <SystemAdjustmentPill />
@@ -138,11 +136,10 @@ export const SingleWaveDropLog: React.FC<SingleWaveDropLogProps> = ({
                 </span>
               )}
               <span
-                className={`tw-text-sm tw-font-semibold tw-whitespace-nowrap ${
-                  log.contents.newVote > 0 ? "tw-text-green" : "tw-text-red"
-                }`}
+                className={`tw-text-sm tw-font-semibold tw-whitespace-nowrap ${log.contents.newVote > 0 ? "tw-text-green" : "tw-text-red"
+                  }`}
               >
-                {formatNumberWithCommas(log.contents.newVote)} {creditType}
+                {formatNumberWithCommas(log.contents.newVote)} {WAVE_VOTING_LABELS[creditType]}
               </span>
               {log.contents?.reason === "CREDIT_OVERSPENT" && (
                 <SystemAdjustmentPill />

components/waves/drop/SingleWaveDropVoteContent.tsx

@@ -11,6 +11,8 @@ import { SingleWaveDropVoteInput } from "./SingleWaveDropVoteInput";
 import { SingleWaveDropVoteStats } from "./SingleWaveDropVoteStats";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExchange } from "@fortawesome/free-solid-svg-icons";
+import { WAVE_VOTING_LABELS } from "@/helpers/waves/waves.constants";
+import { ApiWaveCreditType } from "@/generated/models/ApiWaveCreditType";
 
 interface SingleWaveDropVoteContentProps {
   readonly drop: ApiDrop;
@@ -21,15 +23,20 @@ interface SingleWaveDropVoteContentProps {
 export const SingleWaveDropVoteContent: React.FC<
   SingleWaveDropVoteContentProps
 > = ({ drop, size, onVoteSuccess }) => {
+
   const currentVoteValue = drop.context_profile_context?.rating ?? 0;
   const minRating = drop.context_profile_context?.min_rating ?? 0;
   const maxRating = drop.context_profile_context?.max_rating ?? 0;
   const [voteValue, setVoteValue] = useState<number | string>(currentVoteValue);
   const [isSliderMode, setIsSliderMode] = useState(size !== SingleWaveDropVoteSize.MINI);
 
+  const voteLabel =
+    WAVE_VOTING_LABELS[drop.wave.voting_credit_type as ApiWaveCreditType] ||
+    "votes";
+
   useEffect(() => {
     setVoteValue(currentVoteValue);
-  }, [drop.context_profile_context?.rating]);
+  }, [currentVoteValue]);
 
   const submitRef = useRef<SingleWaveDropVoteSubmitHandles | null>(null);
 
@@ -42,7 +49,7 @@ export const SingleWaveDropVoteContent: React.FC<
   // MINI layout uses single horizontal row, others use existing responsive layout
   if (size === SingleWaveDropVoteSize.MINI) {
     return (
-       
+
       <div
         className="tw-bg-iron-900 tw-border tw-border-iron-800 tw-border-solid tw-rounded-lg tw-px-2 tw-py-1.5"
         onClick={(e) => e.stopPropagation()}
@@ -71,7 +78,7 @@ export const SingleWaveDropVoteContent: React.FC<
                 voteValue={voteValue}
                 minValue={minRating}
                 maxValue={maxRating}
-                creditType={drop.wave.voting_credit_type}
+                label={voteLabel}
                 setVoteValue={setVoteValue}
                 rank={drop.rank}
                 size={size}
@@ -83,7 +90,7 @@ export const SingleWaveDropVoteContent: React.FC<
                 maxValue={maxRating}
                 setVoteValue={setVoteValue}
                 onSubmit={handleSubmit}
-                creditType={drop.wave.voting_credit_type}
+                label={voteLabel}
                 size={size}
               />
             )}
@@ -100,13 +107,13 @@ export const SingleWaveDropVoteContent: React.FC<
             />
           </div>
         </div>
-        
+
         {/* Stats below the controls */}
         <div className="tw-mt-3">
           <SingleWaveDropVoteStats
             currentRating={drop.context_profile_context?.rating ?? 0}
             maxRating={maxRating}
-            creditType={drop.wave.voting_credit_type}
+            label={voteLabel}
           />
         </div>
       </div>
@@ -146,7 +153,7 @@ export const SingleWaveDropVoteContent: React.FC<
           <SingleWaveDropVoteStats
             currentRating={drop.context_profile_context?.rating ?? 0}
             maxRating={maxRating}
-            creditType={drop.wave.voting_credit_type}
+            label={voteLabel}
           />
         </div>
 
@@ -157,9 +164,9 @@ export const SingleWaveDropVoteContent: React.FC<
               voteValue={voteValue}
               minValue={minRating}
               maxValue={maxRating}
-              creditType={drop.wave.voting_credit_type}
               setVoteValue={setVoteValue}
               rank={drop.rank}
+              label={voteLabel}
             />
           ) : (
             <SingleWaveDropVoteInput
@@ -168,7 +175,7 @@ export const SingleWaveDropVoteContent: React.FC<
               maxValue={maxRating}
               setVoteValue={setVoteValue}
               onSubmit={handleSubmit}
-              creditType={drop.wave.voting_credit_type}
+              label={voteLabel}
             />
           )}
         </div>