kamp/pingvin-share
1
0
Fork 0
mirror of https://github.com/stonith404/pingvin-share.git synced 2024-11-04 23:10:13 +01:00
Code

performance: replace tabler-icons-react with react-icons to reduce bundle size

Browse Source
This commit is contained in:
Elias Schneider 2022-10-14 11:59:40 +02:00
parent 247ce92744
commit d906d56b9f
11 changed files with 44 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/package-lock.json generated
View File

@ -26,7 +26,7 @@
"next-pwa": "^5.6.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"tabler-icons-react": "^1.44.0",
"react-icons": "^4.4.0",
"yup": "^0.32.11"
},
"devDependencies": {
@ -6381,6 +6381,14 @@
"react": ">= 16.8 || 18.0.0"
}
},
"node_modules/react-icons": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
"integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -6971,14 +6979,6 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/tabler-icons-react": {
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.44.0.tgz",
"integrity": "sha512-AYQQGl55yVe1KHZl+zyDAAwDOcPknKZNC7vgwmjyvpmz4P5Gjb7DtpsOPa1nB0qMYW5Orsrt+1e4qnRoCKgo6A==",
"peerDependencies": {
"react": ">= 16.8.0"
}
},
"node_modules/tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@ -12479,6 +12479,12 @@
"prop-types": "^15.8.1"
}
},
"react-icons": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.4.0.tgz",
"integrity": "sha512-fSbvHeVYo/B5/L4VhB7sBA1i2tS8MkT0Hb9t2H1AVPkwGfVHLJCqyr2Py9dKMxsyM63Eng1GkdZfbWj+Fmv8Rg==",
"requires": {}
},
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@ -12910,12 +12916,6 @@
"resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
"integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
},
"tabler-icons-react": {
"version": "1.44.0",
"resolved": "https://registry.npmjs.org/tabler-icons-react/-/tabler-icons-react-1.44.0.tgz",
"integrity": "sha512-AYQQGl55yVe1KHZl+zyDAAwDOcPknKZNC7vgwmjyvpmz4P5Gjb7DtpsOPa1nB0qMYW5Orsrt+1e4qnRoCKgo6A==",
"requires": {}
},
"tapable": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",

2
frontend/package.json
View File

@ -27,7 +27,7 @@
"next-pwa": "^5.6.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"tabler-icons-react": "^1.44.0",
"react-icons": "^4.4.0",
"yup": "^0.32.11"
},
"devDependencies": {

6
frontend/src/components/navBar/ActionAvatar.tsx
View File

@ -1,6 +1,6 @@
import { ActionIcon, Avatar, Menu } from "@mantine/core";
import { NextLink } from "@mantine/next";
import { DoorExit, Link } from "tabler-icons-react";
import { TbDoorExit, TbLink } from "react-icons/tb";;
import authService from "../../services/auth.service";
const ActionAvatar = () => {
@ -15,7 +15,7 @@ const ActionAvatar = () => {
<Menu.Item
component={NextLink}
href="/account/shares"
icon={<Link size={14} />}
icon={<TbLink size={14} />}
>
My shares
</Menu.Item>
@ -23,7 +23,7 @@ const ActionAvatar = () => {
onClick={async () => {
authService.signOut();
}}
icon={<DoorExit size={14} />}
icon={<TbDoorExit size={14} />}
>
Sign out
</Menu.Item>

6
frontend/src/components/share/FileList.tsx
View File

@ -1,5 +1,5 @@
import { ActionIcon, Loader, Skeleton, Table } from "@mantine/core";
import { CircleCheck, Download } from "tabler-icons-react";
import { TbCircleCheck, TbDownload } from "react-icons/tb";;
import shareService from "../../services/share.service";
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
@ -39,7 +39,7 @@ const FileList = ({
file.uploadingState != "finished" ? (
<Loader size={22} />
) : (
<CircleCheck color="green" size={22} />
<TbCircleCheck color="green" size={22} />
)
) : (
<ActionIcon
@ -48,7 +48,7 @@ const FileList = ({
await shareService.downloadFile(shareId, file.id);
}}
>
<Download />
<TbDownload />
</ActionIcon>
)}
</td>

6
frontend/src/components/upload/Dropzone.tsx
View File

@ -2,7 +2,7 @@ import { Button, Center, createStyles, Group, Text } from "@mantine/core";
import { Dropzone as MantineDropzone } from "@mantine/dropzone";
import getConfig from "next/config";
import { Dispatch, ForwardedRef, SetStateAction, useRef } from "react";
import { CloudUpload, Upload } from "tabler-icons-react";
import { TbCloudUpload, TbUpload } from "react-icons/tb";;;
import { FileUpload } from "../../types/File.type";
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
import toast from "../../utils/toast.util";
@ -67,7 +67,7 @@ const Dropzone = ({
>
<div style={{ pointerEvents: "none" }}>
<Group position="center">
<CloudUpload size={50} />
<TbCloudUpload size={50} />
</Group>
<Text align="center" weight={700} size="lg" mt="xl">
Upload files
@ -89,7 +89,7 @@ const Dropzone = ({
disabled={isUploading}
onClick={() => openRef.current && openRef.current()}
>
{<Upload />}
{<TbUpload />}
</Button>
</Center>
</div>

4
frontend/src/components/upload/FileList.tsx
View File

@ -1,6 +1,6 @@
import { ActionIcon, Table } from "@mantine/core";
import { Dispatch, SetStateAction } from "react";
import { Trash } from "tabler-icons-react";
import { TbTrash } from "react-icons/tb";;
import { FileUpload } from "../../types/File.type";
import { byteStringToHumanSizeString } from "../../utils/math/byteStringToHumanSizeString.util";
import UploadProgressIndicator from "./UploadProgressIndicator";
@ -28,7 +28,7 @@ const FileList = ({
size={25}
onClick={() => remove(i)}
>
<Trash />
<TbTrash />
</ActionIcon>
) : (
<UploadProgressIndicator progress={file.uploadingProgress} />

6
frontend/src/components/upload/UploadProgressIndicator.tsx
View File

@ -1,5 +1,5 @@
import { RingProgress } from "@mantine/core";
import { CircleCheck, CircleX } from "tabler-icons-react";
import { TbCircleCheck, TbCircleX } from "react-icons/tb";;
const UploadProgressIndicator = ({ progress }: { progress: number }) => {
if (progress > 0 && progress < 100) {
@ -11,9 +11,9 @@ const UploadProgressIndicator = ({ progress }: { progress: number }) => {
/>
);
} else if (progress == 100) {
return <CircleCheck color="green" size={22} />;
return <TbCircleCheck color="green" size={22} />;
} else {
return <CircleX color="red" size={22} />;
return <TbCircleX color="red" size={22} />;
}
};

15
frontend/src/components/upload/showCompletedUploadModal.tsx
View File

@ -1,25 +1,20 @@
import {
ActionIcon,
Button,
Group,
Stack,
Text,
TextInput,
Title
Title,
} from "@mantine/core";
import { useClipboard } from "@mantine/hooks";
import { useModals } from "@mantine/modals";
import { ModalsContextProps } from "@mantine/modals/lib/context";
import moment from "moment";
import { useRouter } from "next/router";
import { Copy } from "tabler-icons-react";
import { TbCopy } from "react-icons/tb";
import { Share } from "../../types/share.type";
import toast from "../../utils/toast.util";
const showCompletedUploadModal = (
modals: ModalsContextProps,
share: Share,
) => {
const showCompletedUploadModal = (modals: ModalsContextProps, share: Share) => {
return modals.openModal({
closeOnClickOutside: false,
withCloseButton: false,
@ -39,7 +34,7 @@ const Body = ({ share }: { share: Share }) => {
const router = useRouter();
const link = `${window.location.origin}/share/${share.id}`;
return (
<Stack align="stretch">
<Stack align="stretch">
<TextInput
variant="filled"
value={link}
@ -50,7 +45,7 @@ const Body = ({ share }: { share: Share }) => {
toast.success("Your link was copied to the keyboard.");
}}
>
<Copy />
<TbCopy />
</ActionIcon>
}
/>

6
frontend/src/pages/account/shares.tsx
View File

@ -16,7 +16,7 @@ import { NextLink } from "@mantine/next";
import moment from "moment";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { Link, Trash } from "tabler-icons-react";
import { TbLink, TbTrash } from "react-icons/tb";;
import Meta from "../../components/Meta";
import useUser from "../../hooks/user.hook";
import shareService from "../../services/share.service";
@ -89,7 +89,7 @@ const MyShares = () => {
);
}}
>
<Link />
<TbLink />
</ActionIcon>
<ActionIcon
color="red"
@ -116,7 +116,7 @@ const MyShares = () => {
});
}}
>
<Trash />
<TbTrash />
</ActionIcon>
</Group>
</td>

5
frontend/src/pages/index.tsx
View File

@ -12,10 +12,9 @@ import { NextLink } from "@mantine/next";
import getConfig from "next/config";
import Image from "next/image";
import { useRouter } from "next/router";
import { Check } from "tabler-icons-react";
import { TbCheck } from "react-icons/tb";
import Meta from "../components/Meta";
import useUser from "../hooks/user.hook";
const { publicRuntimeConfig } = getConfig();
const useStyles = createStyles((theme) => ({
@ -101,7 +100,7 @@ export default function Home() {
size="sm"
icon={
<ThemeIcon size={20} radius="xl">
<Check size={12} />
<TbCheck size={12} />
</ThemeIcon>
}
>

9
frontend/src/utils/toast.util.tsx
View File

@ -1,19 +1,18 @@
import { showNotification } from "@mantine/notifications";
import { Check, X } from "tabler-icons-react";
import { TbCheck, TbX } from "react-icons/tb";
const error = (message: string) =>
showNotification({
icon: <X />,
icon: <TbX />,
color: "red",
radius: "md",
title: "Error",
message: message,
});
const success = (message: string) =>
showNotification({
icon: <Check />,
icon: <TbCheck />,
color: "green",
radius: "md",
title: "Success",