From 14f5022216978a662682eb8d12379e901398e1dc Mon Sep 17 00:00:00 2001 From: "JuniFruit@github.com" Date: Sun, 6 Aug 2023 22:45:30 +0300 Subject: [PATCH] useQuery frontend fixed --- backend/live/urls.py | 4 +- backend/live/views/category_views.py | 3 +- backend/live/views/stream_views.py | 10 ++- docker-compose-development.yml | 2 + frontend/entities/stream/api/api.js | 5 ++ .../recommended-category-card/CategoryCard.js | 8 +-- .../features/comment/model/commentActions.js | 2 +- frontend/features/post/model/actions.js | 2 +- frontend/features/stream/index.js | 3 +- frontend/features/stream/model/actions.js | 40 ++++++----- frontend/features/user/model/userActions.js | 10 +-- frontend/shared/api/axios.js | 2 +- .../stream-list/catalog/VirtualizedCatalog.js | 3 +- .../stream-list/categories/CategoriesList.js | 32 ++------- .../widgets/stream-list/live-list/LiveList.js | 69 +++---------------- .../user/ui/profile-picture/ProfilePic.js | 5 +- rtmp/nginx.conf | 7 +- 17 files changed, 72 insertions(+), 135 deletions(-) diff --git a/backend/live/urls.py b/backend/live/urls.py index 556c8f2..ea14346 100644 --- 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/", update_category, name='update_category'), path("delete-category/", delete_category, name='delete_category'), - path("start-stream", start_stream), - path("end-stream", end_stream) + path("publish", start_stream), + path("done", end_stream) ] \ No newline at end of file diff --git a/backend/live/views/category_views.py b/backend/live/views/category_views.py index 284da25..6393274 100644 --- 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 index 972f081..d476cc2 100644 --- 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) \ No newline at end of file diff --git a/docker-compose-development.yml b/docker-compose-development.yml index 68f893f..41174c0 100644 --- 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 index 9f149e7..690b89a 100644 --- 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 index 09f61cb..59f12ca 100644 --- 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 (
- +

{title}

-

{formatLargeNumber(views)} views

+ {views > 100 ?

{formatLargeNumber(views)} views

: null}
); diff --git a/frontend/features/comment/model/commentActions.js b/frontend/features/comment/model/commentActions.js index bbe9f3f..28d137c 100644 --- 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 index 53a4af7..a352c97 100644 --- 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 index 64ceab7..c74631c 100644 --- 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 index d9a19f7..cd42699 100644 --- 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,21 +28,14 @@ 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 () => { @@ -43,8 +43,16 @@ export const handleStreamSearch = async (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 index 4eab331..4a8294a 100644 --- 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 index 8cfd7c3..de5a9cf 100644 --- 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 index 13a4ea1..46415b2 100644 --- 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 (
{isError ? ( - {error} + {error?.message} ) : (
{data?.map((item, ind) => ( diff --git a/frontend/widgets/stream-list/categories/CategoriesList.js b/frontend/widgets/stream-list/categories/CategoriesList.js index 6ba6a2b..dc48ccf 100644 --- 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 (
Categories
- {DUMMY_DATA.map((item) => ( + {data?.map((item) => ( 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 index 1280366..62042f9 100644 --- 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 (
{category ? category : "Live Now"} { return (