changelog:

backend:
- Change index POST requests to GET requests

frontend:
- Fetch releases from api endpoint on index page.
- Add filters on main page.
- Remove tailwindcss

backend/modules/pages/index.py

@@ -36,21 +36,21 @@ async def GetMainPageFilter(
     return await apiRequest(request, ENDPOINTS["filter"], page, data=data)
 
 
-@router.post("/last", summary="Get new releases")
+@router.get("/last", summary="Get new releases")
 async def GetMainPage(request: Request, page: int = 0):
     return await GetMainPageFilter(request, page, None)
 
 
-@router.post("/ongoing", summary="Get ongoing releases")
+@router.get("/ongoing", summary="Get ongoing releases")
 async def GetOngoingPage(request: Request, page: int = 0):
     return await GetMainPageFilter(request, page, 2)
 
 
-@router.post("/announce", summary="Get announced releases")
+@router.get("/announce", summary="Get announced releases")
 async def GetAnnouncePage(request: Request, page: int = 0):
     return await GetMainPageFilter(request, page, 3)
 
 
-@router.post("/finished", summary="Get finished releases")
+@router.get("/finished", summary="Get finished releases")
 async def GetFinishedPage(request: Request, page: int = 0):
     return await GetMainPageFilter(request, page, 1)

backend/modules/proxy.py

@@ -43,7 +43,7 @@ async def apiRequest(
         "Content-Type": "application/json; charset=UTF-8",
     }
 
-    if request.method == "POST":
+    if data is not None or request.method == "POST":
         r = requests.post(
             # noqa: E501
             f"{endpoint}/{path}{query}",

frontend/app/api/api-utils.js

@@ -0,0 +1,11 @@
+export const getData = async (url) => {
+    try {
+      const response = await fetch(url);
+      if (response.status !== 200) {
+        throw new Error("Ошибка получения данных");
+      }
+      return await response.json();
+    } catch (error) {
+      return error;
+    }
+  };

frontend/app/api/config.js

@@ -0,0 +1,10 @@
+export const API_URL = "http://anix.test.local/api";
+
+export const endpoints = {
+    index: {
+        last: `${API_URL}/index/last`,
+        ongoing: `${API_URL}/index/ongoing`,
+        announce: `${API_URL}/index/announce`,
+        finished: `${API_URL}/index/finished`,
+    },
+}; 

frontend/app/components/ReleaseCard/ReleaseCard.js

@@ -0,0 +1,17 @@
+"use client";
+
+import Link from "next/link";
+
+export const ReleaseCard = (props) => {
+  return (
+    <Link href={`/release/${props.id}`} className="s3">
+      <article className="no-padding round fill" style={{"aspectRatio": "9/16"}}>
+        <img className="responsive large top-round" src={props.poster} />
+        <div className="padding">
+          <h6>{props.title}</h6>
+          <p>{props.description}</p>
+        </div>
+      </article>
+    </Link>
+  );
+};

frontend/app/globals.css

@@ -1,16 +1,21 @@
-@tailwind base;
+/* @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities; */
+
+/* * {
+  margin: 0;
+  padding: 0;
+}
 
 body {
   min-height: 100dvh;
-}
+} */
 
-@layer utilities {
+/* @layer utilities {
   .text-balance {
     text-wrap: balance;
   }
-}
+} */
 
 body, nav.left{
   transition: background .2s;

frontend/app/page.js

@@ -1,3 +1,77 @@
+"use client";
+
+import { ReleaseCard } from "./components/ReleaseCard/ReleaseCard";
+import { getData } from "./api/api-utils";
+import { endpoints } from "./api/config";
+import { useEffect, useState } from "react";
+
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+
 export default function Home() {
-  return <></>;
+  const searchParams = useSearchParams();
+  const [list, setList] = useState("last");
+  const [releases, setReleases] = useState(null);
+
+  useEffect(() => {
+    async function getReleases() {
+      setReleases(await getData(endpoints.index[list]));
+    }
+    setReleases(null);
+    getReleases();
+  }, [list]);
+
+  return (
+    <>
+      <div>
+        <button
+          className={`chip ${list == "last" ? "fill" : ""}`}
+          onClick={() => {
+            setList("last");
+          }}
+        >
+          <span>последнее</span>
+        </button>
+        <button
+          className={`chip ${list == "ongoing" ? "fill" : ""}`}
+          onClick={() => {
+            setList("ongoing");
+          }}
+        >
+          <span>в эфире</span>
+        </button>
+        <button
+          className={`chip ${list == "announce" ? "fill" : ""}`}
+          onClick={() => {
+            setList("announce");
+          }}
+        >
+          <span>анонсировано</span>
+        </button>
+        <button
+          className={`chip ${list == "finished" ? "fill" : ""}`}
+          onClick={() => {
+            setList("finished");
+          }}
+        >
+          <span>завершено</span>
+        </button>
+      </div>
+
+      <div className="grid">
+        {releases
+          ? releases.content.map((item) => {
+              return (
+                <ReleaseCard
+                  id={item.id}
+                  title={item.title_ru}
+                  poster={item.image}
+                  description={item.description}
+                />
+              );
+            })
+          : ""}
+      </div>
+    </>
+  );
 }

frontend/package.json

@@ -17,7 +17,6 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1"
+    "postcss": "^8"
   }
 }

frontend/postcss.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
   plugins: {
-    tailwindcss: {},
+    // tailwindcss: {},
   },
 };