tubearchivist-frontend/src/pages/playlist.tsx

190 lines
6.0 KiB
TypeScript
Raw Normal View History

2022-04-13 18:08:07 +00:00
import { GetServerSideProps } from "next";
import NextImage from "next/image";
import { getSession, useSession } from "next-auth/react";
import { useState } from "react";
import { dehydrate, QueryClient, useQuery } from "react-query";
import { CustomHead } from "../components/CustomHead";
import { Layout } from "../components/Layout";
2022-04-23 18:10:12 +00:00
import { getTAUrl } from "../lib/constants";
2022-04-13 18:08:07 +00:00
import { getPlaylists } from "../lib/getPlaylists";
import IconAdd from "../images/icon-add.svg";
import IconListView from "../images/icon-listview.svg";
import IconGridView from "../images/icon-gridview.svg";
type ViewStyle = "grid" | "list";
2022-04-23 18:10:12 +00:00
const TA_BASE_URL = getTAUrl();
2022-04-13 18:08:07 +00:00
export const getServerSideProps: GetServerSideProps = async (context) => {
const queryClient = new QueryClient();
const session = await getSession(context);
if (!session) {
return {
redirect: {
destination: "/auth/login",
permanent: false,
},
};
}
2022-04-14 20:34:38 +00:00
await queryClient.prefetchQuery(["playlists", session.ta_token.token], () =>
2022-04-13 18:08:07 +00:00
getPlaylists(session.ta_token.token)
);
return {
props: {
dehydratedState: dehydrate(queryClient),
session,
2022-04-13 18:08:07 +00:00
},
};
};
const Playlist = () => {
const { data: session } = useSession();
const {
data: { data: playlists },
error,
isLoading,
2022-04-14 20:34:38 +00:00
} = useQuery(
["playlists", session.ta_token.token],
() => getPlaylists(session.ta_token.token),
{
enabled: !!session.ta_token.token,
}
);
2022-04-13 18:08:07 +00:00
const [viewStyle, setViewStyle] = useState<ViewStyle>("grid");
const handleSetViewstyle = (selectedViewStyle: ViewStyle) => {
setViewStyle(selectedViewStyle);
};
return (
<Layout>
<CustomHead title="Playlist" />
<div className="boxed-content">
<div className="title-split">
<div className="title-bar">
<h1>Playlists</h1>
</div>
<div className="title-split-form">
<NextImage
id="animate-icon"
// onClick="showForm()"
src={IconAdd}
width={45}
height={40}
alt="add-icon"
title="Subscribe to Playlists"
/>
<div className="show-form">
<form id="hidden-form" action="/playlist/" method="post">
{/* {% csrf_token %}
{{ subscribe_form }} */}
<button type="submit">Subscribe</button>
</form>
</div>
</div>
</div>
{/* <div id="notifications" data="playlist"></div> */}
<div className="view-controls">
<div className="toggle">
<span>Show subscribed only:</span>
<div className="toggleBox">
<input
id="show_subed_only"
// onClick="toggleCheckbox(this)"
type="checkbox"
checked
/>
{/* {% if not show_subed_only %} */}
<label htmlFor="" className="ofbtn">
Off
</label>
{/* {% else %} */}
<label htmlFor="" className="onbtn">
On
</label>
{/* {% endif %} */}
</div>
</div>
<div className="view-icons">
<NextImage
src={IconGridView}
width={35}
height={30}
onClick={() => handleSetViewstyle("grid")}
alt="grid view"
/>
<NextImage
src={IconListView}
width={35}
height={30}
onClick={() => handleSetViewstyle("list")}
alt="list view"
/>
</div>
</div>
<div className={`playlist-list ${viewStyle}`}>
{/* {% if results %}
{% for playlist in results %} */}
{!isLoading && !playlists ? (
2022-04-13 18:08:07 +00:00
<h2>No playlists found...</h2>
) : (
playlists?.map((playlist) => {
return (
<div
key={playlist.playlist_id}
className={`playlist-item ${viewStyle}`}
>
<div className="playlist-thumbnail">
<a href="{% url 'playlist_id' playlist.source.playlist_id %}">
<img
2022-04-23 18:10:12 +00:00
src={`${TA_BASE_URL.client}/${playlist.playlist_thumbnail}`}
2022-04-13 18:08:07 +00:00
alt={`${playlist.playlist_id}-thumbnail`}
/>
</a>
</div>
<div className={`playlist-desc ${viewStyle}`}>
<a href="{% url 'channel_id' playlist.source.playlist_channel_id %}">
<h3> {playlist.playlist_channel} </h3>
</a>
<a href="{% url 'playlist_id' playlist.source.playlist_id %}">
<h2> {playlist.playlist_name} </h2>
</a>
<p>Last refreshed: {playlist.playlist_last_refresh} </p>
{/* {% if playlist.source.playlist_subscribed %} */}
<button
className="unsubscribe"
type="button"
id="{{ playlist.source.playlist_id }}"
// onClick="unsubscribe(this.id)"
title="Unsubscribe from {{ playlist.source.playlist_name }}"
>
Unsubscribe
</button>
{/* {% else %} */}
<button
type="button"
id="{{ playlist.source.playlist_id }}"
// onClick="subscribe(this.id)"
title="Subscribe to {{ playlist.source.playlist_name }}"
>
Subscribe
</button>
{/* {% endif %} */}
</div>
</div>
);
})
)}
</div>
</div>
</Layout>
);
};
export default Playlist;