Merge pull request #5698 from webkom/improve-trophies-profile

Improve trophies on profile

Author: falbru

lego-webapp/components/Collapsible/Collapsible.module.css

@@ -0,0 +1,27 @@
+.showMore {
+  display: flex;
+  justify-content: center;
+  height: 50px;
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  background-image: linear-gradient(
+    rgba(0, 0, 0, 0%),
+    var(--lego-card-color),
+    var(--lego-card-color)
+  );
+  cursor: pointer;
+}
+
+.showMoreIcon {
+  padding: 3px;
+  margin: 0;
+  border-radius: 50%;
+  background-color: var(--lego-card-color);
+}
+
+.collapse {
+  position: relative;
+  overflow: hidden;
+  transition: height var(--easing-medium);
+}

lego-webapp/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,49 @@
+import { Icon } from '@webkom/lego-bricks';
+import { useState, useRef } from 'react';
+import styles from './Collapsible.module.css';
+
+type CollapsibleProps = {
+  collapsedHeight: number;
+  className: string;
+  children: ReactNode[];
+};
+
+const Collapsible = (props: CollapsibleProps) => {
+  const { children, collapsedHeight, className } = props;
+
+  const [isOpened, setIsOpened] = useState(false);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const useCollapse = ref.current && collapsedHeight < ref.current.clientHeight;
+
+  return (
+    <div
+      className={styles.collapse}
+      style={{
+        height: !useCollapse
+          ? undefined
+          : isOpened
+            ? ref.current.clientHeight + 50
+            : collapsedHeight + 'px',
+      }}
+    >
+      <div className={className} ref={ref}>
+        {children}
+      </div>
+      {useCollapse && (
+        <div className={styles.showMore}>
+          <Icon
+            onPress={() => {
+              setIsOpened(!isOpened);
+            }}
+            name={isOpened ? 'chevron-up' : 'chevron-down'}
+            className={styles.showMoreIcon}
+            size={30}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Collapsible;

lego-webapp/pages/users/@username/_components/Achievements.tsx

@@ -7,21 +7,18 @@ import {
   Tooltip,
 } from '@webkom/lego-bricks';
 import moment from 'moment-timezone';
-import { useState, useMemo } from 'react';
+import { useMemo } from 'react';
+import Collapsible from '~/components/Collapsible/Collapsible';
 import { TitleWithRarity } from '~/pages/achievements/+Page';
 import AchievementsInfo from '~/utils/achievementConstants';
 import styles from './UserProfile.module.css';
 import type { Achievement } from '~/redux/models/User';
 
-const MAX_ACHIEVEMENTS = 4;
-
 export const Achievements = ({
   achievements,
 }: {
   achievements: Achievement[];
 }) => {
-  const [showAll, setShowAll] = useState(false);
-
   const sortedAchievements = useMemo(() => {
     return [...achievements].sort((a, b) => {
       if (
@@ -38,15 +35,11 @@ export const Achievements = ({
     });
   }, [achievements]);
 
-  const topAchievements = showAll
-    ? sortedAchievements
-    : sortedAchievements.slice(0, MAX_ACHIEVEMENTS);
-
   return (
     <div className={styles.achievements}>
       <h3>Trofeer</h3>
-      <div className={styles.trophyContainer}>
-        {topAchievements.map((e) => (
+      <Collapsible className={styles.trophyContainer} collapsedHeight={230}>
+        {sortedAchievements.map((e) => (
           <Tooltip
             key={AchievementsInfo[e.identifier][e.level].name}
             className={styles.trophy}
@@ -83,19 +76,7 @@ export const Achievements = ({
             </BaseCard>
           </Tooltip>
         ))}
-      </div>
-      <Flex gap="var(--spacing-md)" className={styles.trophyLinks}>
-        {achievements.length > MAX_ACHIEVEMENTS && (
-          <Button
-            onPress={() => {
-              setShowAll((prev) => !prev);
-            }}
-          >
-            {showAll ? 'Vis færre' : 'Vis alle'}
-          </Button>
-        )}
-        <LinkButton href="/achievements/leaderboard">Topplister</LinkButton>
-      </Flex>
+      </Collapsible>
     </div>
   );
 };

lego-webapp/pages/users/@username/_components/GroupMemberships.tsx

@@ -3,6 +3,7 @@ import cx from 'classnames';
 import { groupBy, orderBy } from 'lodash-es';
 import { CircleMinus } from 'lucide-react';
 import moment from 'moment-timezone';
+import { useMemo } from 'react';
 import { GroupType, type Dateish } from 'app/models';
 import { CircularPicture } from '~/components/Image';
 import Pill from '~/components/Pill';
@@ -65,10 +66,20 @@ export const GroupMemberships = ({
     ],
   );
 
+  const sortedMembershipsAsPills = useMemo(
+    () =>
+      membershipsAsPills.toSorted((a, b) =>
+        a.abakusGroup.name
+          .toLowerCase()
+          .localeCompare(b.abakusGroup.name.toLowerCase()),
+      ),
+    [membershipsAsPills],
+  );
+
   return (
     <Flex column gap="var(--spacing-sm)" className={styles.rightContent}>
       <Flex wrap gap="var(--spacing-sm)">
-        {membershipsAsPills.map((membership) => (
+        {sortedMembershipsAsPills.map((membership) => (
           <GroupPill key={membership.id} group={membership.abakusGroup} />
         ))}
       </Flex>

lego-webapp/pages/users/@username/_components/UserProfile.module.css

@@ -151,10 +151,6 @@ img.frame {
   justify-content: space-between;
 }
 
-.trophyLinks {
-  margin-top: var(--spacing-md);
-}
-
 .trophyImage {
   height: 100px;
   width: auto;