Skip to content

Commit

Permalink
Merge pull request #24 from faisalsayed10/v1.2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
faisalsayed10 authored May 19, 2022
2 parents 81154f2 + 6c24779 commit ff2b121
Show file tree
Hide file tree
Showing 73 changed files with 4,280 additions and 2,317 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ yarn-debug.log*
yarn-error.log*

# local env files
.env
.env.local
.env.development.local
.env.test.local
Expand Down
2 changes: 1 addition & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,4 @@ yarn-error.log*
.env.production.local

# vercel
.vercel
.vercel
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div align="center">
<h1> <img src="https://firefiles.vercel.app/firefiles-logo.png" width="80px"><br/>Firefiles</h1>
<h1> <img src="https://firefiles.vercel.app/logo.png" width="80px"><br/>Firefiles</h1>
</div>
<p align="center"> <a href="https://firefiles.vercel.app" target="_blank"><img alt="" src="https://img.shields.io/badge/Website-EA4C89?style=normal&logo=dribbble&logoColor=white" style="vertical-align:center" /></a> <a href="https://twitter.com/faisal_sayed05" target="_blank"><img alt="" src="https://img.shields.io/badge/Twitter-1DA1F2?style=normal&logo=twitter&logoColor=white" style="vertical-align:center" /></a></p>

Expand Down
89 changes: 43 additions & 46 deletions components/Dashboard.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
import { Box, Center, Divider, Grid, Skeleton, Text, useColorMode } from "@chakra-ui/react";
import FilesEmptyState from "@components/files/FilesEmptyState";
import FilesTable from "@components/files/FilesTable";
import FilesTableSkeleton from "@components/files/FilesTableSkeleton";
import { Box, Center, Divider, Text, useColorMode } from "@chakra-ui/react";
import UploadFileButton from "@components/files/UploadFileButton";
import AddFolderButton from "@components/folders/AddFolderButton";
import Folder from "@components/folders/Folder";
import FolderBreadCrumbs from "@components/folders/FolderBreadCrumbs";
import Navbar from "@components/ui/Navbar";
import useFirebase from "@hooks/useFirebase";
import { CurrentlyUploading } from "@util/types";
import React, { useMemo, useState } from "react";
import useBucket from "@hooks/useBucket";
import useKeys from "@hooks/useKeys";
import { Provider } from "@util/types";
import React, { useEffect, useMemo, useState } from "react";
import Dropzone from "react-dropzone";
import LoadingOverlay from "react-loading-overlay";
import UploadProgress from "./files/UploadProgress";
import GridView from "./GridView";
import ListView from "./ListView";

const baseStyle = {
outline: "none",
Expand All @@ -29,12 +27,21 @@ const activeStyle = {

const Dashboard = () => {
const [draggedFilesToUpload, setDraggedFilesToUpload] = useState<File[]>([]);
const [uploadingFiles, setUploadingFiles] = useState<CurrentlyUploading[]>([]);
const [isDragging, setIsDragging] = useState(false);
const [isFolderDeleting, setIsFolderDeleting] = useState(false);
const { app, appUser, currentFolder, files, folders, loading } = useFirebase();
const { currentFolder, files, folders, loading, uploadingFiles } = useBucket();
const { colorMode } = useColorMode();
const style = useMemo(() => ({ ...baseStyle, ...(isDragging ? activeStyle : {}) }), [isDragging]);
const [gridView, setGridView] = useState(false);

useEffect(() => {
const storedView = localStorage.getItem("grid_view");
if (storedView) setGridView(storedView === "true");
}, []);

useEffect(() => {
localStorage.setItem("grid_view", gridView.toString());
}, [gridView]);

return (
<>
Expand All @@ -48,13 +55,17 @@ const Dashboard = () => {
setDraggedFilesToUpload(files);
setIsDragging(false);
}}
disabled={!app || !appUser}
noClick
onDragOver={() => setIsDragging(true)}
onDragLeave={() => setIsDragging(false)}
>
{({ getRootProps, getInputProps }) => (
<Box {...getRootProps({ style })} minH="93vh">
<Box
{...getRootProps({
style,
})}
minH="93vh"
>
<input {...getInputProps()} />
<Text
hidden={!isDragging}
Expand All @@ -77,45 +88,31 @@ const Dashboard = () => {
<Navbar />
<FolderBreadCrumbs currentFolder={currentFolder} />
<Divider />
{loading ? (
<Grid templateColumns="repeat(auto-fill, minmax(120px, 1fr))" gap={6} my="6" mx="4">
<Skeleton h="110px" w="110px" borderRadius="3px" />
<Skeleton h="110px" w="110px" borderRadius="3px" />
<Skeleton h="110px" w="110px" borderRadius="3px" />
<Skeleton h="110px" w="110px" borderRadius="3px" />
</Grid>
) : (
<Grid templateColumns="repeat(auto-fill, minmax(120px, 1fr))" gap={6} my="6" mx="4">
{folders?.map((f) => (
<Box m="0 auto" key={f.name}>
<Folder setIsFolderDeleting={setIsFolderDeleting} folder={f} />
</Box>
))}
<Box m="0 auto">
<AddFolderButton currentFolder={currentFolder} />
</Box>
</Grid>
)}
<Divider />
<Text fontSize="3xl" fontWeight="600" m="4">
Your Files
</Text>
{files === null || loading ? (
<FilesTableSkeleton />
) : files.length === 0 ? (
<FilesEmptyState />
{!gridView ? (
<ListView
loading={loading}
currentFolder={currentFolder}
files={files}
folders={folders}
setGridView={setGridView}
setIsFolderDeleting={setIsFolderDeleting}
/>
) : (
<FilesTable childFiles={files} />
<GridView
loading={loading}
currentFolder={currentFolder}
files={files}
folders={folders}
setGridView={setGridView}
setIsFolderDeleting={setIsFolderDeleting}
/>
)}
</Box>
)}
</Dropzone>
<UploadFileButton
filesToUpload={draggedFilesToUpload}
setFilesToUpload={setDraggedFilesToUpload}
currentFolder={currentFolder}
uploadingFiles={uploadingFiles}
setUploadingFiles={setUploadingFiles}
/>
</LoadingOverlay>
{uploadingFiles.length > 0 && (
Expand All @@ -129,8 +126,8 @@ const Dashboard = () => {
boxShadow="3.8px 4.1px 6.3px -1.7px rgba(0, 0, 0, 0.2)"
backgroundColor={colorMode === "dark" ? "gray.700" : "white"}
>
{uploadingFiles.map((file) => (
<UploadProgress key={file.id} file={file} setUploadingFiles={setUploadingFiles} />
{uploadingFiles.map((uploading) => (
<UploadProgress key={uploading.id} file={uploading} />
))}
</Box>
</Center>
Expand Down
71 changes: 71 additions & 0 deletions components/GridView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { Box, Flex, Grid, IconButton, Skeleton, Text } from "@chakra-ui/react";
import Folder from "@components/folders/Folder";
import { DriveFile, DriveFolder } from "@util/types";
import React from "react";
import { LayoutList } from "tabler-icons-react";
import File from "./files/File";
import AddFolderButton from "./folders/AddFolderButton";

type Props = {
setGridView: React.Dispatch<React.SetStateAction<boolean>>;
loading: boolean;
currentFolder: DriveFolder;
folders: DriveFolder[];
files: DriveFile[];
setIsFolderDeleting: React.Dispatch<React.SetStateAction<boolean>>;
};

const GridView: React.FC<Props> = (props) => {
return (
<Box mx="4" mb="6">
<Flex align="center" justify="space-between" my="4">
<Text fontSize="3xl" fontWeight="600">
Your Files
</Text>
<IconButton aria-label="change-view" onClick={() => props.setGridView(false)}>
<LayoutList />
</IconButton>
</Flex>
{props.loading ? (
<Grid
templateColumns={[
"repeat(auto-fill, minmax(140px, 1fr))",
"repeat(auto-fill, minmax(160px, 1fr))",
"repeat(auto-fill, minmax(160px, 1fr))",
]}
gap={[2, 6, 6]}
my="6"
mx="4"
>
<Skeleton h="140px" w="full" borderRadius="lg" />
<Skeleton h="140px" w="full" borderRadius="lg" />
<Skeleton h="140px" w="full" borderRadius="lg" />
<Skeleton h="140px" w="full" borderRadius="lg" />
</Grid>
) : (
<Grid
templateColumns={[
"repeat(auto-fill, minmax(140px, 1fr))",
"repeat(auto-fill, minmax(160px, 1fr))",
"repeat(auto-fill, minmax(160px, 1fr))",
]}
gap={[2, 6, 6]}
>
<AddFolderButton key="firefiles-add-folder-btn" currentFolder={props.currentFolder} />
{props.folders?.length > 0 &&
props.folders?.map((folder) => (
<Folder
key={folder.name}
setIsFolderDeleting={props.setIsFolderDeleting}
folder={folder}
/>
))}
{props.files?.length > 0 &&
props.files?.map((file) => <File key={file.name} file={file} gridView={true} />)}
</Grid>
)}
</Box>
);
};

export default GridView;
76 changes: 76 additions & 0 deletions components/ListView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import { Divider, Flex, Grid, IconButton, Skeleton, Text } from "@chakra-ui/react";
import FilesEmptyState from "@components/files/FilesEmptyState";
import FilesTable from "@components/files/FilesTable";
import FilesTableSkeleton from "@components/files/FilesTableSkeleton";
import AddFolderButton from "@components/folders/AddFolderButton";
import Folder from "@components/folders/Folder";
import { DriveFile, DriveFolder } from "@util/types";
import React from "react";
import { LayoutGrid } from "tabler-icons-react";

type Props = {
setGridView: React.Dispatch<React.SetStateAction<boolean>>;
loading: boolean;
currentFolder: DriveFolder;
folders: DriveFolder[];
files: DriveFile[];
setIsFolderDeleting: React.Dispatch<React.SetStateAction<boolean>>;
};

const ListView: React.FC<Props> = (props) => {
return (
<>
{props.loading ? (
<Grid
templateColumns={[
"repeat(auto-fill, minmax(140px, 1fr))",
"repeat(auto-fill, minmax(160px, 1fr))",
"repeat(auto-fill, minmax(160px, 1fr))",
]}
gap={[2, 6, 6]}
my="6"
mx="4"
>
<Skeleton h="140px" w="full" borderRadius="lg" />
<Skeleton h="140px" w="full" borderRadius="lg" />
<Skeleton h="140px" w="full" borderRadius="lg" />
<Skeleton h="140px" w="full" borderRadius="lg" />
</Grid>
) : (
<Grid
templateColumns={[
"repeat(auto-fill, minmax(140px, 1fr))",
"repeat(auto-fill, minmax(160px, 1fr))",
"repeat(auto-fill, minmax(160px, 1fr))",
]}
gap={[2, 6, 6]}
my="6"
mx="4"
>
{props.folders?.map((f) => (
<Folder key={f.name} setIsFolderDeleting={props.setIsFolderDeleting} folder={f} />
))}
<AddFolderButton currentFolder={props.currentFolder} />
</Grid>
)}
<Divider />
<Flex align="center" justify="space-between" m="4">
<Text fontSize="3xl" fontWeight="600">
Your Files
</Text>
<IconButton aria-label="change-view" onClick={() => props.setGridView(true)}>
<LayoutGrid />
</IconButton>
</Flex>
{props.files === null && props.loading ? (
<FilesTableSkeleton />
) : !props.files || props.files?.length === 0 ? (
<FilesEmptyState />
) : (
<FilesTable files={props.files} />
)}
</>
);
};

export default ListView;
Loading

1 comment on commit ff2b121

@vercel
Copy link

@vercel vercel bot commented on ff2b121 May 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

firefiles – ./

usefirefiles.vercel.app
firefiles-fayd.vercel.app
firefiles-git-main-fayd.vercel.app

Please sign in to comment.