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
className="w-6 h-6 rounded-full ml-4"
src={user.photo}
alt="Profile picture of logged in user"
alt="Profile of logged in user"
></img>
)}
</div>

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

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