From a03deddbc0cbc9d48532dbd44fc13904528cf6b5 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Tue, 23 Apr 2024 22:23:11 +0500
Subject: [PATCH] frontend: fix <Image />

---
 .../NavigationRail/NavigationRail.jsx         |  8 +-
 .../components/ReleaseCard/ReleaseCard.jsx    | 23 +++--
 frontend/app/search/page.js                   |  4 +-
 frontend/next.config.mjs                      | 11 ++-
 frontend/package-lock.json                    | 92 ++++++++-----------
 frontend/package.json                         |  1 -
 6 files changed, 69 insertions(+), 70 deletions(-)

diff --git a/frontend/app/components/NavigationRail/NavigationRail.jsx b/frontend/app/components/NavigationRail/NavigationRail.jsx
index b0a2bba..68ae261 100644
--- a/frontend/app/components/NavigationRail/NavigationRail.jsx
+++ b/frontend/app/components/NavigationRail/NavigationRail.jsx
@@ -38,7 +38,13 @@ export const NavigationRail = (props) => {
   return (
     <nav className="left">
       <button className="circle transparent ">
-        <Image className="responsive" src="/favicon.ico" alt="Ваш профиль" />
+        <Image
+          className="responsive"
+          src="/favicon.ico"
+          alt="Ваш профиль"
+          width="64"
+          height="64"
+        />
       </button>
 
       {items.map((item) => {
diff --git a/frontend/app/components/ReleaseCard/ReleaseCard.jsx b/frontend/app/components/ReleaseCard/ReleaseCard.jsx
index 97c8981..1299f37 100644
--- a/frontend/app/components/ReleaseCard/ReleaseCard.jsx
+++ b/frontend/app/components/ReleaseCard/ReleaseCard.jsx
@@ -1,5 +1,3 @@
-"use client";
-
 import Link from "next/link";
 import Image from "next/image";
 
@@ -10,14 +8,21 @@ export const ReleaseCard = (props) => {
         className="no-padding round fill"
         style={{ width: 284, height: 508 }}
       >
-        <Image
-          className="responsive large top-round"
-          src={props.poster}
-          alt=""
-        />
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <div style={{ aspectRatio: "1/1" }}>
+          <Image
+            className="responsive large top-round"
+            layout="fill"
+            objectFit="cover"
+            style={{ width: "100%", height: "100%", aspectRatio: "1/1" }}
+            src={props.poster}
+            alt=""
+            sizes={"100vw"}
+          />
+        </div>
         <div className="padding">
-          <h6>{`${props.title.substring(0, 36)}${
-            [...props.title].length > 36 ? "..." : ""
+          <h6>{`${props.title.substring(0, 30)}${
+            [...props.title].length > 30 ? "..." : ""
           }`}</h6>
           <p>{`${props.description}${
             [...props.description].length > 160 ? "..." : ""
diff --git a/frontend/app/search/page.js b/frontend/app/search/page.js
index bfcda5f..2881ac0 100644
--- a/frontend/app/search/page.js
+++ b/frontend/app/search/page.js
@@ -7,10 +7,10 @@ import { usePathname, useRouter } from "next/navigation";
 import { CardList } from "@/app/components/CardList/CardList";
 import { useSearchParams } from "next/navigation";
 
-export function saveSearches(search) {
+function saveSearches(search) {
   localStorage.setItem("searches", search);
 }
-export function getSearches() {
+function getSearches() {
   return localStorage.getItem("searches");
 }
 
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index 4678774..51b96fe 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "anixstatic.com",
+      },
+    ],
+  },
+};
 
 export default nextConfig;
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6d1f0fa..ae54458 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -509,18 +509,6 @@
         "balanced-match": "^1.0.0"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dev": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
@@ -551,12 +539,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/typescript-estree/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "dev": true
-    },
     "node_modules/@typescript-eslint/visitor-keys": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.2.0.tgz",
@@ -1059,6 +1041,24 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "dev": true
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1802,26 +1802,6 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
-    "node_modules/eslint/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/eslint/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true,
-      "peer": true
-    },
     "node_modules/eslint/node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -3010,6 +2990,18 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.10",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
@@ -4503,24 +4495,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -4587,6 +4561,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index a3b4787..6cf8e4f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,5 @@
 {
   "name": "frontend",
-  "type": "module",
   "version": "0.1.0",
   "private": true,
   "scripts": {