useQuery frontend fixed

steph-koopmanschap · Aug 6, 2023 · 14f5022 · 14f5022
1 parent c3edffc
commit 14f5022
Show file tree

Hide file tree

Showing 17 changed files with 72 additions and 135 deletions.
diff --git a/backend/live/urls.py b/backend/live/urls.py
@@ -12,6 +12,6 @@
     path("create-category", create_category, name='create_category'),
     path("update-category/<id>", update_category, name='update_category'),
     path("delete-category/<id>", delete_category, name='delete_category'),
-    path("start-stream", start_stream),
-    path("end-stream", end_stream)
+    path("publish", start_stream),
+    path("done", end_stream)
 ]
diff --git a/backend/live/views/category_views.py b/backend/live/views/category_views.py
@@ -1,5 +1,5 @@
 from rest_framework.decorators import api_view, permission_classes
-from rest_framework.permissions import IsAdminUser
+from rest_framework.permissions import IsAdminUser, AllowAny
 from rest_framework.response import Response
 from rest_framework import status, viewsets
 from ..models.models import StreamCategory
@@ -11,6 +11,7 @@ class CategoriesListView(viewsets.ModelViewSet):
     model = StreamCategory
     queryset = StreamCategory.objects.all()
     serializer_class = StreamCategorySerializerGet
+    permission_classes = [AllowAny]
 
     def list(self, request, *args, **kwargs):
         queryset = self.filter_queryset(self.get_queryset())

diff --git a/backend/live/views/stream_views.py b/backend/live/views/stream_views.py
@@ -3,20 +3,18 @@
 from rest_framework.response import Response
 from rest_framework import status, viewsets
 from api.models.models import User
+from django.http import HttpResponse
 from ..models.models import StreamerProfile
 from ..serializers import StreamerProfileSerializer
 from uuid import uuid4
 
 
-@api_view(["POST"])
-@permission_classes([AllowAny])
 def start_stream(request):
-    print(request.data)
+    print(request.POST)
 
-    return Response({"message": "Stream has started"}, status=status.HTTP_201_CREATED)
+    return HttpResponse("OK")
+
 
 
-@api_view(["POST"])
-@permission_classes([AllowAny])
 def end_stream(request):
     print(request.data)
diff --git a/docker-compose-development.yml b/docker-compose-development.yml
@@ -126,6 +126,8 @@ services:
     # NGINX RTMP SERVER
     jasma_live:
         restart: always
+        volumes:
+            - ./rtmp:/etc/nginx
         build: 
             context: ./rtmp
             target: development

diff --git a/frontend/entities/stream/api/api.js b/frontend/entities/stream/api/api.js
@@ -14,3 +14,8 @@ export const getLiveSearchResults = async (searchTerm = "") => {
 
     return res.data;
 };
+
+export const getCategories = async () => {
+    const res = await STREAM_API.get(`${STREAM_ENDPOINT}/categories`);
+    return res.data.data?.categories || [];
+};
diff --git a/frontend/entities/stream/ui/recommended-category-card/CategoryCard.js b/frontend/entities/stream/ui/recommended-category-card/CategoryCard.js
@@ -3,7 +3,7 @@ import "./CategoryCard.css";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlay } from "@fortawesome/free-solid-svg-icons";
 
-export const CategoryCard = ({ title, onClick, views, category_color, category_png }) => {
+export const CategoryCard = ({ title, onClick, views = 0, color_hex, category_img }) => {
     return (
         <div
             className={`card-container`}
@@ -12,17 +12,17 @@ export const CategoryCard = ({ title, onClick, views, category_color, category_p
             aria-label={`${title} category`}
             onClick={onClick}
         >
-            <CardShape color={category_color} />
+            <CardShape color={color_hex} />
             <div className="card-wrapper">
                 <div className="play-icon">
                     <FontAwesomeIcon icon={faPlay} />
                 </div>
                 <h2>{title}</h2>
-                <h3>{formatLargeNumber(views)} views</h3>
+                {views > 100 ? <h3>{formatLargeNumber(views)} views</h3> : null}
             </div>
             <div
                 className="card-img-wrapper"
-                style={{ backgroundImage: `url(${category_png})` }}
+                style={{ backgroundImage: `url(${category_img})` }}
             ></div>
         </div>
     );

diff --git a/frontend/features/comment/model/commentActions.js b/frontend/features/comment/model/commentActions.js
@@ -27,7 +27,7 @@ const handleCreatePostComment = async (commentData, file) => {
  * @returns
  */
 
-const useGetComments = async (postID, limit) => {
+const useGetComments = (postID, limit) => {
     return useQuery(
         [`comments_${postID}`],
         async () => {

diff --git a/frontend/features/post/model/actions.js b/frontend/features/post/model/actions.js
@@ -130,7 +130,7 @@ const useGetLatestFeed = (limit = 25) =>
  * @returns
  */
 
-const useGetUserPost = async (user_id, limit) =>
+const useGetUserPost = (user_id, limit) =>
     useQuery(
         [`userPosts_${user_id}`],
         async () => {

diff --git a/frontend/features/stream/index.js b/frontend/features/stream/index.js
@@ -3,5 +3,4 @@ export { Share } from "./ui/actions/Share";
 export { Report } from "./ui/actions/Report";
 export { StreamKey } from "./ui/settings/StreamKey";
 export { Search as StreamSearch } from "./ui/search/Search";
-export { handleGetLiveStreams } from "./model/actions";
-export { handleStreamSearch } from "./model/actions";
+export { handleGetLiveStreams, handleStreamSearch, handleGetCategories } from "./model/actions";
diff --git a/frontend/features/stream/model/actions.js b/frontend/features/stream/model/actions.js
@@ -1,8 +1,15 @@
-import { getLiveSearchResults, getLiveStreams } from "@/entities/stream";
+import { getCategories, getLiveSearchResults, getLiveStreams } from "@/entities/stream";
 import { useQuery } from "react-query";
 
 import { handleError } from "@/shared/utils/handleError";
 
+const DEFAULTS = {
+    refetchOnWindowFocus: false,
+    refetchOnmount: false,
+    refetchOnReconnect: false,
+    staleTime: 5 * 60 * 1000
+};
+
 export const handleGenerateStreamKey = async (userID) => {
     try {
         const req = new Promise((res, rej) => {
@@ -21,30 +28,31 @@ export const handleGenerateStreamKey = async (userID) => {
  * @param {Number} page query with page number. Defaults to 1
  * @returns
  */
-export const handleGetLiveStreams = async (category = "", page = 1) => {
-    return useQuery(
-        ["liveList"],
-        async () => {
-            return getLiveStreams(category, page);
-        },
-        {
-            enabled: true,
-            refetchOnWindowFocus: false,
-            onError: handleError
-        }
-    );
+export const handleGetLiveStreams = (category = "", page = 1) => {
+    return useQuery(["liveList", category], () => getLiveStreams(category, page), {
+        enabled: true,
+        ...DEFAULTS
+    });
 };
 
-export const handleStreamSearch = async (searchTerm) => {
+export const handleStreamSearch = (searchTerm) => {
     return useQuery(
         ["liveSearchResults"],
         async () => {
             return getLiveSearchResults(searchTerm);
         },
         {
             enabled: true,
-            refetchOnWindowFocus: false,
-            onError: handleError
+            ...DEFAULTS
         }
     );
 };
+
+/**
+ * Get stream categories
+ * @returns
+ */
+
+export const handleGetCategories = () => {
+    return useQuery("live_categories", getCategories, { enabled: true, onError: handleError, ...DEFAULTS });
+};
diff --git a/frontend/features/user/model/userActions.js b/frontend/features/user/model/userActions.js
@@ -89,7 +89,7 @@ const handleUploadUserPic = async (file) => {
  * @returns
  */
 
-const useGetFollowers = async (userID) =>
+const useGetFollowers = (userID) =>
     useQuery(
         [`followers_${userID}`],
         async () => {
@@ -108,7 +108,7 @@ const useGetFollowers = async (userID) =>
  * @returns
  */
 
-const useGetFollowing = async (userID) =>
+const useGetFollowing = (userID) =>
     useQuery(
         [`followees_${userID}`],
         async () => {
@@ -142,7 +142,7 @@ const handleCheckIsFollowing = async (userID_two) => {
  * @returns
  */
 
-const useGetUserIDsByRole = async (roleFilter) =>
+const useGetUserIDsByRole = (roleFilter) =>
     useQuery(
         [`UserIDS_${roleFilter}`],
         async () => {
@@ -178,7 +178,7 @@ const handleChangeUserRole = async (user_id, role) => {
  * @param {String} username
  * @returns
  */
-const useGetUserID = async (username) =>
+const useGetUserID = (username) =>
     useQuery(
         [`${username}`],
         async () => {
@@ -197,7 +197,7 @@ const useGetUserID = async (username) =>
  * @returns
  */
 
-const useGetUserInfo = async (userID) =>
+const useGetUserInfo = (userID) =>
     useQuery(
         [`${username}`],
         async () => {

diff --git a/frontend/shared/api/axios.js b/frontend/shared/api/axios.js
@@ -10,7 +10,7 @@ else if (process.env.NEXT_PUBLIC_NODE_ENV === "production") {
 }
 
 const axiosInstance = axios.create({
-    baseURL: baseURL,
+    baseURL,
     withCredentials: true,
     timeout: 9000 //Timeout response after 9 seconds
 });

diff --git a/frontend/widgets/stream-list/catalog/VirtualizedCatalog.js b/frontend/widgets/stream-list/catalog/VirtualizedCatalog.js
@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import "./Catalog.css";
 import Virtualized from "@/shared/ui/wrappers/Virtualized";
 import UserWidgets from "@/widgets/user";
+import { Spinner } from "@/shared/ui";
 
 export const VirtualizedCatalog = ({
     data = [],
@@ -36,7 +37,7 @@ export const VirtualizedCatalog = ({
     return (
         <div className="list-layout">
             {isError ? (
-                <LoadError>{error}</LoadError>
+                <LoadError>{error?.message}</LoadError>
             ) : (
                 <div className="live-list-wrapper">
                     {data?.map((item, ind) => (

diff --git a/frontend/widgets/stream-list/categories/CategoriesList.js b/frontend/widgets/stream-list/categories/CategoriesList.js
@@ -2,40 +2,18 @@ import { CategoryCard, SectionHeading } from "@/entities/stream";
 import { memo } from "react";
 import "./List.css";
 import { useRouter } from "next/router";
-const DUMMY_DATA = [
-    {
-        title: "Chatting",
-        views: "21521051",
-        category_color: "#9e66ca",
-        category_png: "/assets/png_example.png"
-    },
-    {
-        title: "Overwatch",
-        views: "15000",
-        category_color: "#c94035",
-        category_png: "/assets/png_example2.png"
-    },
-    {
-        title: "Apex",
-        views: "123214",
-        category_color: "#e759ad",
-        category_png: "/assets/png_example3.png"
-    },
-    {
-        title: "Movies",
-        views: "21422",
-        category_color: "#9e66ca",
-        category_png: "/assets/png_example3.png"
-    }
-];
+import { handleGetCategories } from "@/features/stream";
 
 export const CategoriesList = memo(() => {
+    const { isError, error, data, isLoading } = handleGetCategories();
     const router = useRouter();
+    if (isError || isLoading || !data || !data.length) return null;
+
     return (
         <div className="categories-container">
             <SectionHeading>Categories</SectionHeading>
             <div className="list-container">
-                {DUMMY_DATA.map((item) => (
+                {data?.map((item) => (
                     <CategoryCard
                         key={item.title}
                         onClick={() => router.push(`/stream-page/results/category/${item.title}`)}

diff --git a/frontend/widgets/stream-list/live-list/LiveList.js b/frontend/widgets/stream-list/live-list/LiveList.js
@@ -3,74 +3,23 @@ import { handleGetLiveStreams } from "@/features/stream";
 import { VirtualizedCatalog } from "../catalog/VirtualizedCatalog";
 
 const DUMMY_DATA = [
-    {
-        user_id: 1,
-        username: "John Doe",
-        title: "Random Stream",
-        thumbnail: "https://imgv3.fotor.com/images/blog-richtext-image/take-a-picture-with-camera.png",
-        stream_key: "test",
-        viewers: 2141215
-    },
-    {
-        user_id: 2,
-        username: "John Doe",
-        title: "Random Stream5",
-        thumbnail: "https://lifetouch.com/wp-content/uploads/2018/06/Underclass_girlwithbluebg.jpg",
-        stream_key: "test",
-        viewers: 144
-    },
-    {
-        user_id: 3,
-        username: "John Doe",
-        title: "Random Stream2",
-        thumbnail: "https://ichef.bbci.co.uk/news/640/cpsprodpb/15951/production/_117310488_16.jpg",
-        stream_key: "test",
-        viewers: 234124
-    },
-    {
-        user_id: 4,
-        username: "John Doe",
-        title: "Random Stream6",
-        thumbnail: "https://www.pexels.com/photo/45853/download/",
-        stream_key: "test",
-        viewers: 32525
-    },
-    {
-        user_id: 5,
-        username: "John Doe",
-        title: "Random Stream6",
-        thumbnail: "https://www.pexels.com/photo/45853/download/",
-        stream_key: "test",
-        viewers: 32525
-    },
-    {
-        user_id: 6,
-        username: "John Doe",
-        title: "Random Stream6",
-        thumbnail: "https://www.pexels.com/photo/45853/download/",
-        stream_key: "test",
-        viewers: 32525
-    },
-    {
-        user_id: 10,
-        username: "John Doe",
-        title: "Random Stream6 Random Stream6 Random Stream6 Random Stream6 Random Stream6",
-        thumbnail: "https://www.pexels.com/photo/45853/download/",
-        stream_key: "test",
-        viewers: 32525
-    }
+    // {
+    //     user_id: 1,
+    //     username: "John Doe",
+    //     title: "Random Stream",
+    //     thumbnail: "https://imgv3.fotor.com/images/blog-richtext-image/take-a-picture-with-camera.png",
+    //     stream_key: "test",
+    //     viewers: 2141215
+    // },
 ];
 
 export const LiveList = ({ category = "" }) => {
     const { isError, error, isLoading, data } = handleGetLiveStreams(category);
-
-    const DATA = data ? data : DUMMY_DATA;
-
     return (
         <div className="live-list-container">
             <SectionHeading>{category ? category : "Live Now"}</SectionHeading>
             <VirtualizedCatalog
-                data={DATA}
+                data={data}
                 isError={isError}
                 isLoading={isLoading}
                 error={error}