From e079fa3a935f754b488fc5e012fc0c82ffe1f7c3 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sat, 11 May 2024 07:53:20 +0500
Subject: [PATCH] feat(ReleaseOverview): add ability to change view modes for
 releases pages

---
 TODO.md                                       |  1 -
 frontend/app/components/CardList/CardList.jsx | 32 ++++++++---
 .../NavigationRail/NavigationRail.jsx         |  2 +-
 .../components/ReleaseList/ReleaseList.jsx    | 33 +++++++++++
 .../ReleasesOverview/ReleasesOverview.jsx     | 56 +++++++++++++------
 5 files changed, 97 insertions(+), 27 deletions(-)
 create mode 100644 frontend/app/components/ReleaseList/ReleaseList.jsx

diff --git a/TODO.md b/TODO.md
index 529f902..7e4d13c 100644
--- a/TODO.md
+++ b/TODO.md
@@ -8,6 +8,5 @@
 
 ## Идеи
 
-- Изменение вида списка релизов
 - уведомления
 - метатеги
diff --git a/frontend/app/components/CardList/CardList.jsx b/frontend/app/components/CardList/CardList.jsx
index be435ea..2e51ca1 100644
--- a/frontend/app/components/CardList/CardList.jsx
+++ b/frontend/app/components/CardList/CardList.jsx
@@ -1,15 +1,29 @@
 import { ReleaseCard } from "@/app/components/ReleaseCard/ReleaseCard";
+import { ReleaseList } from "@/app/components/ReleaseList/ReleaseList";
 
 export const CardList = (props) => {
   return props.data.map((item) => {
-    return (
-      <ReleaseCard
-        key={item.id}
-        id={item.id}
-        title={item.title_ru}
-        poster={item.image}
-        description={item.description}
-      />
-    );
+    if (props.view == "grid") {
+      return (
+        <ReleaseCard
+          key={item.id}
+          id={item.id}
+          title={item.title_ru}
+          poster={item.image}
+          description={item.description}
+        />
+      );
+    }
+    if (props.view == "list") {
+      return (
+        <ReleaseList
+          key={item.id}
+          id={item.id}
+          title={item.title_ru}
+          poster={item.image}
+          description={item.description}
+        />
+      );
+    }
   });
 };
diff --git a/frontend/app/components/NavigationRail/NavigationRail.jsx b/frontend/app/components/NavigationRail/NavigationRail.jsx
index 4839b3c..bac0a76 100644
--- a/frontend/app/components/NavigationRail/NavigationRail.jsx
+++ b/frontend/app/components/NavigationRail/NavigationRail.jsx
@@ -105,7 +105,7 @@ export const NavigationRail = (props) => {
 
       <button className="circle transparent" onClick={() => copyToClipboard()}>
         <i>{isCopied ? "done" : "content_copy"}</i>
-        <div class="tooltip right">
+        <div className="tooltip right">
           {isCopied ? "Ссылка скопирована" : "Скопировать ссылку"}
         </div>
       </button>
diff --git a/frontend/app/components/ReleaseList/ReleaseList.jsx b/frontend/app/components/ReleaseList/ReleaseList.jsx
new file mode 100644
index 0000000..2ff6b8d
--- /dev/null
+++ b/frontend/app/components/ReleaseList/ReleaseList.jsx
@@ -0,0 +1,33 @@
+import Link from "next/link";
+import Image from "next/legacy/image";
+
+export const ReleaseList = (props) => {
+  return (
+    <Link
+      href={`/release/${props.id}`}
+      className={
+        props.className
+          ? props.className
+          : "s12 round fill row padding surface-container"
+      }
+    >
+      <Image
+        className="round"
+        style={{ aspectRatio: "1/1" }}
+        width="128px"
+        height="128px"
+        src={props.poster}
+        alt=""
+      />
+
+      <div className="max">
+        <h5 className="small">{`${props.title.substring(0, 90)}${
+          [...props.title].length > 90 ? "..." : ""
+        }`}</h5>
+        <p>{`${props.description.substring(0, 170)}${
+          [...props.description].length > 170 ? "..." : ""
+        }`}</p>
+      </div>
+    </Link>
+  );
+};
diff --git a/frontend/app/components/ReleasesOverview/ReleasesOverview.jsx b/frontend/app/components/ReleasesOverview/ReleasesOverview.jsx
index 9856e31..da73865 100644
--- a/frontend/app/components/ReleasesOverview/ReleasesOverview.jsx
+++ b/frontend/app/components/ReleasesOverview/ReleasesOverview.jsx
@@ -1,30 +1,54 @@
 import { CardList } from "@/app/components/CardList/CardList";
+import { useState } from "react";
 
 export default function ReleasesOverview(props) {
+  const [view, setView] = useState("grid");
+
   return (
     <>
-      {props.chips && (
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        {props.chips && (
+          <div>
+            {props.chips.map((item) => {
+              return (
+                <button
+                  key={item.list}
+                  className={`chip ${props.list == item.list ? "fill" : ""}`}
+                  onClick={() => {
+                    props.setList(item.list);
+                  }}
+                >
+                  <span>{item.title}</span>
+                </button>
+              );
+            })}
+          </div>
+        )}
+
         <div>
-          {props.chips.map((item) => {
-            return (
-              <button
-                key={item.list}
-                className={`chip ${props.list == item.list ? "fill" : ""}`}
-                onClick={() => {
-                  props.setList(item.list);
-                }}
-              >
-                <span>{item.title}</span>
-              </button>
-            );
-          })}
+          <button
+            className="circle transparent"
+            onClick={() => {
+              setView("list");
+            }}
+          >
+            <i className={view == "list" ? "fill" : ""}>view_agenda</i>
+          </button>
+          <button
+            className="circle transparent"
+            onClick={() => {
+              setView("grid");
+            }}
+          >
+            <i className={view == "grid" ? "fill" : ""}>cards</i>
+          </button>
         </div>
-      )}
+      </div>
 
       {props.releases ? (
         <>
           <div className="grid">
-            <CardList data={props.releases} />
+            <CardList data={props.releases} view={view} />
           </div>
 
           {props.isNextPage && (