Skip to content

Commit

Permalink
refactor: modified badge design for count
Browse files Browse the repository at this point in the history
  • Loading branch information
@OwsleyJr
OwsleyJr committed Jul 26, 2023
1 parent 630ebe3 commit b5d92ae
Show file tree
Hide file tree
Showing 13 changed files with 77 additions and 149 deletions.
8 changes: 1 addition & 7 deletions src/components/Common/Badge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,7 @@ interface BadgeProps {
| 'warning'
| 'success'
| 'dark'
| 'light'
| 'gradient';
| 'light';
className?: string;
href?: string;
children: React.ReactNode;
Expand Down Expand Up @@ -67,11 +66,6 @@ const Badge = (
badgeStyle.push('hover:bg-gray-600');
}
break;
case 'gradient':
badgeStyle.push(
'border border-white bg-gradient-to-br from-indigo-600 to-purple-600 !text-indigo-100 shadow-black'
);
break;
default:
badgeStyle.push(
'bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100'
Expand Down
16 changes: 3 additions & 13 deletions src/components/IssueDetails/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,7 @@ import { useRouter } from 'next/router';
import { useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import { useToasts } from 'react-toast-notifications';
import useSWR from 'swr';
import useSWRMutation from 'swr/mutation';
import useSWR, { mutate } from 'swr';
import * as Yup from 'yup';

const messages = defineMessages({
Expand Down Expand Up @@ -105,16 +104,6 @@ const IssueDetails = () => {
(opt) => opt.issueType === issueData?.issueType
);

const fetchIssuesCount = async () => {
const response = await axios.get('/api/v1/request/count');
return response.data;
};

const { trigger: issueTrigger } = useSWRMutation(
'/api/v1/issue/count',
fetchIssuesCount
);

if (!data && !error) {
return <LoadingSpinner />;
}
Expand Down Expand Up @@ -155,7 +144,7 @@ const IssueDetails = () => {
autoDismiss: true,
});
revalidateIssue();
issueTrigger();
mutate('/api/v1/issue/count');
} catch (e) {
addToast(intl.formatMessage(messages.toaststatusupdatefailed), {
appearance: 'error',
Expand All @@ -167,6 +156,7 @@ const IssueDetails = () => {
const deleteIssue = async () => {
try {
await axios.delete(`/api/v1/issue/${issueData.id}`);
mutate('/api/v1/issue/count');

addToast(intl.formatMessage(messages.toastissuedeleted), {
appearance: 'success',
Expand Down
36 changes: 18 additions & 18 deletions src/components/Layout/MobileMenu/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ import { cloneElement, useRef, useState } from 'react';
import { useIntl } from 'react-intl';

interface MobileMenuProps {
pendingRequestsCount?: number;
openIssuesCount?: number;
pendingRequestsCount: number;
openIssuesCount: number;
}

interface MenuLink {
Expand Down Expand Up @@ -170,24 +170,20 @@ const MobileMenu = ({
})}
<span className="ml-2">{link.content}</span>
{link.href === '/requests' &&
pendingRequestsCount &&
pendingRequestsCount > 0 &&
hasPermission(Permission.MANAGE_REQUESTS) && (
<div className="ml-auto">
<Badge badgeType="gradient">
{pendingRequestsCount < 100
? pendingRequestsCount
: '99+'}
<Badge className="rounded-md border-indigo-500 bg-gradient-to-br from-indigo-600 to-purple-600">
{pendingRequestsCount}
</Badge>
</div>
)}
{link.href === '/issues' &&
openIssuesCount &&
openIssuesCount &&
openIssuesCount > 0 &&
hasPermission(Permission.MANAGE_ISSUES) && (
<div className="ml-auto">
<Badge badgeType="gradient">
{openIssuesCount < 100 ? openIssuesCount : '99+'}
<Badge className="rounded-md border-indigo-500 bg-gradient-to-br from-indigo-600 to-purple-600">
{openIssuesCount}
</Badge>
</div>
)}
Expand Down Expand Up @@ -217,14 +213,18 @@ const MobileMenu = ({
}
)}
{link.href === '/requests' &&
pendingRequestsCount &&
pendingRequestsCount > 0 &&
hasPermission(Permission.MANAGE_REQUESTS) && (
<div className="absolute left-3 bottom-2.5">
<span className="inline-flex whitespace-nowrap rounded-full border border-white bg-gradient-to-br from-indigo-600 to-purple-600 px-1 text-xs font-semibold !text-indigo-100 shadow-black">
{pendingRequestsCount < 100
? pendingRequestsCount
: '99+'}
</span>
<div className="absolute left-3 bottom-3">
<Badge
className={`bg-gradient-to-br ${
router.pathname.match(link.activeRegExp)
? 'border-indigo-600 from-indigo-700 to-purple-700'
: 'border-indigo-500 from-indigo-600 to-purple-600'
} !px-0.75 leading-none`}
>
{pendingRequestsCount}
</Badge>
</div>
)}
</a>
Expand Down
34 changes: 22 additions & 12 deletions src/components/Layout/Sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ export const menuMessages = defineMessages({
interface SidebarProps {
open?: boolean;
setClosed: () => void;
pendingRequestsCount?: number;
openIssuesCount?: number;
pendingRequestsCount: number;
openIssuesCount: number;
}

interface SidebarLinkProps {
Expand Down Expand Up @@ -263,26 +263,36 @@ const Sidebar = ({
menuMessages[sidebarLink.messagesKey]
)}
{sidebarLink.messagesKey === 'requests' &&
pendingRequestsCount &&
pendingRequestsCount > 0 &&
hasPermission(Permission.MANAGE_REQUESTS) && (
<div className="ml-auto">
<Badge badgeType="gradient">
{pendingRequestsCount < 100
? pendingRequestsCount
: '99+'}
<Badge
className={`rounded-md bg-gradient-to-br ${
router.pathname.match(
sidebarLink.activeRegExp
)
? 'border-indigo-600 from-indigo-700 to-purple-700'
: 'border-indigo-500 from-indigo-600 to-purple-600'
}`}
>
{pendingRequestsCount}
</Badge>
</div>
)}
{sidebarLink.messagesKey === 'issues' &&
openIssuesCount &&
openIssuesCount > 0 &&
hasPermission(Permission.MANAGE_ISSUES) && (
<div className="ml-auto">
<Badge badgeType="gradient">
{openIssuesCount < 100
? openIssuesCount
: '99+'}
<Badge
className={`rounded-md bg-gradient-to-br ${
router.pathname.match(
sidebarLink.activeRegExp
)
? 'border-indigo-600 from-indigo-700 to-purple-700'
: 'border-indigo-500 from-indigo-600 to-purple-600'
}`}
>
{openIssuesCount}
</Badge>
</div>
)}
Expand Down
27 changes: 12 additions & 15 deletions src/components/Layout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,22 +58,19 @@ const Layout = ({ children }: LayoutProps) => {
<div className="absolute top-0 h-64 w-full bg-gradient-to-bl from-gray-800 to-gray-900">
<div className="relative inset-0 h-full w-full bg-gradient-to-t from-gray-900 to-transparent" />
</div>
{requestResponse && issueResponse && (
<Sidebar
open={isSidebarOpen}
setClosed={() => setSidebarOpen(false)}
pendingRequestsCount={requestResponse.pending}
openIssuesCount={issueResponse.open}
<Sidebar
open={isSidebarOpen}
setClosed={() => setSidebarOpen(false)}
pendingRequestsCount={requestResponse?.pending}
openIssuesCount={issueResponse?.open}
/>
<div className="sm:hidden">
<MobileMenu
pendingRequestsCount={requestResponse?.pending}
openIssuesCount={issueResponse?.open}
/>
)}
{requestResponse && issueResponse && (
<div className="sm:hidden">
<MobileMenu
pendingRequestsCount={requestResponse.pending}
openIssuesCount={issueResponse.open}
/>
</div>
)}
</div>

<div className="relative mb-16 flex w-0 min-w-0 flex-1 flex-col lg:ml-64">
<PullToRefresh />
<div
Expand Down
16 changes: 3 additions & 13 deletions src/components/RequestBlock/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import axios from 'axios';
import Link from 'next/link';
import { useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import useSWRMutation from 'swr/mutation';
import { mutate } from 'swr';

const messages = defineMessages({
seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
Expand Down Expand Up @@ -51,23 +51,13 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
const { profile, rootFolder, server, languageProfile } =
useRequestOverride(request);

const fetchRequestsCount = async () => {
const response = await axios.get('/api/v1/request/count');
return response.data;
};

const { trigger: requestTrigger } = useSWRMutation(
'/api/v1/request/count',
fetchRequestsCount
);

const updateRequest = async (type: 'approve' | 'decline'): Promise<void> => {
setIsUpdating(true);
await axios.post(`/api/v1/request/${request.id}/${type}`);

if (onUpdate) {
onUpdate();
requestTrigger();
mutate('/api/v1/request/count');
}
setIsUpdating(false);
};
Expand All @@ -78,7 +68,7 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {

if (onUpdate) {
onUpdate();
requestTrigger();
mutate('/api/v1/request/count');
}

setIsUpdating(false);
Expand Down
16 changes: 3 additions & 13 deletions src/components/RequestButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import type { MediaRequest } from '@server/entity/MediaRequest';
import axios from 'axios';
import { useMemo, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl';
import useSWRMutation from 'swr/mutation';
import { mutate } from 'swr';

const messages = defineMessages({
viewrequest: 'View Request',
Expand Down Expand Up @@ -90,16 +90,6 @@ const RequestButton = ({
: undefined;
}, [active4kRequests, user]);

const fetchRequestsCount = async () => {
const response = await axios.get('/api/v1/request/count');
return response.data;
};

const { trigger: requestTrigger } = useSWRMutation(
'/api/v1/request/count',
fetchRequestsCount
);

const modifyRequest = async (
request: MediaRequest,
type: 'approve' | 'decline'
Expand All @@ -108,7 +98,7 @@ const RequestButton = ({

if (response) {
onUpdate();
requestTrigger();
mutate('/api/v1/request/count');
}
};

Expand All @@ -127,7 +117,7 @@ const RequestButton = ({
);

onUpdate();
requestTrigger();
mutate('/api/v1/request/count');
};

const buttons: ButtonOption[] = [];
Expand Down
16 changes: 3 additions & 13 deletions src/components/RequestCard/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import { useInView } from 'react-intersection-observer';
import { defineMessages, useIntl } from 'react-intl';
import { useToasts } from 'react-toast-notifications';
import useSWR, { mutate } from 'swr';
import useSWRMutation from 'swr/mutation';

const messages = defineMessages({
seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
Expand Down Expand Up @@ -76,6 +75,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
await axios.delete(`/api/v1/media/${requestData?.media.id}`);
mutate('/api/v1/media?filter=allavailable&take=20&sort=mediaAdded');
mutate('/api/v1/request?filter=all&take=10&sort=modified&skip=0');
mutate('/api/v1/request/count');
};

return (
Expand Down Expand Up @@ -248,29 +248,19 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
iOSPlexUrl4k: requestData?.media?.iOSPlexUrl4k,
});

const fetchRequestsCount = async () => {
const response = await axios.get('/api/v1/request/count');
return response.data;
};

const { trigger: requestTrigger } = useSWRMutation(
'/api/v1/request/count',
fetchRequestsCount
);

const modifyRequest = async (type: 'approve' | 'decline') => {
const response = await axios.post(`/api/v1/request/${request.id}/${type}`);

if (response) {
revalidate();
requestTrigger();
mutate('/api/v1/request/count');
}
};

const deleteRequest = async () => {
await axios.delete(`/api/v1/request/${request.id}`);
mutate('/api/v1/request?filter=all&take=10&sort=modified&skip=0');
requestTrigger();
mutate('/api/v1/request/count');
};

const retryRequest = async () => {
Expand Down
Loading

0 comments on commit b5d92ae

Please sign in to comment.