[Задача 12799] Добавил ссылку редактирования статьи на карточку опечатки

cp/javascript/src/components/Typo/index.jsx

@@ -4,6 +4,7 @@ import EditableText from "../EditableText";
 
 import './style.css'
 
+import 'whatwg-fetch'
 
 export default class Typo extends Component {
 
@@ -25,6 +26,33 @@ export default class Typo extends Component {
     }
 
     /**
+     * Запрашивает с сервера ссылку на редактирование статьи и устанавливает element.href равным
+     * полученной ссылке.
+     *
+     * Метод setEditLink вызывается по событию onMouseOver карточки для того, чтобы
+     * избежать большого числа запросов серверу. Если карточек много, то будет выполнено
+     * довольно много запросов. OnMouseOver позволяет снизить кол-во запросов и нагрузку
+     * на адаптер.
+     */
+    setEditLink = async (element) => {
+        let queryString = `?typoId=${this.typo.id}`;
+        let result = await fetch(`${window.baseUrl}/users/typos/getEditUrl${queryString}`, {
+            method: "GET",
+            credentials: 'include'
+        });
+
+        console.log(result);
+
+        let resultJson = await result.json();
+        const editUrl = resultJson.editUrl;
+
+        // Задаем ссылку
+        element.href = editUrl;
+
+        return false;
+    }
+
+    /**
      * Управляет отображением всплывающей подсказки для
      * кнопки принятия исправления.
      */
@@ -139,6 +167,8 @@ export default class Typo extends Component {
                 <CardFooter>
                     <p>Комментарий: "{typo.comment}"</p>
                     Добавлена <small>{typo.date}</small>
+                    <a id="typo-edit" className="link" target={"_blank"}
+                       onMouseOver={(e) => this.setEditLink(e.target)}>Редактировать статью</a>
                 </CardFooter>
             </Card>
         );

cp/javascript/src/components/Typo/style.css

@@ -35,4 +35,11 @@
 .typo-correction {
     cursor: pointer;
     text-decoration: underline;
+}
+
+#typo-edit {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    font-size: 80%;
 }
\ No newline at end of file

cp/javascript/src/style.css

@@ -24,4 +24,12 @@
 /* Rotation animation */
 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
\ No newline at end of file
+
+.link {
+    cursor: pointer;
+}
+
+.link:hover {
+    text-decoration: underline !important;
+}
\ No newline at end of file