apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(frontend): fix minor styling+linting issues

Browse source
This commit is contained in:
Julian Tölle 2020-05-05 03:19:25 +02:00
parent 1d5cefb447
commit 0abc594db4
2 changed files with 35 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/NavBar.tsx
View file

@ -49,7 +49,7 @@ const NavUserInfo: React.FC<{ user: User }> = ({ user }) => {
<img <img
className="w-6 h-6 rounded-full ml-4" className="w-6 h-6 rounded-full ml-4"
src={user.photo} src={user.photo}
alt="Profile picture of logged in user" alt="Profile of logged in user"
></img> ></img>
)} )}
</div> </div>

61
frontend/src/components/RecentListens.tsx
View file

@ -1,5 +1,5 @@
import { format, formatDistanceToNow } from "date-fns"; import { format, formatDistanceToNow } from "date-fns";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState, useMemo } from "react";
import { Redirect } from "react-router-dom"; import { Redirect } from "react-router-dom";
import { getRecentListens } from "../api/api"; import { getRecentListens } from "../api/api";
import { Listen } from "../api/entities/listen"; import { Listen } from "../api/entities/listen";
@ -17,37 +17,40 @@ export const RecentListens: React.FC = () => {
const [listens, setListens] = useState<Listen[]>([]); const [listens, setListens] = useState<Listen[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
const loadListensForPage = async () => { const loadListensForPage = useMemo(
setIsLoading(true); () => async () => {
setIsLoading(true);
try { try {
const listensFromApi = await getRecentListens({ const listensFromApi = await getRecentListens({
page, page,
limit: LISTENS_PER_PAGE, limit: LISTENS_PER_PAGE,
}); });
if (totalPages !== listensFromApi.meta.totalPages) { if (totalPages !== listensFromApi.meta.totalPages) {
setTotalPages(listensFromApi.meta.totalPages); setTotalPages(listensFromApi.meta.totalPages);
}
setListens(listensFromApi.items);
} catch (err) {
console.error("Error while fetching recent listens:", err);
} finally {
setIsLoading(false);
} }
setListens(listensFromApi.items); },
} catch (err) { [page, totalPages, setIsLoading, setTotalPages, setListens]
console.error("Error while fetching recent listens:", err); );
} finally {
setIsLoading(false);
}
};
useEffect(() => { useEffect(() => {
loadListensForPage(); loadListensForPage();
}, [user, page, totalPages]); }, [loadListensForPage]);
if (!user) { if (!user) {
return <Redirect to="/" />; return <Redirect to="/" />;
} }
return ( return (
<div className="lg:flex lg:justify-center p-4"> <div className="md:flex md:justify-center p-4">
<div className="lg:flex-shrink-0 min-w-full lg:min-w-0 lg:w-2/3 max-w-screen-lg"> <div className="md:flex-shrink-0 min-w-full xl:min-w-0 xl:w-2/3 max-w-screen-lg">
<div className="flex justify-between"> <div className="flex justify-between">
<p className="text-2xl font-normal text-gray-700">Recent listens</p> <p className="text-2xl font-normal text-gray-700">Recent listens</p>
<button <button
@ -71,7 +74,7 @@ export const RecentListens: React.FC = () => {
{listens.length > 0 && ( {listens.length > 0 && (
<div className="table-auto my-2 w-full text-gray-700"> <div className="table-auto my-2 w-full text-gray-700">
{listens.map((listen) => ( {listens.map((listen) => (
<ListenItem listen={listen} /> <ListenItem listen={listen} key={listen.id} />
))} ))}
</div> </div>
)} )}
@ -104,7 +107,7 @@ const Pagination: React.FC<{
> >
Prev Prev
</button> </button>
{pageButtons.map((buttonPage) => {pageButtons.map((buttonPage, i) =>
buttonPage ? ( buttonPage ? (
<button <button
className={`${ className={`${
@ -113,11 +116,15 @@ const Pagination: React.FC<{
: "bg-gray-300 hover:bg-gray-400" : "bg-gray-300 hover:bg-gray-400"
} text-gray-700 font-bold py-2 px-4`} } text-gray-700 font-bold py-2 px-4`}
onClick={() => setPage(buttonPage)} onClick={() => setPage(buttonPage)}
key={i}
> >
{buttonPage} {buttonPage}
</button> </button>
) : ( ) : (
<div className="opacity-50 cursor-default bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-l"> <div
key={i}
className="opacity-50 cursor-default bg-gray-300 text-gray-700 font-bold py-2 px-4 rounded-l"
>
... ...
</div> </div>
) )
@ -143,11 +150,11 @@ const ListenItem: React.FC<{ listen: Listen }> = ({ listen }) => {
}); });
const dateTime = format(new Date(listen.playedAt), "PP p"); const dateTime = format(new Date(listen.playedAt), "PP p");
return ( return (
<div className="hover:bg-gray-100 border-b border-gray-200 lg:flex lg:justify-around text-gray-700 px-4 py-2"> <div className="hover:bg-gray-100 border-b border-gray-200 md:flex md:justify-around text-gray-700 px-4 py-2">
<div className="lg:w-1/3 font-bold">{trackName}</div> <div className="md:w-1/3 font-bold">{trackName}</div>
<div className=" lg:w-1/3">{artists}</div> <div className=" md:w-1/3">{artists}</div>
<div <div
className=" lg:w-1/6 text-gray-500 font-thin text-sm" className="md:w-1/6 text-gray-500 font-thin text-sm"
title={dateTime} title={dateTime}
> >
{timeAgo} {timeAgo}