Add ShowMore button

Author: nalves599

src/app/(authenticated)/companies/[id]/page.tsx

@@ -13,6 +13,7 @@ import { SessionTile } from "@/components/session";
 import EventDayButton from "@/components/EventDayButton";
 import { Scan } from "lucide-react";
 import Link from "next/link";
+import { SocialNetwork } from "@/components/SocialNetwork";
 
 interface CompanyParams {
   id: string;
@@ -56,12 +57,12 @@ export default async function Company({ params }: { params: CompanyParams }) {
           src={company.img}
           alt={`${company.name} logo`}
         />
-        {/* TODO: Add contacts to company */}
         {hereToday && (
           <span className="bg-sinfo-primary text-white rounded-md px-3 py-1 text-lg font-bold uppercase">
             Here Today
           </span>
         )}
+        {company.site && <SocialNetwork type="website" text={company.site} />}
       </div>
       {/* Members section */}
       {user && isMember(user.role) && (

src/app/(authenticated)/companies/[id]/promote/CompanyPromoteScanner.tsx

@@ -31,10 +31,7 @@ export default function CompanyPromoteScanner({
       if (
         await UserService.promote(cannonToken, scannedUser.id, {
           role: "company",
-          company: {
-            company: company.id,
-            edition: "32", // FIXME: Use dynamic value
-          },
+          company: { company: company.id },
         })
       ) {
         setStatusCard(

src/app/(authenticated)/sessions/[id]/page.tsx

@@ -3,6 +3,7 @@ import { hackyPeeking } from "@/assets/images";
 import List from "@/components/List";
 import ListCard from "@/components/ListCard";
 import MessageCard from "@/components/MessageCard";
+import { ShowMore } from "@/components/ShowMore";
 import { PrizeTile } from "@/components/prize";
 import AddToCalendarButton from "@/components/session/AddToCalendarButton";
 import { CalendarButton } from "@/components/session/CalendarButton";
@@ -60,7 +61,9 @@ export default async function Session({ params }: { params: SessionParams }) {
         <span className="bg-sinfo-secondary text-white rounded-md px-3 py-1 font-bold uppercase">
           {sinfoSession.kind}
         </span>
-        <p className="font-light">{sinfoSession.description}</p>
+        <ShowMore lines={5} className="font-light">
+          {sinfoSession.description}
+        </ShowMore>
       </div>
       {/* Members section */}
       {user && isMember(user.role) && (

src/app/(authenticated)/speakers/[id]/page.tsx

@@ -1,4 +1,5 @@
 import List from "@/components/List";
+import { ShowMore } from "@/components/ShowMore";
 import { SessionTile } from "@/components/session";
 import { SpeakerService } from "@/services/SpeakerService";
 import Image from "next/image";
@@ -41,7 +42,9 @@ export default async function Speaker({ params }: { params: SpeakerParams }) {
             alt={`${speaker.company.name} logo`}
           />
         )}
-        <p className="text-sm font-light">{speaker.description}</p>
+        <ShowMore lines={5} className="text-sm font-light">
+          {speaker.description}
+        </ShowMore>
       </div>
       {/* Company Sessions */}
       {speakerSessions?.length ? (

src/components/EventDayButton.tsx

@@ -18,7 +18,7 @@ export default function EventDayButton({
 }: EventDayButtonProps) {
   return (
     <button
-      className="flex flex-col items-center text-center gap-y-1 py-2"
+      className="flex flex-col items-center text-center gap-y-1 py-1"
       title={getEventFullDate(date)}
       onClick={onClick}
       disabled={!onClick}

src/components/GridCard.tsx

@@ -25,7 +25,6 @@ export default function GridCard({
   return (
     <Link href={link || "#"} {...linkProps}>
       <div className="w-[160px] min-h-[240px] flex flex-col items-center justify-between px-4 py-4 gap-y-2 text-sm bg-white rounded-md shadow-md text-center overflow-hidden hover:bg-slate-50 hover:shadow-sm active:bg-gray-200 active:shadow-none">
-        {/* TODO: Fix large names! Truncate is not working */}
         <span title={title} className="h-12 w-full line-clamp-2">
           {title}
         </span>

src/components/ShowMore.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { useWindowSize } from "react-use";
+
+interface ShowMoreProps {
+  lines: 1 | 2 | 3 | 4 | 5 | 6;
+  children: ReactNode;
+  className?: string;
+}
+
+const lineClamps = [
+  "line-clamp-1",
+  "line-clamp-2",
+  "line-clamp-3",
+  "line-clamp-4",
+  "line-clamp-5",
+  "line-clamp-6",
+];
+
+export function ShowMore({ lines, children, className }: ShowMoreProps) {
+  const textRef = useRef<HTMLParagraphElement>(null);
+  const [showButton, setShowButton] = useState<boolean>(true);
+  const [showMore, setShowMore] = useState<boolean>(false);
+  const { width: windowWidth } = useWindowSize();
+
+  useEffect(() => {
+    setShowButton(
+      (textRef.current?.clientHeight ?? 0) <
+        (textRef.current?.scrollHeight ?? 1),
+    );
+  }, [lines, windowWidth]);
+
+  return (
+    <span className={className}>
+      <p
+        ref={textRef}
+        className={`w-full ${showMore ? "" : lineClamps[lines - 1]}`}
+      >
+        {children}
+      </p>
+      {showButton && (
+        <label
+          role="button"
+          className="font-semibold hover:cursor-pointer hover:underline"
+          onClick={() => setShowMore((s) => !s)}
+        >
+          {showMore ? "Show less" : "Show more"}
+        </label>
+      )}
+    </span>
+  );
+}

src/components/SocialNetwork.tsx

@@ -1,4 +1,4 @@
-import { SocialIcon } from "react-social-icons";
+import { SocialIcon, SocialIconProps } from "react-social-icons";
 
 type SocialNetworkType =
   | "linkedin"
@@ -12,15 +12,37 @@ interface SocialNetworkProps {
   type: SocialNetworkType;
 }
 
-const baseHref: Record<SocialNetworkType, string> = {
-  linkedin: "https://linkedin.com/in/",
-  linkedinCompany: "https://linkdein.com/company/",
-  email: "mailto:",
-  github: "https://github.com/",
-  website: "",
+type SocialNetwork = {
+  baseHref: string;
+  extraProps?: SocialIconProps;
+  transform?(t: string, baseHref: string): string;
+};
+
+const socialNetworks: Record<SocialNetworkType, SocialNetwork> = {
+  linkedin: { baseHref: "https://linkedin.com/in/" },
+  linkedinCompany: { baseHref: "https://linkdein.com/company/" },
+  email: { baseHref: "mailto:" },
+  github: { baseHref: "https://github.com/" },
+  website: {
+    baseHref: "",
+    transform: (text) => {
+      if (!text.startsWith("http")) return `https://${text}`;
+      return text;
+    },
+    extraProps: { bgColor: "#323363" },
+  },
 };
 
 export function SocialNetwork({ text, type }: SocialNetworkProps) {
-  const url = `${baseHref[type]}${text}`;
-  return <SocialIcon url={url} style={{ height: 32, width: 32 }} />;
+  const socialNetwork = socialNetworks[type];
+  const url = socialNetwork.transform
+    ? socialNetwork.transform(text, socialNetwork.baseHref)
+    : `${socialNetwork.baseHref}${text}`;
+  return (
+    <SocialIcon
+      url={url}
+      style={{ height: 32, width: 32 }}
+      {...(socialNetwork.extraProps ?? {})}
+    />
+  );
 }

src/services/UserService.ts

@@ -162,7 +162,7 @@ export const UserService = (() => {
         role: "company";
         company: {
           company: string;
-          edition: string;
+          edition?: string;
         };
       }
     | {