🎨 (prettier) create prettier and format code

Author: faisalsayed10

.github/FUNDING.yml

@@ -3,4 +3,4 @@
 open_collective: faisalsayed10
 ko_fi: faisalsayed10
 liberapay: faisalsayed10
-custom: ['https://www.buymeacoffee.com/faisalsayed10']
+custom: ["https://www.buymeacoffee.com/faisalsayed10"]

.prettierignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+.wakatime-*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+	"trailingComma": "es5",
+	"tabWidth": 2,
+	"useTabs": true,
+	"semi": true,
+	"singleQuote": false,
+	"printWidth": 100
+}

README.md

@@ -7,7 +7,6 @@
 
 Get your own file hosting service in minutes. This is the hosted version of Firefiles, Make sure you check the [docs](https://firefiles.vercel.app/docs) before getting started.
 
-
 # Features
 
 Get a Google Drive like interface for your storage buckets!
@@ -24,8 +23,7 @@ Get a Google Drive like interface for your storage buckets!
 
 # Tech Used
 
- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white) ![Firebase](https://img.shields.io/badge/firebase-%23039BE5.svg?style=for-the-badge&logo=firebase) ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
-
+![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![Vercel](https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge&logo=vercel&logoColor=white) ![Firebase](https://img.shields.io/badge/firebase-%23039BE5.svg?style=for-the-badge&logo=firebase) ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
 
 <!-- </> with 💛 by readMD (https://readmd.itsvg.in) -->
 

components/Dashboard.tsx

@@ -16,15 +16,15 @@ import UploadProgress from "./files/UploadProgress";
 
 const baseStyle = {
 	outline: "none",
-	transition: "border .2s ease-in-out"
+	transition: "border .2s ease-in-out",
 };
 
 const activeStyle = {
 	borderWidth: 2,
 	borderRadius: 2,
 	borderStyle: "dashed",
 	borderColor: "#2196f3",
-	backgroundColor: "rgba(0, 0, 0, 0.25)"
+	backgroundColor: "rgba(0, 0, 0, 0.25)",
 };
 
 const Dashboard = () => {

components/files/File.tsx

@@ -8,7 +8,7 @@ import {
 	Text,
 	Tr,
 	useClipboard,
-	useDisclosure
+	useDisclosure,
 } from "@chakra-ui/react";
 import { faCopy, faDownload, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -134,11 +134,11 @@ const File: React.FC<Props> = ({ file }) => {
 						_focus={{ outline: "none", border: "none" }}
 						backgroundColor="gray.700"
 					/>
-						<FilePreview
-							mimetype={data?.contentType}
-							url={`${file_url}?alt=media&token=${data?.downloadTokens}`}
-							file={file}
-						/>
+					<FilePreview
+						mimetype={data?.contentType}
+						url={`${file_url}?alt=media&token=${data?.downloadTokens}`}
+						file={file}
+					/>
 				</ModalContent>
 			</Modal>
 		</>

components/files/FilePreview.tsx

@@ -12,7 +12,7 @@ import {
 	Th,
 	Thead,
 	Tr,
-	useColorMode
+	useColorMode,
 } from "@chakra-ui/react";
 import { faDownload, faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -61,7 +61,7 @@ const FilePreview: React.FC<Props> = ({ mimetype, url, file }) => {
 			fontSize: 13,
 			backgroundColor: colorMode === "light" ? "#FFFFFF" : "#2D3748",
 			overflowY: "auto",
-			fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
+			fontFamily: "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
 		}),
 		[colorMode]
 	);

components/files/FilesEmptyState.tsx

@@ -2,23 +2,23 @@ import { Flex, Text } from "@chakra-ui/react";
 import React from "react";
 
 const FilesEmptyState = () => (
-  <Flex
-    p={["8", "16", "16"]}
-    mx="4"
-    borderWidth="1px"
-    borderRadius="lg"
-    justify="center"
-    direction="column"
-    align="center"
-    textAlign="center"
-  >
-    <Text fontSize={["lg", "xl", "2xl"]} fontWeight="400" mb={8}>
-      There aren't any files
-    </Text>
-    <Text fontSize={["sm", "sm", "md"]} fontWeight="400">
-      Drop a file anywhere on the screen or click the button on the bottom right to upload a file.
-    </Text>
-  </Flex>
+	<Flex
+		p={["8", "16", "16"]}
+		mx="4"
+		borderWidth="1px"
+		borderRadius="lg"
+		justify="center"
+		direction="column"
+		align="center"
+		textAlign="center"
+	>
+		<Text fontSize={["lg", "xl", "2xl"]} fontWeight="400" mb={8}>
+			There aren't any files
+		</Text>
+		<Text fontSize={["sm", "sm", "md"]} fontWeight="400">
+			Drop a file anywhere on the screen or click the button on the bottom right to upload a file.
+		</Text>
+	</Flex>
 );
 
 export default FilesEmptyState;

components/files/FilesTableSkeleton.tsx

@@ -2,31 +2,31 @@ import { Box, Skeleton, Table, Td, Th, Tr } from "@chakra-ui/react";
 import React from "react";
 
 interface Props {
-  width?: string;
+	width?: string;
 }
 
 const SkeletonRow: React.FC<Props> = ({ width }) => (
-  <Box as="tr">
-    <Td>
-      <Skeleton height="5px" width={width} my={3} />
-    </Td>
-    <Td>
-      <Skeleton height="5px" width={width} my={3} />
-    </Td>
-    <Td>
-      <Skeleton height="5px" width={width} my={3} />
-    </Td>
-    <Td>
-      <Skeleton height="5px" width={width} my={3} />
-    </Td>
-    <Td>
-      <Skeleton height="5px" width={width} my={3} />
-    </Td>
-  </Box>
+	<Box as="tr">
+		<Td>
+			<Skeleton height="5px" width={width} my={3} />
+		</Td>
+		<Td>
+			<Skeleton height="5px" width={width} my={3} />
+		</Td>
+		<Td>
+			<Skeleton height="5px" width={width} my={3} />
+		</Td>
+		<Td>
+			<Skeleton height="5px" width={width} my={3} />
+		</Td>
+		<Td>
+			<Skeleton height="5px" width={width} my={3} />
+		</Td>
+	</Box>
 );
 
 const FilesTableSkeleton = () => {
-  return (
+	return (
 		<Box borderWidth="1px" borderRadius="lg" overflowX="auto" mx="4">
 			<Table>
 				<thead>

components/files/UploadFileButton.tsx

@@ -22,7 +22,7 @@ const UploadFileButton: React.FC<Props> = ({
 	filesToUpload,
 	setFilesToUpload,
 	uploadingFiles,
-	setUploadingFiles
+	setUploadingFiles,
 }) => {
 	const { app, appUser, addFile } = useFirebase();
 	const fileInput = useRef<HTMLInputElement>();
@@ -56,7 +56,14 @@ const UploadFileButton: React.FC<Props> = ({
 
 			setUploadingFiles((prev) =>
 				prev.concat([
-					{ id, name: files[i].name, task: uploadTask, state: "running", progress: 0, error: false }
+					{
+						id,
+						name: files[i].name,
+						task: uploadTask,
+						state: "running",
+						progress: 0,
+						error: false,
+					},
 				])
 			);
 
@@ -69,7 +76,7 @@ const UploadFileButton: React.FC<Props> = ({
 								return {
 									...uploadFile,
 									state: snapshot.state,
-									progress: Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100)
+									progress: Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100),
 								};
 							}
 

components/folders/AddFolderButton.tsx

@@ -11,7 +11,7 @@ import {
 	ModalHeader,
 	ModalOverlay,
 	useColorModeValue,
-	useDisclosure
+	useDisclosure,
 } from "@chakra-ui/react";
 import { StorageReference } from "@firebase/storage";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
@@ -57,7 +57,7 @@ const AddFolderButton: React.FC<Props> = ({ currentFolder }) => {
 			root: null,
 			bucket: null,
 			storage: null,
-			parent: null
+			parent: null,
 		};
 
 		addFolder(newFolder);

components/folders/Folder.tsx

@@ -4,7 +4,7 @@ import {
 	faExternalLinkAlt,
 	faFolderOpen,
 	faPlus,
-	faTrash
+	faTrash,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import useFirebase from "@hooks/useFirebase";

components/popups/DeleteAlert.tsx

@@ -5,7 +5,7 @@ import {
 	AlertDialogFooter,
 	AlertDialogHeader,
 	AlertDialogOverlay,
-	Button
+	Button,
 } from "@chakra-ui/react";
 import React from "react";
 

components/popups/FirebaseInput.tsx

@@ -10,7 +10,7 @@ import {
 	FormControl,
 	Link,
 	Text,
-	Textarea
+	Textarea,
 } from "@chakra-ui/react";
 import { LoadingSpinner, Player } from "video-react";
 

components/ui/AddBucketButton.tsx

@@ -9,7 +9,7 @@ import {
 	ModalFooter,
 	ModalHeader,
 	ModalOverlay,
-	useDisclosure
+	useDisclosure,
 } from "@chakra-ui/react";
 import { faArrowLeft, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -68,7 +68,7 @@ const AddBucketButton = () => {
 			toast.promise(promise, {
 				loading: "Creating bucket...",
 				success: "Bucket created successfully.",
-				error: "An error occurred while creating the bucket."
+				error: "An error occurred while creating the bucket.",
 			});
 
 			promise.then(() => {

components/ui/Navbar.tsx

@@ -8,7 +8,7 @@ import {
 	MenuItem,
 	MenuList,
 	Tooltip,
-	useColorMode
+	useColorMode,
 } from "@chakra-ui/react";
 import {
 	faArrowCircleLeft,
@@ -17,7 +17,7 @@ import {
 	faFile,
 	faMoon,
 	faSignOutAlt,
-	faSun
+	faSun,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import useUser from "@hooks/useUser";

hooks/useFirebase.tsx

@@ -7,7 +7,7 @@ import {
 	getAuth,
 	onAuthStateChanged,
 	signInWithEmailAndPassword,
-	User
+	User,
 } from "firebase/auth";
 import { getStorage, list, ref, StorageReference } from "firebase/storage";
 import { nanoid } from "nanoid";
@@ -36,7 +36,7 @@ export const ROOT_FOLDER: StorageReference = {
 	parent: null,
 	root: null,
 	bucket: null,
-	storage: null
+	storage: null,
 };
 
 export default () => useContext(FirebaseContext);
@@ -165,13 +165,13 @@ export const FirebaseProvider: React.FC<Props> = ({ data, fullPath, children })
 				while (results.nextPageToken) {
 					const more = await list(reference, {
 						maxResults: 100,
-						pageToken: results.nextPageToken
+						pageToken: results.nextPageToken,
 					});
 
 					results = {
 						nextPageToken: more.nextPageToken,
 						items: [...results.items, ...more.items],
-						prefixes: [...results.prefixes, ...more.prefixes]
+						prefixes: [...results.prefixes, ...more.prefixes],
 					};
 
 					setFiles(results.items);
@@ -210,7 +210,7 @@ export const FirebaseProvider: React.FC<Props> = ({ data, fullPath, children })
 				addFile,
 				addFolder,
 				removeFile,
-				removeFolder
+				removeFolder,
 			}}
 		>
 			{children}

hooks/useUser.tsx

@@ -6,7 +6,7 @@ import {
 	sendPasswordResetEmail,
 	signInWithEmailAndPassword,
 	signOut,
-	User
+	User,
 } from "firebase/auth";
 import { createContext, useContext, useEffect, useState } from "react";
 import toast from "react-hot-toast";