fix: delete the slugtitle parameter in shared links to prevent the URL length from exceeding the limit #139

Author: shuashuai

ui/src/components/Operate/index.tsx

@@ -23,7 +23,6 @@ interface IProps {
   qid: string;
   aid?: string;
   title: string;
-  slugTitle: string;
   hasAnswer?: boolean;
   isAccepted: boolean;
   callback: (type: string) => void;
@@ -34,7 +33,6 @@ const Index: FC<IProps> = ({
   qid,
   aid = '',
   title,
-  slugTitle,
   isAccepted = false,
   hasAnswer = false,
   memberActions = [],
@@ -268,13 +266,7 @@ const Index: FC<IProps> = ({
 
   return (
     <div className="d-flex align-items-center">
-      <Share
-        type={type}
-        qid={qid}
-        aid={aid}
-        title={title}
-        slugTitle={slugTitle}
-      />
+      <Share type={type} qid={qid} aid={aid} title={title} />
       {firstAction?.map((item) => {
         if (item.action === 'edit') {
           return (

ui/src/components/Share/index.tsx

@@ -6,33 +6,25 @@ import { FacebookShareButton, TwitterShareButton } from 'next-share';
 import copy from 'copy-to-clipboard';
 
 import { loggedUserInfoStore } from '@/stores';
-import { pathFactory } from '@/router/pathFactory';
 
 interface IProps {
   type: 'answer' | 'question';
   qid: any;
   aid?: any;
   title: string;
-  slugTitle: string;
+  // slugTitle: string;
 }
 
-const Index: FC<IProps> = ({ type, qid, aid, title, slugTitle = '' }) => {
+const Index: FC<IProps> = ({ type, qid, aid, title }) => {
   const user = loggedUserInfoStore((state) => state.user);
   const [show, setShow] = useState(false);
   const [showTip, setShowTip] = useState(false);
   const [canSystemShare, setSystemShareState] = useState(false);
   const { t } = useTranslation();
   let baseUrl =
     type === 'question'
-      ? `${window.location.origin}${pathFactory.questionLanding(
-          qid,
-          slugTitle,
-        )}`
-      : `${window.location.origin}${pathFactory.answerLanding({
-          questionId: qid,
-          slugTitle,
-          answerId: aid,
-        })}`;
+      ? `${window.location.origin}/questions/${qid}`
+      : `${window.location.origin}/questions/${qid}/${aid}`;
   if (user.id) {
     baseUrl = `${baseUrl}?shareUserId=${user.username}`;
   }

ui/src/components/UserCard/index.tsx

@@ -63,9 +63,12 @@ const Index: FC<Props> = ({
         </>
       )}
       <div className="small text-secondary d-flex flex-row flex-md-column align-items-center align-items-md-start">
-        <div className="me-1 me-md-0">
+        <div className="me-1 me-md-0 d-flex align-items-center">
           {data?.status !== 'deleted' ? (
-            <Link to={`/users/${data?.username}`} className="me-1 text-break">
+            <Link
+              to={`/users/${data?.username}`}
+              className="me-1 text-break name-ellipsis"
+              style={{ maxWidth: '100px' }}>
               {data?.display_name}
             </Link>
           ) : (

ui/src/pages/Questions/Detail/components/Answer/index.tsx

@@ -23,7 +23,6 @@ interface Props {
   aid?: string;
   canAccept: boolean;
   questionTitle: string;
-  slugTitle: string;
   isLogged: boolean;
   callback: (type: string) => void;
 }
@@ -32,7 +31,6 @@ const Index: FC<Props> = ({
   data,
   isLogged,
   questionTitle = '',
-  slugTitle,
   callback,
   canAccept = false,
 }) => {
@@ -132,7 +130,6 @@ const Index: FC<Props> = ({
             type="answer"
             isAccepted={data.accepted === 2}
             title={questionTitle}
-            slugTitle={slugTitle}
             callback={callback}
           />
         </div>

ui/src/pages/Questions/Detail/components/Question/index.tsx

@@ -148,7 +148,6 @@ const Index: FC<Props> = ({ data, initPage, hasAnswer, isLogged }) => {
             type="question"
             memberActions={data?.member_actions}
             title={data.title}
-            slugTitle={data.url_title}
             hasAnswer={hasAnswer}
             isAccepted={Boolean(data?.accepted_answer_id)}
             callback={initPage}

ui/src/pages/Questions/Detail/index.tsx

@@ -234,7 +234,6 @@ const Index = () => {
                   key={item?.id}
                   data={item}
                   questionTitle={question?.title || ''}
-                  slugTitle={question?.url_title}
                   canAccept={isAuthor || isAdmin || isModerator}
                   callback={initPage}
                   isLogged={isLogged}