├── .babelrc
├── .gitignore
├── README.md
├── components
    ├── AccessToggle.tsx
    ├── AuthButton.tsx
    ├── AuthDropdown.tsx
    ├── AuthDropdownContent.tsx
    ├── AuthDropdownTrigger.tsx
    ├── CommentRow.tsx
    ├── Comments.tsx
    ├── CurrentFile.tsx
    ├── Dropdown.tsx
    ├── EditFileName.tsx
    ├── EditUserName.tsx
    ├── FileCell.tsx
    ├── FileGrid.tsx
    ├── FileHead.tsx
    ├── FilePreview.tsx
    ├── Footer.tsx
    ├── FooterLink.tsx
    ├── Gradient.tsx
    ├── Head.tsx
    ├── Modal.tsx
    ├── Navbar.tsx
    ├── PDF.tsx
    ├── ProgressCircle.tsx
    ├── RecentlyUploadedFiles.tsx
    ├── Search.tsx
    ├── SignInButton.tsx
    ├── SignOutButton.tsx
    ├── SlackInstallButton.tsx
    ├── Spinner.tsx
    ├── Title.tsx
    ├── UploadButton.tsx
    ├── UploadDrop.tsx
    ├── UploadDropOverlay.tsx
    └── UploadFile.tsx
├── docs
    └── privacy.mdx
├── hooks
    ├── useComments.ts
    ├── useCurrentUser.ts
    ├── useFiles.ts
    ├── useHideOverlays.ts
    ├── useRecentlyUploadedFiles.ts
    ├── useSignIn.ts
    ├── useUpdate.ts
    └── useUser.ts
├── images
    ├── apple-touch-icon.png
    ├── icon-16x16.png
    ├── icon-32x32.png
    ├── icon.svg
    └── safari-pinned-tab.svg
├── lib
    ├── access.ts
    ├── clipBody.ts
    ├── constants.ts
    ├── deleteFile.ts
    ├── editAccess.ts
    ├── editFileName.ts
    ├── editUserName.ts
    ├── firebase
    │   ├── admin.ts
    │   └── index.ts
    ├── getFile.ts
    ├── getFileIcon.ts
    ├── getFileIds.ts
    ├── getFilePredicate.ts
    ├── getFileType.ts
    ├── getFileUrl.ts
    ├── getFiles.ts
    ├── getRecentlyUploadedFiles.ts
    ├── getUser.ts
    ├── getUserFromSlug.ts
    ├── getUserSlug.ts
    ├── getUserSlugs.ts
    ├── newId.ts
    ├── normalize.ts
    ├── normalizeExtension.ts
    ├── signIn.ts
    ├── signOut.ts
    ├── snapshotToComment.ts
    ├── snapshotToFileMeta.ts
    ├── snapshotToUser.ts
    ├── submitComment.ts
    ├── toSlug.ts
    └── uploadFile.ts
├── models
    ├── Comment.ts
    ├── CurrentUser.ts
    ├── FileMeta.ts
    ├── FileType.ts
    └── User.ts
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── pages
    ├── 404.tsx
    ├── [id].tsx
    ├── _app.tsx
    ├── _document.tsx
    ├── api
    │   ├── files
    │   │   ├── [id].ts
    │   │   └── index.ts
    │   └── users
    │   │   ├── id
    │   │       └── [id].ts
    │   │   └── slug
    │   │       └── [slug].ts
    ├── index.tsx
    ├── privacy.tsx
    ├── slack.tsx
    ├── support.tsx
    └── u
    │   └── [slug].tsx
├── public
    ├── browserconfig.xml
    ├── favicon.ico
    ├── images
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   └── mstile-150x150.png
    ├── robots.txt
    └── site.webmanifest
├── state
    ├── comments.ts
    ├── currentFile.ts
    ├── currentUser.ts
    ├── files.ts
    ├── recentlyUploadedFiles.ts
    ├── uploadFile.ts
    └── users.ts
├── styles
    ├── AccessToggle.module.scss
    ├── AuthDropdownContent.module.scss
    ├── AuthDropdownTrigger.module.scss
    ├── CommentRow.module.scss
    ├── Comments.module.scss
    ├── CurrentFile.module.scss
    ├── Dropdown.module.scss
    ├── EditFileName.module.scss
    ├── EditUserName.module.scss
    ├── FileCell.module.scss
    ├── FileGrid.module.scss
    ├── FilePage.module.scss
    ├── FilePreview.module.scss
    ├── Footer.module.scss
    ├── FooterLink.module.scss
    ├── Gradient.module.scss
    ├── Home.module.scss
    ├── Modal.module.scss
    ├── Navbar.module.scss
    ├── NotFound.module.scss
    ├── PDF.module.scss
    ├── Privacy.module.scss
    ├── ProgressCircle.module.scss
    ├── RecentlyUploadedFiles.module.scss
    ├── Search.module.scss
    ├── SignInButton.module.scss
    ├── Slack.module.scss
    ├── Spinner.module.scss
    ├── Support.module.scss
    ├── UploadDropOverlay.module.scss
    ├── UploadFile.module.scss
    ├── UserPage.module.scss
    ├── _colors.scss
    ├── _font.scss
    ├── _sizes.scss
    ├── _spinner.scss
    └── global.scss
└── tsconfig.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"presets": ["next/babel"],
3 | 	"plugins": ["react-optimized-image/plugin"]
4 | }
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | **/*.DS_Store
2 | node_modules/
3 | .vercel/
4 | .next/
5 | out/
6 | .env
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [filein](https://filein.io)
2 | 
3 | > The best way to share files
4 | 
5 | <https://filein.io>
6 | 


--------------------------------------------------------------------------------
/components/AccessToggle.tsx:
--------------------------------------------------------------------------------
 1 | import { ChangeEvent, useCallback } from 'react'
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 3 | import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons'
 4 | import cx from 'classnames'
 5 | 
 6 | import FileMeta from 'models/FileMeta'
 7 | import editAccess from 'lib/editAccess'
 8 | import useUpdate from 'hooks/useUpdate'
 9 | 
10 | import styles from 'styles/AccessToggle.module.scss'
11 | 
12 | /**
13 |  * If the `disabledMessage` is `undefined`, the toggle is not disabled.
14 |  * If `null`, the toggle is disabled with no message.
15 |  * If it's a `string`, the message will be displayed on hover.
16 |  */
17 | export interface AccessToggleProps {
18 | 	className?: string
19 | 	file: FileMeta
20 | 	disabledMessage?: string | null
21 | 	leftIndicator?: boolean
22 | }
23 | 
24 | const AccessToggle = ({ className, file, disabledMessage, leftIndicator = false }: AccessToggleProps) => {
25 | 	const update = useUpdate()
26 | 	const isPublic = file.public
27 | 	
28 | 	const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
29 | 		editAccess(file, event.target.checked)
30 | 		update()
31 | 	}, [file, update])
32 | 	
33 | 	return (
34 | 		<label
35 | 			className={className}
36 | 			aria-label={disabledMessage}
37 | 			data-balloon-pos={disabledMessage ? 'right' : undefined}
38 | 		>
39 | 			<input
40 | 				className={styles.input}
41 | 				disabled={disabledMessage !== undefined}
42 | 				type="checkbox"
43 | 				checked={isPublic}
44 | 				onChange={onChange}
45 | 			/>
46 | 			<span className={cx(styles.icon, {
47 | 				[styles.public]: isPublic,
48 | 				[styles.leftIndicator]: leftIndicator
49 | 			})}>
50 | 				<FontAwesomeIcon icon={isPublic ? faEye : faEyeSlash} />
51 | 			</span>
52 | 		</label>
53 | 	)
54 | }
55 | 
56 | export default AccessToggle
57 | 


--------------------------------------------------------------------------------
/components/AuthButton.tsx:
--------------------------------------------------------------------------------
 1 | import useCurrentUser from 'hooks/useCurrentUser'
 2 | import AuthDropdown from './AuthDropdown'
 3 | import SignInButton from './SignInButton'
 4 | 
 5 | export interface AuthButtonProps {
 6 | 	className?: string
 7 | }
 8 | 
 9 | const AuthButton = ({ className }: AuthButtonProps) => {
10 | 	const currentUser = useCurrentUser()
11 | 	
12 | 	return currentUser
13 | 		? <AuthDropdown className={className} currentUser={currentUser} />
14 | 		: <SignInButton className={className} disabled={currentUser === undefined} />
15 | }
16 | 
17 | export default AuthButton
18 | 


--------------------------------------------------------------------------------
/components/AuthDropdown.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useCallback } from 'react'
 2 | 
 3 | import CurrentUser from 'models/CurrentUser'
 4 | import Dropdown from './Dropdown'
 5 | import AuthDropdownTrigger, { authDropdownTriggerClassName } from './AuthDropdownTrigger'
 6 | import AuthDropdownContent, { authDropdownContentClassName } from './AuthDropdownContent'
 7 | 
 8 | export interface AuthDropdownProps {
 9 | 	className?: string
10 | 	currentUser: CurrentUser
11 | }
12 | 
13 | const AuthDropdown = ({ className, currentUser }: AuthDropdownProps) => {
14 | 	const [isShowing, setIsShowing] = useState(false)
15 | 	
16 | 	const hide = useCallback(() => {
17 | 		setIsShowing(false)
18 | 	}, [setIsShowing])
19 | 	
20 | 	return (
21 | 		<Dropdown
22 | 			isShowing={isShowing}
23 | 			setIsShowing={setIsShowing}
24 | 			rootClassName={className}
25 | 			triggerClassName={authDropdownTriggerClassName}
26 | 			contentClassName={authDropdownContentClassName}
27 | 			trigger={<AuthDropdownTrigger currentUser={currentUser} />}
28 | 		>
29 | 			<AuthDropdownContent currentUser={currentUser} onClick={hide} />
30 | 		</Dropdown>
31 | 	)
32 | }
33 | 
34 | export default AuthDropdown
35 | 


--------------------------------------------------------------------------------
/components/AuthDropdownContent.tsx:
--------------------------------------------------------------------------------
 1 | import { forwardRef, useCallback } from 'react'
 2 | import Link from 'next/link'
 3 | import copy from 'copy-to-clipboard'
 4 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 5 | import { faUser, faSignOutAlt, faShareSquare } from '@fortawesome/free-solid-svg-icons'
 6 | import { toast } from 'react-toastify'
 7 | import cx from 'classnames'
 8 | 
 9 | import CurrentUser from 'models/CurrentUser'
10 | import EditUserName from './EditUserName'
11 | import SignOutButton from './SignOutButton'
12 | 
13 | import styles from 'styles/AuthDropdownContent.module.scss'
14 | 
15 | export interface AuthDropdownContentMyFilesActionProps {
16 | 	href?: string
17 | 	onClick: (() => void) | undefined
18 | }
19 | 
20 | export interface AuthDropdownContentProps {
21 | 	currentUser: CurrentUser
22 | 	onClick?(): void
23 | }
24 | 
25 | const AuthDropdownContentMyFilesAction = forwardRef(({ href, onClick }: AuthDropdownContentMyFilesActionProps, _ref) => (
26 | 	<a className={cx(styles.row, styles.action)} href={href} onClick={onClick} aria-disabled={!href}>
27 | 		<FontAwesomeIcon icon={faUser} />
28 | 		<span className={styles.actionMessage}>My files</span>
29 | 	</a>
30 | ))
31 | 
32 | const AuthDropdownContent = ({ currentUser, onClick }: AuthDropdownContentProps) => {
33 | 	const { data } = currentUser
34 | 	const apiKey = data?.apiKey
35 | 	
36 | 	const copyApiKey = useCallback(() => {
37 | 		copy(apiKey)
38 | 		toast.success('Copied your API key to clipboard')
39 | 	}, [apiKey])
40 | 	
41 | 	return (
42 | 		<>
43 | 			<EditUserName className={styles.row} user={currentUser} />
44 | 			{data
45 | 				? (
46 | 					<Link href={`/u/${data.slug}`} passHref>
47 | 						<AuthDropdownContentMyFilesAction onClick={onClick} />
48 | 					</Link>
49 | 				)
50 | 				: <AuthDropdownContentMyFilesAction onClick={onClick} />
51 | 			}
52 | 			<button className={cx(styles.row, styles.action)} disabled={!apiKey} onClick={copyApiKey}>
53 | 				<FontAwesomeIcon icon={faShareSquare} />
54 | 				<span className={cx(styles.actionMessage, styles.copyApiKeyMessage)}>Copy API key</span>
55 | 			</button>
56 | 			<SignOutButton className={cx(styles.row, styles.action, styles.danger)} onClick={onClick}>
57 | 				<FontAwesomeIcon icon={faSignOutAlt} />
58 | 				<span className={styles.actionMessage}>Sign out</span>
59 | 			</SignOutButton>
60 | 		</>
61 | 	)
62 | }
63 | 
64 | export const authDropdownContentClassName = styles.root
65 | export default AuthDropdownContent
66 | 


--------------------------------------------------------------------------------
/components/AuthDropdownTrigger.tsx:
--------------------------------------------------------------------------------
 1 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 2 | import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 3 | 
 4 | import CurrentUser from 'models/CurrentUser'
 5 | 
 6 | import styles from 'styles/AuthDropdownTrigger.module.scss'
 7 | 
 8 | export interface AuthDropdownTriggerProps {
 9 | 	currentUser: CurrentUser
10 | }
11 | 
12 | const AuthDropdownTrigger = ({ currentUser }: AuthDropdownTriggerProps) => (
13 | 	<>
14 | 		<p className={styles.name}>
15 | 			{currentUser.data?.name ?? currentUser.auth?.displayName}
16 | 		</p>
17 | 		<FontAwesomeIcon icon={faChevronDown} />
18 | 	</>
19 | )
20 | 
21 | export const authDropdownTriggerClassName = styles.root
22 | export default AuthDropdownTrigger
23 | 


--------------------------------------------------------------------------------
/components/CommentRow.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link'
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 3 | import { faChevronRight, faCrown } from '@fortawesome/free-solid-svg-icons'
 4 | import cx from 'classnames'
 5 | 
 6 | import CurrentUser from 'models/CurrentUser'
 7 | import FileMeta from 'models/FileMeta'
 8 | import Comment from 'models/Comment'
 9 | import useUser from 'hooks/useUser'
10 | import useHideOverlays from 'hooks/useHideOverlays'
11 | import Spinner from './Spinner'
12 | 
13 | import styles from 'styles/CommentRow.module.scss'
14 | 
15 | export interface CommentRowProps {
16 | 	currentUser: CurrentUser | null
17 | 	file: FileMeta
18 | 	comments: Comment[]
19 | 	comment: Comment
20 | 	index: number
21 | }
22 | 
23 | const CommentRow = ({ currentUser, file, comments, comment, index }: CommentRowProps) => {
24 | 	const fromSelf = (currentUser?.auth?.uid ?? currentUser?.data?.id) === comment.from
25 | 	const showName = !fromSelf && comments[index - 1]?.from !== comment.from
26 | 	
27 | 	const user = useUser(showName ? comment.from : undefined)
28 | 	const hideOverlays = useHideOverlays()
29 | 	
30 | 	return (
31 | 		<div className={cx(styles.root, {
32 | 			[styles.showName]: showName,
33 | 			[styles.fromSelf]: fromSelf
34 | 		})}>
35 | 			{showName && (user
36 | 				? (
37 | 					<Link href={`/u/${user.slug}`}>
38 | 						<a className={styles.link} onClick={hideOverlays}>
39 | 							<span className={styles.name}>{user.name}</span>
40 | 							<FontAwesomeIcon
41 | 								className={styles.icon}
42 | 								icon={file.owner === user.id ? faCrown : faChevronRight}
43 | 							/>
44 | 						</a>
45 | 					</Link>
46 | 				)
47 | 				: <Spinner className={styles.spinner} />
48 | 			)}
49 | 			<p className={styles.body}>{comment.body}</p>
50 | 		</div>
51 | 	)
52 | }
53 | 
54 | export default CommentRow
55 | 


--------------------------------------------------------------------------------
/components/Comments.tsx:
--------------------------------------------------------------------------------
  1 | import { useRef, useState, useCallback, useEffect, ChangeEvent, FormEvent } from 'react'
  2 | import { toast } from 'react-toastify'
  3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  4 | import { faComment } from '@fortawesome/free-solid-svg-icons'
  5 | import cx from 'classnames'
  6 | 
  7 | import FileMeta from 'models/FileMeta'
  8 | import submitComment from 'lib/submitComment'
  9 | import useSignIn from 'hooks/useSignIn'
 10 | import useCurrentUser from 'hooks/useCurrentUser'
 11 | import useComments from 'hooks/useComments'
 12 | import CommentRow from './CommentRow'
 13 | import Spinner from './Spinner'
 14 | 
 15 | import styles from 'styles/Comments.module.scss'
 16 | 
 17 | export interface CommentsProps {
 18 | 	className?: string
 19 | 	file: FileMeta
 20 | }
 21 | 
 22 | const Comments = ({ className, file }: CommentsProps) => {
 23 | 	const commentsRef = useRef<HTMLDivElement | null>(null)
 24 | 	
 25 | 	const signIn = useSignIn()
 26 | 	const currentUser = useCurrentUser()
 27 | 	const comments = useComments(file)
 28 | 	
 29 | 	const [message, setMessage] = useState('')
 30 | 	const [isLoading, setIsLoading] = useState(currentUser === undefined)
 31 | 	
 32 | 	const uid = currentUser?.auth?.uid ?? currentUser?.data?.id
 33 | 	
 34 | 	const onSubmit = useCallback(async (event: FormEvent<HTMLFormElement>) => {
 35 | 		event.preventDefault()
 36 | 		
 37 | 		if (!uid) {
 38 | 			setIsLoading(true)
 39 | 			
 40 | 			signIn()
 41 | 				.catch(({ message }) => toast.error(message))
 42 | 				.finally(() => setIsLoading(false))
 43 | 			
 44 | 			return
 45 | 		}
 46 | 		
 47 | 		submitComment(uid, file, message)
 48 | 			.catch(({ message }) => toast.error(message))
 49 | 		
 50 | 		setMessage('')
 51 | 	}, [uid, file, message, signIn, setMessage, setIsLoading])
 52 | 	
 53 | 	const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
 54 | 		setMessage(event.target.value)
 55 | 	}, [setMessage])
 56 | 	
 57 | 	useEffect(() => {
 58 | 		setIsLoading(currentUser === undefined)
 59 | 	}, [currentUser, setIsLoading])
 60 | 	
 61 | 	useEffect(() => {
 62 | 		const { current } = commentsRef
 63 | 		
 64 | 		if (current)
 65 | 			current.scrollTop = current.scrollHeight
 66 | 	}, [comments, commentsRef])
 67 | 	
 68 | 	return (
 69 | 		<div className={cx(styles.root, className)}>
 70 | 			<div className={styles.comments} ref={commentsRef}>
 71 | 				{comments && currentUser !== undefined
 72 | 					? comments.length
 73 | 						? comments.map((comment, index) => (
 74 | 							<CommentRow
 75 | 								key={comment.id}
 76 | 								currentUser={currentUser}
 77 | 								file={file}
 78 | 								comments={comments}
 79 | 								comment={comment}
 80 | 								index={index}
 81 | 							/>
 82 | 						))
 83 | 						: <p className={styles.empty}>Be the first one to comment</p>
 84 | 					: <Spinner className={styles.commentsSpinner} />
 85 | 				}
 86 | 			</div>
 87 | 			<form className={styles.form} onSubmit={onSubmit}>
 88 | 				<input
 89 | 					className={styles.input}
 90 | 					disabled={!currentUser}
 91 | 					placeholder={
 92 | 						currentUser === undefined
 93 | 							? undefined
 94 | 							: currentUser
 95 | 								? currentUser.data
 96 | 									? `as ${currentUser.data.name}`
 97 | 									: undefined
 98 | 								: 'You must be signed in to comment'
 99 | 					}
100 | 					value={message}
101 | 					onChange={onChange}
102 | 				/>
103 | 				<FontAwesomeIcon className={styles.inputIcon} icon={faComment} />
104 | 				<button
105 | 					className={styles.button}
106 | 					disabled={isLoading || (currentUser && !message)}
107 | 				>
108 | 					{isLoading
109 | 						? <Spinner className={styles.buttonSpinner} />
110 | 						: currentUser ? 'send' : 'sign in'
111 | 					}
112 | 				</button>
113 | 			</form>
114 | 		</div>
115 | 	)
116 | }
117 | 
118 | export default Comments
119 | 


--------------------------------------------------------------------------------
/components/CurrentFile.tsx:
--------------------------------------------------------------------------------
  1 | import { useCallback, useEffect } from 'react'
  2 | import { useRecoilState } from 'recoil'
  3 | import { useRouter } from 'next/router'
  4 | import Link from 'next/link'
  5 | import { saveAs } from 'file-saver'
  6 | import copy from 'copy-to-clipboard'
  7 | import { toast } from 'react-toastify'
  8 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  9 | import { faChevronRight, faDownload, faLink, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons'
 10 | import cx from 'classnames'
 11 | 
 12 | import getFileUrl from 'lib/getFileUrl'
 13 | import _deleteFile from 'lib/deleteFile'
 14 | import currentFileState from 'state/currentFile'
 15 | import useCurrentUser from 'hooks/useCurrentUser'
 16 | import useUser from 'hooks/useUser'
 17 | import useHideOverlays from 'hooks/useHideOverlays'
 18 | import Modal from './Modal'
 19 | import Title from './Title'
 20 | import AccessToggle from './AccessToggle'
 21 | import FilePreview from './FilePreview'
 22 | import EditFileName from './EditFileName'
 23 | import Spinner from './Spinner'
 24 | import Comments from './Comments'
 25 | 
 26 | import styles from 'styles/CurrentFile.module.scss'
 27 | 
 28 | const CurrentFile = () => {
 29 | 	const [file, setFile] = useRecoilState(currentFileState)
 30 | 	const hideOverlays = useHideOverlays()
 31 | 	
 32 | 	const path = useRouter().asPath
 33 | 	const currentUser = useCurrentUser()
 34 | 	const user = useUser(file?.owner)
 35 | 	
 36 | 	const id = file?.id
 37 | 	const url = file && getFileUrl(file)
 38 | 	const isOwner = currentUser?.auth
 39 | 		? currentUser.auth.uid === file?.owner
 40 | 		: false
 41 | 	
 42 | 	const hide = useCallback(() => {
 43 | 		hideOverlays()
 44 | 		history.replaceState({}, '', path)
 45 | 	}, [path, hideOverlays])
 46 | 	
 47 | 	const setIsShowing = useCallback((isShowing: boolean) => {
 48 | 		if (!isShowing)
 49 | 			hide()
 50 | 	}, [hide])
 51 | 	
 52 | 	const download = useCallback(() => {
 53 | 		if (file)
 54 | 			saveAs(getFileUrl(file, true), file.name)
 55 | 	}, [file])
 56 | 	
 57 | 	const copyLink = useCallback(() => {
 58 | 		if (!url)
 59 | 			return
 60 | 		
 61 | 		copy(url)
 62 | 		toast.success('Copied file to clipboard')
 63 | 	}, [url])
 64 | 	
 65 | 	const deleteFile = useCallback(() => {
 66 | 		if (!(file && window.confirm('Are you sure? You cannot restore a deleted file.')))
 67 | 			return
 68 | 		
 69 | 		_deleteFile(file)
 70 | 			.catch(({ message }) => toast.error(message))
 71 | 		
 72 | 		hide()
 73 | 	}, [file, hide])
 74 | 	
 75 | 	useEffect(() => {
 76 | 		if (id)
 77 | 			history.replaceState({}, '', `/${id}`)
 78 | 	}, [id])
 79 | 	
 80 | 	return (
 81 | 		<Modal className={styles.root} isShowing={file !== null} setIsShowing={setIsShowing}>
 82 | 			{file && <Title>{file.name} - filein</Title>}
 83 | 			<header className={styles.header}>
 84 | 				<p className={styles.headerName}>{file?.name}</p>
 85 | 				{isOwner && <AccessToggle className={styles.accessToggle} file={file} />}
 86 | 				<button className={styles.close} onClick={hide} title="Close">
 87 | 					<FontAwesomeIcon className={styles.closeIcon} icon={faTimes} />
 88 | 				</button>
 89 | 			</header>
 90 | 			<div className={styles.content}>
 91 | 				{file && (
 92 | 					<>
 93 | 						<FilePreview className={styles.preview} file={file} />
 94 | 						<div className={styles.main}>
 95 | 							<div className={styles.info}>
 96 | 								<div className={styles.meta}>
 97 | 									{isOwner
 98 | 										? <EditFileName className={styles.editName} file={file} onEdit={setFile} />
 99 | 										: <p className={styles.name}>{file.name}</p>
100 | 									}
101 | 									<p className={styles.user}>
102 | 										Uploaded by {file.owner
103 | 											? user
104 | 												? (
105 | 													<Link href={`/u/${user.slug}`}>
106 | 														<a className={styles.userLink} onClick={hideOverlays}>
107 | 															<span className={styles.userName}>{user.name}</span>
108 | 															<FontAwesomeIcon
109 | 																className={styles.userIcon}
110 | 																icon={faChevronRight}
111 | 															/>
112 | 														</a>
113 | 													</Link>
114 | 												)
115 | 												: <Spinner className={styles.spinner} />
116 | 											: <span className={styles.userName}>anonymous</span>
117 | 										}
118 | 									</p>
119 | 								</div>
120 | 								<div className={styles.actions}>
121 | 									<button
122 | 										className={cx(styles.action, styles.download)}
123 | 										onClick={download}
124 | 										title="Download"
125 | 									>
126 | 										<FontAwesomeIcon icon={faDownload} />
127 | 									</button>
128 | 									<button
129 | 										className={cx(styles.action, styles.copy)}
130 | 										onClick={copyLink}
131 | 										title="Copy source"
132 | 									>
133 | 										<FontAwesomeIcon icon={faLink} />
134 | 									</button>
135 | 									{isOwner && (
136 | 										<button
137 | 											className={cx(styles.action, styles.delete)}
138 | 											onClick={deleteFile}
139 | 											title="Delete"
140 | 										>
141 | 											<FontAwesomeIcon icon={faTrash} />
142 | 										</button>
143 | 									)}
144 | 								</div>
145 | 							</div>
146 | 							<Comments className={styles.comments} file={file} />
147 | 						</div>
148 | 					</>
149 | 				)}
150 | 			</div>
151 | 		</Modal>
152 | 	)
153 | }
154 | 
155 | export default CurrentFile
156 | 


--------------------------------------------------------------------------------
/components/Dropdown.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, SetStateAction, useCallback, useEffect, useRef } from 'react'
 2 | import cx from 'classnames'
 3 | 
 4 | import styles from 'styles/Dropdown.module.scss'
 5 | 
 6 | export interface DropdownProps {
 7 | 	isShowing: boolean
 8 | 	setIsShowing(isShowing: SetStateAction<boolean>): void
 9 | 	rootClassName?: string
10 | 	triggerClassName?: string
11 | 	contentClassName?: string
12 | 	trigger: ReactNode
13 | 	children: ReactNode
14 | }
15 | 
16 | const Dropdown = ({ isShowing, setIsShowing, rootClassName, triggerClassName, contentClassName, trigger, children }: DropdownProps) => {
17 | 	const triggerRef = useRef<HTMLButtonElement | null>(null)
18 | 	const contentRef = useRef<HTMLDivElement | null>(null)
19 | 	
20 | 	const onClick = useCallback((event: MouseEvent) => {
21 | 		const trigger = triggerRef.current
22 | 		const content = contentRef.current
23 | 		const target = event.target as Node
24 | 		
25 | 		if (!(trigger && content))
26 | 			return
27 | 		
28 | 		if (trigger === target || trigger.contains(target))
29 | 			return setIsShowing(isShowing => !isShowing)
30 | 		
31 | 		if (content === target || content.contains(target))
32 | 			return
33 | 		
34 | 		setIsShowing(false)
35 | 	}, [triggerRef, contentRef, setIsShowing])
36 | 	
37 | 	useEffect(() => {
38 | 		const { body } = document
39 | 		
40 | 		body.addEventListener('click', onClick)
41 | 		return () => body.removeEventListener('click', onClick)
42 | 	}, [onClick])
43 | 	
44 | 	return (
45 | 		<div className={cx(styles.root, rootClassName)}>
46 | 			<button className={cx(styles.trigger, triggerClassName)} ref={triggerRef}>
47 | 				{trigger}
48 | 			</button>
49 | 			<div className={cx(styles.content, contentClassName)} ref={contentRef} aria-hidden={!isShowing}>
50 | 				{children}
51 | 			</div>
52 | 		</div>
53 | 	)
54 | }
55 | 
56 | export default Dropdown
57 | 


--------------------------------------------------------------------------------
/components/EditFileName.tsx:
--------------------------------------------------------------------------------
 1 | import { useRef, useState, useCallback, FormEvent, ChangeEvent } from 'react'
 2 | import { toast } from 'react-toastify'
 3 | 
 4 | import FileMeta from 'models/FileMeta'
 5 | import normalizeExtension from 'lib/normalizeExtension'
 6 | import editFileName from 'lib/editFileName'
 7 | 
 8 | import styles from 'styles/EditFileName.module.scss'
 9 | 
10 | export interface EditFileNameProps {
11 | 	className?: string
12 | 	file: FileMeta
13 | 	onEdit?(file: FileMeta): void
14 | 	disabledMessage?: string
15 | }
16 | 
17 | const EditFileName = ({ className, file, onEdit, disabledMessage }: EditFileNameProps) => {
18 | 	const input = useRef<HTMLInputElement | null>(null)
19 | 	const [name, setName] = useState(file.name)
20 | 	
21 | 	const onSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
22 | 		event.preventDefault()
23 | 		
24 | 		if (name)
25 | 			input.current?.blur()
26 | 	}, [name, input])
27 | 	
28 | 	const onBlur = useCallback(async () => {
29 | 		if (!name)
30 | 			return setName(file.name)
31 | 		
32 | 		const newName = normalizeExtension(file.name, name)
33 | 		
34 | 		if (file.name === newName)
35 | 			return setName(newName)
36 | 		
37 | 		try {
38 | 			await editFileName(file, newName)
39 | 			
40 | 			setName(newName)
41 | 			onEdit?.({ ...file, name: newName })
42 | 			
43 | 			toast.success('Updated name')
44 | 		} catch ({ message }) {
45 | 			toast.error(message)
46 | 		}
47 | 	}, [file, name, setName, onEdit])
48 | 	
49 | 	const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
50 | 		setName(event.target.value)
51 | 	}, [setName])
52 | 	
53 | 	return (
54 | 		<form
55 | 			className={className}
56 | 			onSubmit={onSubmit}
57 | 			aria-label={disabledMessage}
58 | 			data-balloon-pos={disabledMessage ? 'down-left' : undefined}
59 | 		>
60 | 			<input
61 | 				className={styles.input}
62 | 				ref={input}
63 | 				disabled={Boolean(disabledMessage)}
64 | 				placeholder={file.name}
65 | 				value={name}
66 | 				onChange={onChange}
67 | 				onBlur={onBlur}
68 | 			/>
69 | 		</form>
70 | 	)
71 | }
72 | 
73 | export default EditFileName
74 | 


--------------------------------------------------------------------------------
/components/EditUserName.tsx:
--------------------------------------------------------------------------------
 1 | import { useRef, useState, useCallback, FormEvent, ChangeEvent } from 'react'
 2 | import { useSetRecoilState } from 'recoil'
 3 | import { toast } from 'react-toastify'
 4 | 
 5 | import CurrentUser from 'models/CurrentUser'
 6 | import editUserName from 'lib/editUserName'
 7 | import currentUserState from 'state/currentUser'
 8 | 
 9 | import styles from 'styles/EditUserName.module.scss'
10 | 
11 | export interface EditUserNameProps {
12 | 	className?: string
13 | 	user: CurrentUser
14 | }
15 | 
16 | const EditUserName = ({ className, user }: EditUserNameProps) => {
17 | 	const setCurrentUser = useSetRecoilState(currentUserState)
18 | 	
19 | 	const uid = user.auth?.uid ?? user.data?.id
20 | 	const currentName = user.data?.name ?? user.auth?.displayName
21 | 	
22 | 	const input = useRef<HTMLInputElement | null>(null)
23 | 	const [name, setName] = useState(currentName)
24 | 	
25 | 	const onSubmit = useCallback((event: FormEvent<HTMLFormElement>) => {
26 | 		event.preventDefault()
27 | 		
28 | 		if (name)
29 | 			input.current?.blur()
30 | 	}, [name, input])
31 | 	
32 | 	const onBlur = useCallback(async () => {
33 | 		if (!(uid && name) || currentName === name)
34 | 			return
35 | 		
36 | 		try {
37 | 			await editUserName(uid, name)
38 | 			
39 | 			setCurrentUser(currentUser => ({
40 | 				...currentUser,
41 | 				data: { ...currentUser.data, name }
42 | 			}))
43 | 			
44 | 			toast.success('Updated name')
45 | 		} catch ({ message }) {
46 | 			toast.error(message)
47 | 		}
48 | 	}, [uid, currentName, name, setCurrentUser])
49 | 	
50 | 	const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
51 | 		setName(event.target.value)
52 | 	}, [setName])
53 | 	
54 | 	return (
55 | 		<form className={className} onSubmit={onSubmit}>
56 | 			<input
57 | 				className={styles.input}
58 | 				ref={input}
59 | 				placeholder={currentName}
60 | 				value={name}
61 | 				onChange={onChange}
62 | 				onBlur={onBlur}
63 | 			/>
64 | 		</form>
65 | 	)
66 | }
67 | 
68 | export default EditUserName
69 | 


--------------------------------------------------------------------------------
/components/FileCell.tsx:
--------------------------------------------------------------------------------
  1 | import { MouseEvent, useCallback } from 'react'
  2 | import { useSetRecoilState } from 'recoil'
  3 | import dynamic from 'next/dynamic'
  4 | import Link from 'next/link'
  5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  6 | import { faChevronRight, faComment, faVideo } from '@fortawesome/free-solid-svg-icons'
  7 | import cx from 'classnames'
  8 | 
  9 | import FileMeta from 'models/FileMeta'
 10 | import FileType from 'models/FileType'
 11 | import getFileType from 'lib/getFileType'
 12 | import getFileUrl from 'lib/getFileUrl'
 13 | import getFileIcon from 'lib/getFileIcon'
 14 | import currentFileState from 'state/currentFile'
 15 | import useUser from 'hooks/useUser'
 16 | import Spinner from './Spinner'
 17 | 
 18 | import styles from 'styles/FileCell.module.scss'
 19 | 
 20 | const DIMENSION = 300
 21 | const MAX_PREVIEW_SIZE = 100 * 1024 * 1024 // 100 MB
 22 | 
 23 | interface FileCellIconProps {
 24 | 	file: FileMeta
 25 | }
 26 | 
 27 | interface FileCellContentProps {
 28 | 	file: FileMeta
 29 | 	type: FileType
 30 | 	isFallback: boolean
 31 | }
 32 | 
 33 | export interface FileCellProps {
 34 | 	file: FileMeta
 35 | 	owner?: boolean
 36 | }
 37 | 
 38 | const PDF = dynamic(() => import('./PDF'), { ssr: false })
 39 | 
 40 | const stopPropagation = (event: MouseEvent) =>
 41 | 	event.stopPropagation()
 42 | 
 43 | const FileCellIcon = ({ file }: FileCellIconProps) => (
 44 | 	<FontAwesomeIcon className={styles.icon} icon={getFileIcon(file)} />
 45 | )
 46 | 
 47 | const FileCellContent = ({ file, type, isFallback }: FileCellContentProps) => {
 48 | 	if (isFallback)
 49 | 		return <FileCellIcon file={file} />
 50 | 	
 51 | 	switch (type) {
 52 | 		case FileType.Image:
 53 | 			return (
 54 | 				<img
 55 | 					className={styles.imageElement}
 56 | 					src={getFileUrl(file, true)}
 57 | 					alt={file.name}
 58 | 					loading="lazy"
 59 | 					width={DIMENSION}
 60 | 					height={DIMENSION}
 61 | 				/>
 62 | 			)
 63 | 		case FileType.Video:
 64 | 			return (
 65 | 				<>
 66 | 					<FontAwesomeIcon className={styles.videoIcon} icon={faVideo} />
 67 | 					<video className={styles.videoElement} width={DIMENSION} height={DIMENSION}>
 68 | 						<source src={getFileUrl(file, true)} type={file.type} />
 69 | 						Video not supported
 70 | 					</video>
 71 | 				</>
 72 | 			)
 73 | 		case FileType.PDF:
 74 | 			return <PDF className={styles.document} url={file.blob ?? getFileUrl(file, true)} firstPageOnly />
 75 | 		case FileType.Audio:
 76 | 		case FileType.Other:
 77 | 			return <FileCellIcon file={file} />
 78 | 	}
 79 | }
 80 | 
 81 | const FileCell = ({ file, owner = false }: FileCellProps) => {
 82 | 	const setCurrentFile = useSetRecoilState(currentFileState)
 83 | 	const user = useUser(owner ? file.owner : null)
 84 | 	
 85 | 	const type = getFileType(file)
 86 | 	const isFallback = file.size > MAX_PREVIEW_SIZE
 87 | 	
 88 | 	const onClick = useCallback(() => {
 89 | 		setCurrentFile(file)
 90 | 	}, [file, setCurrentFile])
 91 | 	
 92 | 	return (
 93 | 		<div
 94 | 			className={cx(styles.root, styles[type], {
 95 | 				[styles.fallback]: isFallback
 96 | 			})}
 97 | 			onClick={onClick}
 98 | 			role="button"
 99 | 			title={`View ${file.name}`}
100 | 		>
101 | 			<FileCellContent file={file} type={type} isFallback={isFallback} />
102 | 			{owner && file.owner && (
103 | 				<div className={styles.owner}>
104 | 					{user
105 | 						? (
106 | 							<Link href={`/u/${user.slug}`}>
107 | 								<a className={styles.ownerLink} onClick={stopPropagation}>
108 | 									<span className={styles.ownerName}>{user.name}</span>
109 | 									<FontAwesomeIcon className={styles.ownerIcon} icon={faChevronRight} />
110 | 								</a>
111 | 							</Link>
112 | 						)
113 | 						: <Spinner className={styles.ownerSpinner} />
114 | 					}
115 | 				</div>
116 | 			)}
117 | 			<div className={styles.info}>
118 | 				<p className={styles.name}>{file.name}</p>
119 | 				<div className={styles.comments}>
120 | 					<FontAwesomeIcon icon={faComment} />
121 | 					<p className={styles.commentCount}>{file.comments}</p>
122 | 				</div>
123 | 			</div>
124 | 		</div>
125 | 	)
126 | }
127 | 
128 | export default FileCell
129 | 


--------------------------------------------------------------------------------
/components/FileGrid.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from 'react'
 2 | import cx from 'classnames'
 3 | 
 4 | import styles from 'styles/FileGrid.module.scss'
 5 | 
 6 | export interface FilesProps {
 7 | 	className?: string
 8 | 	children?: ReactNode
 9 | }
10 | 
11 | const FileGrid = ({ className, children }: FilesProps) => (
12 | 	<div className={cx(styles.root, className)}>{children}</div>
13 | )
14 | 
15 | export default FileGrid
16 | 


--------------------------------------------------------------------------------
/components/FileHead.tsx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | import FileType from 'models/FileType'
 5 | import getFileType from 'lib/getFileType'
 6 | import getFileUrl from 'lib/getFileUrl'
 7 | import { MAX_FILE_PREVIEW_SIZE } from './FilePreview'
 8 | 
 9 | export interface FileHeadProps {
10 | 	file: FileMeta
11 | }
12 | 
13 | interface FilePreviewHeadProps {
14 | 	file: FileMeta
15 | 	type: FileType
16 | 	url: string
17 | }
18 | 
19 | const getPreloadAs = (file: FileMeta, type: FileType) => {
20 | 	if (file.size > MAX_FILE_PREVIEW_SIZE)
21 | 		return null
22 | 	
23 | 	switch (type) {
24 | 		case FileType.Image:
25 | 			return 'image'
26 | 		case FileType.Video:
27 | 			return 'video'
28 | 		case FileType.Audio:
29 | 			return 'audio'
30 | 		case FileType.PDF:
31 | 			return 'fetch'
32 | 		case FileType.Other:
33 | 			return null
34 | 	}
35 | }
36 | 
37 | const FilePreviewHead = ({ file, type, url }: FilePreviewHeadProps) => {
38 | 	switch (type) {
39 | 		case FileType.Image:
40 | 			return (
41 | 				<Head>
42 | 					<meta key="og-image" property="og:image" content={url} />
43 | 					<meta key="og-image-secure-url" property="og:image:secure_url" content={url} />
44 | 					<meta key="og-image-type" property="og:image:type" content={file.type} />
45 | 					<meta key="og-image-alt" property="og:image:alt" content={file.name} />
46 | 					<meta key="twitter-image" name="twitter:image" content={url} />
47 | 					<meta key="twitter-image-alt" name="twitter:image:alt" content={file.name} />
48 | 				</Head>
49 | 			)
50 | 		case FileType.Video:
51 | 			return (
52 | 				<Head>
53 | 					<meta key="og-video" property="og:video" content={url} />
54 | 					<meta key="og-video-secure-url" property="og:video:secure_url" content={url} />
55 | 					<meta key="og-video-type" property="og:video:type" content={file.type} />
56 | 				</Head>
57 | 			)
58 | 		case FileType.Audio:
59 | 			return (
60 | 				<Head>
61 | 					<meta key="og-audio" property="og:audio" content={url} />
62 | 					<meta key="og-audio-secure-url" property="og:audio:secure_url" content={url} />
63 | 					<meta key="og-audio-type" property="og:audio:type" content={file.type} />
64 | 				</Head>
65 | 			)
66 | 		default:
67 | 			return null
68 | 	}
69 | }
70 | 
71 | const FileHead = ({ file }: FileHeadProps) => {
72 | 	const type = getFileType(file)
73 | 	const url = getFileUrl(file, true)
74 | 	const preloadAs = getPreloadAs(file, type)
75 | 	
76 | 	return (
77 | 		<>
78 | 			{preloadAs && (
79 | 				<Head>
80 | 					<link key={`${file.id}-preload`} rel="preload" href={url} as={preloadAs} />
81 | 				</Head>
82 | 			)}
83 | 			<FilePreviewHead file={file} type={type} url={url} />
84 | 		</>
85 | 	)
86 | }
87 | 
88 | export default FileHead
89 | 


--------------------------------------------------------------------------------
/components/FilePreview.tsx:
--------------------------------------------------------------------------------
 1 | import { useCallback } from 'react'
 2 | import dynamic from 'next/dynamic'
 3 | import copy from 'copy-to-clipboard'
 4 | import { toast } from 'react-toastify'
 5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 6 | import { faShareSquare, faVideo, faVolumeUp } from '@fortawesome/free-solid-svg-icons'
 7 | import cx from 'classnames'
 8 | 
 9 | import FileMeta from 'models/FileMeta'
10 | import FileType from 'models/FileType'
11 | import getFileType from 'lib/getFileType'
12 | import getFileUrl from 'lib/getFileUrl'
13 | import getFileIcon from 'lib/getFileIcon'
14 | 
15 | import styles from 'styles/FilePreview.module.scss'
16 | 
17 | export const MAX_FILE_PREVIEW_SIZE = 150 * 1024 * 1024 // 150 MB
18 | export const CONTENT_CLASS_NAME = 'file-preview-content'
19 | 
20 | interface FilePreviewIconProps {
21 | 	file: FileMeta
22 | }
23 | 
24 | interface FilePreviewContentProps {
25 | 	file: FileMeta
26 | 	type: FileType
27 | 	isFallback: boolean
28 | }
29 | 
30 | export interface FilePreviewProps {
31 | 	className?: string
32 | 	file: FileMeta
33 | }
34 | 
35 | const PDF = dynamic(() => import('./PDF'), { ssr: false })
36 | 
37 | const FilePreviewIcon = ({ file }: FilePreviewIconProps) => (
38 | 	<FontAwesomeIcon className={styles.icon} icon={getFileIcon(file)} />
39 | )
40 | 
41 | const FilePreviewContent = ({ file, type, isFallback }: FilePreviewContentProps) => {
42 | 	if (isFallback)
43 | 		return <FilePreviewIcon file={file} />
44 | 	
45 | 	switch (type) {
46 | 		case FileType.Image:
47 | 			return <img className={cx(styles.imageElement, CONTENT_CLASS_NAME)} src={getFileUrl(file, true)} alt={file.name} />
48 | 		case FileType.Video:
49 | 			return (
50 | 				<video className={cx(styles.videoElement, CONTENT_CLASS_NAME)} controls autoPlay controlsList="nodownload">
51 | 					<source src={getFileUrl(file, true)} type={file.type} />
52 | 					<FontAwesomeIcon className={styles.icon} icon={faVideo} />
53 | 				</video>
54 | 			)
55 | 		case FileType.Audio:
56 | 			return (
57 | 				<>
58 | 					<FontAwesomeIcon className={styles.icon} icon={faVolumeUp} />
59 | 					<audio className={cx(styles.audioElement, CONTENT_CLASS_NAME)} controls autoPlay controlsList="nodownload">
60 | 						<source src={getFileUrl(file, true)} type={file.type} />
61 | 						Audio is not supported
62 | 					</audio>
63 | 				</>
64 | 			)
65 | 		case FileType.PDF:
66 | 			return <PDF className={cx(styles.document, CONTENT_CLASS_NAME)} url={file.blob ?? getFileUrl(file, true)} />
67 | 		case FileType.Other:
68 | 			return <FilePreviewIcon file={file} />
69 | 	}
70 | }
71 | 
72 | const FilePreview = ({ className, file }: FilePreviewProps) => {
73 | 	const type = getFileType(file)
74 | 	const isFallback = file.size > MAX_FILE_PREVIEW_SIZE
75 | 	
76 | 	const onClick = useCallback(() => {
77 | 		copy(`https://filein.io/${file.id}`)
78 | 		toast.success('Copied link to clipboard')
79 | 	}, [file.id])
80 | 	
81 | 	return (
82 | 		<div
83 | 			className={cx(styles.root, styles[type], className, {
84 | 				[styles.fallback]: isFallback
85 | 			})}
86 | 			onClick={onClick}
87 | 			role="button"
88 | 		>
89 | 			<FilePreviewContent file={file} type={type} isFallback={isFallback} />
90 | 			<span className={styles.shareContainer}>
91 | 				<FontAwesomeIcon className={styles.share} icon={faShareSquare} />
92 | 			</span>
93 | 		</div>
94 | 	)
95 | }
96 | 
97 | export default FilePreview
98 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { faGithub } from '@fortawesome/free-brands-svg-icons'
 2 | import { faCode } from '@fortawesome/free-solid-svg-icons'
 3 | import cx from 'classnames'
 4 | 
 5 | import Link from './FooterLink'
 6 | import SlackInstallButton from './SlackInstallButton'
 7 | 
 8 | import styles from 'styles/Footer.module.scss'
 9 | 
10 | export interface FooterProps {
11 | 	className?: string
12 | }
13 | 
14 | const Footer = ({ className }: FooterProps) => (
15 | 	<div className={cx(styles.root, className)}>
16 | 		<footer className={styles.content}>
17 | 			<Link href="https://github.com/kenmueller/filein-frontend" icon={faGithub}>GitHub</Link>
18 | 			<Link href="https://github.com/kenmueller/filein-npm#readme" icon={faCode}>API</Link>
19 | 			<p className={styles.copyright}>
20 | 				Copyright &copy; 2020 <b>filein</b>. All rights reserved.
21 | 			</p>
22 | 			<SlackInstallButton className={styles.slack} />
23 | 		</footer>
24 | 	</div>
25 | )
26 | 
27 | export default Footer
28 | 


--------------------------------------------------------------------------------
/components/FooterLink.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from 'react'
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 3 | import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 4 | 
 5 | import styles from 'styles/FooterLink.module.scss'
 6 | 
 7 | export interface FooterLinkProps {
 8 | 	href: string
 9 | 	icon: IconDefinition
10 | 	children?: ReactNode
11 | }
12 | 
13 | const FooterLink = ({ href, icon, children }: FooterLinkProps) => (
14 | 	<a
15 | 		className={styles.root}
16 | 		href={href}
17 | 		rel="noopener noreferrer"
18 | 		target="_blank"
19 | 	>
20 | 		<FontAwesomeIcon className={styles.icon} icon={icon} />
21 | 		<span>{children}</span>
22 | 	</a>
23 | )
24 | 
25 | export default FooterLink
26 | 


--------------------------------------------------------------------------------
/components/Gradient.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from 'react'
 2 | import cx from 'classnames'
 3 | 
 4 | import styles from 'styles/Gradient.module.scss'
 5 | 
 6 | export interface GradientProps {
 7 | 	className?: string
 8 | 	children?: ReactNode
 9 | }
10 | 
11 | const Gradient = ({ className, children }: GradientProps) => (
12 | 	<div className={styles.root}>
13 | 		<div className={styles.background} />
14 | 		<div className={cx(styles.foreground, className)}>
15 | 			{children}
16 | 		</div>
17 | 	</div>
18 | )
19 | 
20 | export default Gradient
21 | 


--------------------------------------------------------------------------------
/components/Head.tsx:
--------------------------------------------------------------------------------
 1 | import NextHead from 'next/head'
 2 | 
 3 | export interface HeadProps {
 4 | 	url: string
 5 | 	title: string
 6 | 	description: string
 7 | 	storagePreconnect?: boolean
 8 | }
 9 | 
10 | const Head = ({ url, title, description, storagePreconnect = true }: HeadProps) => (
11 | 	<NextHead>
12 | 		<link key="canonical" rel="canonical" href={url} />
13 | 		<meta key="description" name="description" content={description} />
14 | 		<meta key="og-url" property="og:url" content={url} />
15 | 		<meta key="og-title" property="og:title" content={title} />
16 | 		<meta key="og-description" property="og:description" content={description} />
17 | 		<meta key="twitter-title" name="twitter:title" content={title} />
18 | 		<meta key="twitter-description" name="twitter:description" content={description} />
19 | 		<title key="title">{title}</title>
20 | 		
21 | 		<link key="firestore-preconnect" rel="preconnect" href="https://firestore.googleapis.com" />
22 | 		{storagePreconnect && <link key="storage-preconnect" rel="preconnect" href="https://storage.googleapis.com" />}
23 | 	</NextHead>
24 | )
25 | 
26 | export default Head
27 | 


--------------------------------------------------------------------------------
/components/Modal.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, useRef, useCallback, useEffect } from 'react'
 2 | import cx from 'classnames'
 3 | 
 4 | import clipBody from 'lib/clipBody'
 5 | 
 6 | import styles from 'styles/Modal.module.scss'
 7 | 
 8 | export interface ModalProps {
 9 | 	className?: string
10 | 	isShowing: boolean
11 | 	setIsShowing(isShowing: boolean): void
12 | 	children?: ReactNode
13 | }
14 | 
15 | const Modal = ({ className, isShowing, setIsShowing, children }: ModalProps) => {
16 | 	const root = useRef<HTMLDivElement | null>(null)
17 | 	const content = useRef<HTMLDivElement | null>(null)
18 | 	
19 | 	const onClick = useCallback(({ target }: MouseEvent) => {
20 | 		const { current } = content
21 | 		
22 | 		if (current && !(target === current || current.contains(target as Node)))
23 | 			setIsShowing(false)
24 | 	}, [content, setIsShowing])
25 | 	
26 | 	useEffect(() => {
27 | 		const { current } = root
28 | 		
29 | 		if (!current)
30 | 			return
31 | 		
32 | 		current.addEventListener('click', onClick)
33 | 		return () => current.removeEventListener('click', onClick)
34 | 	}, [root, onClick])
35 | 	
36 | 	useEffect(() => {
37 | 		clipBody(isShowing)
38 | 	}, [isShowing])
39 | 	
40 | 	return (
41 | 		<div
42 | 			className={styles.root}
43 | 			ref={root}
44 | 			role="presentation"
45 | 			aria-hidden={!isShowing}
46 | 		>
47 | 			<div className={cx(styles.content, className)} ref={content}>
48 | 				{children}
49 | 			</div>
50 | 		</div>
51 | 	)
52 | }
53 | 
54 | export default Modal
55 | 


--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useCallback, useEffect } from 'react'
 2 | import Link from 'next/link'
 3 | import ProgressBar from 'nextjs-progressbar'
 4 | import { Svg } from 'react-optimized-image'
 5 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 6 | import { faUpload } from '@fortawesome/free-solid-svg-icons'
 7 | import cx from 'classnames'
 8 | 
 9 | import UploadButton from './UploadButton'
10 | import AuthButton from './AuthButton'
11 | 
12 | import icon from 'images/icon.svg'
13 | 
14 | import styles from 'styles/Navbar.module.scss'
15 | 
16 | const Navbar = () => {
17 | 	const [isActive, setIsActive] = useState(false)
18 | 	
19 | 	const onScroll = useCallback(() => {
20 | 		setIsActive(document.documentElement.scrollTop > 0)
21 | 	}, [setIsActive])
22 | 	
23 | 	useEffect(() => {
24 | 		onScroll()
25 | 		window.addEventListener('scroll', onScroll)
26 | 		
27 | 		return () => window.removeEventListener('scroll', onScroll)
28 | 	}, [onScroll])
29 | 	
30 | 	return (
31 | 		<div className={cx(styles.root, { [styles.active]: isActive })}>
32 | 			<ProgressBar color={isActive ? '#08f' : 'white'} />
33 | 			<nav className={styles.content}>
34 | 				<Link href="/">
35 | 					<a className={styles.home}>
36 | 						<Svg className={styles.homeIcon} src={icon} />
37 | 						<span className={styles.homeMessage}>filein</span>
38 | 					</a>
39 | 				</Link>
40 | 				<UploadButton className={styles.upload}>
41 | 					<FontAwesomeIcon icon={faUpload} />
42 | 					<p className={styles.uploadMessage}>Drag anywhere</p>
43 | 				</UploadButton>
44 | 				<AuthButton className={styles.auth} />
45 | 			</nav>
46 | 		</div>
47 | 	)
48 | }
49 | 
50 | export default Navbar
51 | 


--------------------------------------------------------------------------------
/components/PDF.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react'
 2 | import { Document, Page } from 'react-pdf/dist/esm/entry.webpack'
 3 | import { toast } from 'react-toastify'
 4 | import cx from 'classnames'
 5 | 
 6 | import Spinner from './Spinner'
 7 | 
 8 | import styles from 'styles/PDF.module.scss'
 9 | 
10 | export interface PDFProps {
11 | 	className?: string
12 | 	url: Blob | string
13 | 	firstPageOnly?: boolean
14 | }
15 | 
16 | const PDF = ({ className, url, firstPageOnly = false }: PDFProps) => {
17 | 	const [pages, setPages] = useState<number[] | null>(null)
18 | 	const [isLoading, setIsLoading] = useState(true)
19 | 	
20 | 	return (
21 | 		<Document
22 | 			className={cx(className, { [styles.loading]: isLoading })}
23 | 			file={url}
24 | 			loading={<Spinner className={styles.spinner} />}
25 | 			onLoadSuccess={({ numPages }) => {
26 | 				if (!firstPageOnly)
27 | 					setPages(Array.from(new Array(numPages).keys()))
28 | 				
29 | 				setIsLoading(false)
30 | 			}}
31 | 			onLoadError={({ message }) => {
32 | 				setIsLoading(false)
33 | 				toast.error(message)
34 | 			}}
35 | 		>
36 | 			{firstPageOnly
37 | 				? <Page className={styles.page} pageNumber={1} />
38 | 				: pages?.map(page => (
39 | 					<Page key={page} className={styles.page} pageNumber={page + 1} />
40 | 				))
41 | 			}
42 | 		</Document>
43 | 	)
44 | }
45 | 
46 | export default PDF
47 | 


--------------------------------------------------------------------------------
/components/ProgressCircle.tsx:
--------------------------------------------------------------------------------
 1 | import { SVGProps } from 'react'
 2 | import cx from 'classnames'
 3 | 
 4 | import styles from 'styles/ProgressCircle.module.scss'
 5 | 
 6 | export interface ProgressCircleProps extends SVGProps<SVGSVGElement> {
 7 | 	className?: string
 8 | 	value: number
 9 | }
10 | 
11 | const ProgressCircle = ({ className, value, ...props }: ProgressCircleProps) => {
12 | 	const determinant = value * 2.64
13 | 	
14 | 	return (
15 | 		<svg className={cx(styles.root, className)} viewBox="0 0 100 100" {...props}>
16 | 			<circle className={styles.track} cx={50} cy={50} r={42} />
17 | 			<circle
18 | 				className={styles.thumb}
19 | 				cx={50}
20 | 				cy={50}
21 | 				r={42}
22 | 				strokeDasharray={`${determinant} ${264 - determinant}`}
23 | 			/>
24 | 			<text
25 | 				className={styles.value}
26 | 				x={50}
27 | 				y={50}
28 | 				textAnchor="middle"
29 | 				dominantBaseline="middle"
30 | 			>
31 | 				{Math.floor(value)}%
32 | 			</text>
33 | 		</svg>
34 | 	)
35 | }
36 | 
37 | export default ProgressCircle
38 | 


--------------------------------------------------------------------------------
/components/RecentlyUploadedFiles.tsx:
--------------------------------------------------------------------------------
 1 | import { useCallback } from 'react'
 2 | import { useRouter } from 'next/router'
 3 | import cx from 'classnames'
 4 | 
 5 | import FileMeta from 'models/FileMeta'
 6 | import getFilePredicate from 'lib/getFilePredicate'
 7 | import useRecentlyUploadedFiles from 'hooks/useRecentlyUploadedFiles'
 8 | import Search from './Search'
 9 | import FileGrid from './FileGrid'
10 | import FileCell from './FileCell'
11 | 
12 | import styles from 'styles/RecentlyUploadedFiles.module.scss'
13 | 
14 | export interface RecentlyUploadedFilesProps {
15 | 	className?: string
16 | 	files: FileMeta[]
17 | }
18 | 
19 | const RecentlyUploadedFiles = ({ className, files: _files }: RecentlyUploadedFilesProps) => {
20 | 	const router = useRouter()
21 | 	const files = useRecentlyUploadedFiles() ?? _files
22 | 	const query = (router.query.q ?? '') as string
23 | 	
24 | 	const setQuery = useCallback((query: string) => {
25 | 		router.replace(
26 | 			`/${query ? `?q=${encodeURIComponent(query)}` : ''}`,
27 | 			undefined,
28 | 			{ shallow: true }
29 | 		)
30 | 	}, [router])
31 | 	
32 | 	return (
33 | 		<div className={cx(styles.root, className)}>
34 | 			<Search
35 | 				placeholder="Recently uploaded files"
36 | 				value={query}
37 | 				setValue={setQuery}
38 | 			/>
39 | 			<FileGrid className={styles.files}>
40 | 				{files?.filter(getFilePredicate(query)).map(file => (
41 | 					<FileCell key={file.id} file={file} owner />
42 | 				))}
43 | 			</FileGrid>
44 | 		</div>
45 | 	)
46 | }
47 | 
48 | export default RecentlyUploadedFiles
49 | 


--------------------------------------------------------------------------------
/components/Search.tsx:
--------------------------------------------------------------------------------
 1 | import { ChangeEvent, useCallback } from 'react'
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 3 | import { faSearch } from '@fortawesome/free-solid-svg-icons'
 4 | import cx from 'classnames'
 5 | 
 6 | import styles from 'styles/Search.module.scss'
 7 | 
 8 | export interface SearchProps {
 9 | 	className?: string
10 | 	placeholder: string
11 | 	value: string
12 | 	setValue(value: string): void
13 | }
14 | 
15 | const Search = ({ className, placeholder, value, setValue }: SearchProps) => {
16 | 	const onChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
17 | 		setValue(event.target.value)
18 | 	}, [setValue])
19 | 	
20 | 	return (
21 | 		<div className={cx(styles.root, className)}>
22 | 			<input
23 | 				className={styles.input}
24 | 				placeholder={placeholder}
25 | 				value={value}
26 | 				onChange={onChange}
27 | 			/>
28 | 			<FontAwesomeIcon className={styles.icon} icon={faSearch} />
29 | 		</div>
30 | 	)
31 | }
32 | 
33 | export default Search
34 | 


--------------------------------------------------------------------------------
/components/SignInButton.tsx:
--------------------------------------------------------------------------------
 1 | import { useState, useCallback } from 'react'
 2 | import { toast } from 'react-toastify'
 3 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 4 | import { faGoogle } from '@fortawesome/free-brands-svg-icons'
 5 | import cx from 'classnames'
 6 | 
 7 | import useSignIn from 'hooks/useSignIn'
 8 | import Spinner from './Spinner'
 9 | 
10 | import styles from 'styles/SignInButton.module.scss'
11 | 
12 | export interface SignInButtonProps {
13 | 	className?: string
14 | 	disabled: boolean
15 | }
16 | 
17 | const SignInButton = ({ className, disabled }: SignInButtonProps) => {
18 | 	const signIn = useSignIn()
19 | 	const [isLoading, setIsLoading] = useState(false)
20 | 	
21 | 	const onClick = useCallback(async () => {
22 | 		if (disabled || isLoading)
23 | 			return
24 | 		
25 | 		setIsLoading(true)
26 | 		
27 | 		try {
28 | 			if (!await signIn())
29 | 				setIsLoading(false)
30 | 		} catch ({ message }) {
31 | 			setIsLoading(false)
32 | 			toast.error(message)
33 | 		}
34 | 	}, [disabled, isLoading, signIn, setIsLoading])
35 | 	
36 | 	return (
37 | 		<button
38 | 			className={cx(styles.root, className)}
39 | 			disabled={disabled || isLoading}
40 | 			onClick={onClick}
41 | 		>
42 | 			{disabled || isLoading
43 | 				? <Spinner className={styles.spinner} />
44 | 				: (
45 | 					<>
46 | 						<FontAwesomeIcon icon={faGoogle} />
47 | 						<p className={styles.message}>Sign in</p>
48 | 					</>
49 | 				)
50 | 			}
51 | 		</button>
52 | 	)
53 | }
54 | 
55 | export default SignInButton
56 | 


--------------------------------------------------------------------------------
/components/SignOutButton.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, useState, useCallback } from 'react'
 2 | import { toast } from 'react-toastify'
 3 | 
 4 | import signOut from 'lib/signOut'
 5 | 
 6 | export interface SignOutButtonProps {
 7 | 	className?: string
 8 | 	onClick?(): void
 9 | 	children?: ReactNode
10 | }
11 | 
12 | const SignOutButton = ({ className, onClick: _onClick, children }: SignOutButtonProps) => {
13 | 	const [isLoading, setIsLoading] = useState(false)
14 | 	
15 | 	const onClick = useCallback(async () => {
16 | 		if (isLoading)
17 | 			return
18 | 		
19 | 		try {
20 | 			_onClick()
21 | 			
22 | 			setIsLoading(true)
23 | 			await signOut()
24 | 		} catch ({ message }) {
25 | 			setIsLoading(false)
26 | 			toast.error(message)
27 | 		}
28 | 	}, [isLoading, setIsLoading, _onClick])
29 | 	
30 | 	return (
31 | 		<button className={className} disabled={isLoading} onClick={onClick}>
32 | 			{children}
33 | 		</button>
34 | 	)
35 | }
36 | 
37 | export default SignOutButton
38 | 


--------------------------------------------------------------------------------
/components/SlackInstallButton.tsx:
--------------------------------------------------------------------------------
 1 | export interface SlackInstallButtonProps {
 2 | 	className?: string
 3 | }
 4 | 
 5 | const SlackInstallButton = ({ className }: SlackInstallButtonProps) => (
 6 | 	<a className={className} href={process.env.NEXT_PUBLIC_SLACK_INSTALL_URL} rel="noopener noreferrer" target="_blank">
 7 | 		<img
 8 | 			src="https://platform.slack-edge.com/img/add_to_slack.png"
 9 | 			srcSet="https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack@2x.png 2x"
10 | 			alt="Add to Slack"
11 | 			height={40}
12 | 			width={139}
13 | 		/>
14 | 	</a>
15 | )
16 | 
17 | export default SlackInstallButton
18 | 


--------------------------------------------------------------------------------
/components/Spinner.tsx:
--------------------------------------------------------------------------------
 1 | import cx from 'classnames'
 2 | 
 3 | import styles from 'styles/Spinner.module.scss'
 4 | 
 5 | export interface SpinnerProps {
 6 | 	className: string
 7 | }
 8 | 
 9 | const Spinner = ({ className }: SpinnerProps) => (
10 | 	<span className={cx(styles.root, className)} />
11 | )
12 | 
13 | export default Spinner
14 | 


--------------------------------------------------------------------------------
/components/Title.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode } from 'react'
 2 | import Head from 'next/head'
 3 | 
 4 | export interface TitleProps {
 5 | 	children: ReactNode
 6 | }
 7 | 
 8 | const Title = ({ children }: TitleProps) => (
 9 | 	<Head>
10 | 		<title key="title">{children}</title>
11 | 	</Head>
12 | )
13 | 
14 | export default Title
15 | 


--------------------------------------------------------------------------------
/components/UploadButton.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, useCallback } from 'react'
 2 | import { useSetRecoilState } from 'recoil'
 3 | import { useDropzone } from 'react-dropzone'
 4 | 
 5 | import uploadFileState from 'state/uploadFile'
 6 | 
 7 | export interface UploadButtonProps {
 8 | 	className?: string
 9 | 	children?: ReactNode
10 | }
11 | 
12 | const UploadButton = ({ className, children }: UploadButtonProps) => {
13 | 	const uploadFile = useSetRecoilState(uploadFileState)
14 | 	
15 | 	const onDrop = useCallback((files: File[]) => {
16 | 		const file = files[0]
17 | 		
18 | 		if (file)
19 | 			uploadFile(file)
20 | 	}, [uploadFile])
21 | 	
22 | 	const { getRootProps, getInputProps } = useDropzone({
23 | 		onDrop,
24 | 		noDrag: true,
25 | 		multiple: false
26 | 	})
27 | 	
28 | 	return (
29 | 		<div {...getRootProps({ className, role: 'button' })}>
30 | 			<input {...getInputProps()} />
31 | 			{children}
32 | 		</div>
33 | 	)
34 | }
35 | 
36 | export default UploadButton
37 | 


--------------------------------------------------------------------------------
/components/UploadDrop.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, useCallback } from 'react'
 2 | import { useSetRecoilState } from 'recoil'
 3 | import { useDropzone } from 'react-dropzone'
 4 | 
 5 | import uploadFileState from 'state/uploadFile'
 6 | import UploadDropOverlay from './UploadDropOverlay'
 7 | 
 8 | export interface UploadDropProps {
 9 | 	children?: ReactNode
10 | }
11 | 
12 | const UploadDrop = ({ children }: UploadDropProps) => {
13 | 	const setFile = useSetRecoilState(uploadFileState)
14 | 	
15 | 	const onDrop = useCallback((files: File[]) => {
16 | 		const file = files[0]
17 | 		if (file) setFile(file)
18 | 	}, [setFile])
19 | 	
20 | 	const onDragEnter = useCallback(() => {
21 | 		setFile(null)
22 | 	}, [setFile])
23 | 	
24 | 	const { getRootProps, getInputProps, isDragActive } = useDropzone({
25 | 		onDrop,
26 | 		onDragEnter,
27 | 		noClick: true,
28 | 		multiple: false
29 | 	})
30 | 	
31 | 	return (
32 | 		<div {...getRootProps()}>
33 | 			<input {...getInputProps()} />
34 | 			<UploadDropOverlay active={isDragActive} />
35 | 			{children}
36 | 		</div>
37 | 	)
38 | }
39 | 
40 | export default UploadDrop
41 | 


--------------------------------------------------------------------------------
/components/UploadDropOverlay.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 3 | import { faUpload } from '@fortawesome/free-solid-svg-icons'
 4 | 
 5 | import clipBody from 'lib/clipBody'
 6 | 
 7 | import styles from 'styles/UploadDropOverlay.module.scss'
 8 | 
 9 | export interface UploadDropOverlayProps {
10 | 	active: boolean
11 | }
12 | 
13 | const UploadDropOverlay = ({ active }: UploadDropOverlayProps) => {
14 | 	useEffect(() => {
15 | 		clipBody(active)
16 | 	}, [active])
17 | 	
18 | 	return (
19 | 		<div className={styles.root} role="presentation" aria-hidden={!active}>
20 | 			<FontAwesomeIcon icon={faUpload} />
21 | 			<p className={styles.message}>Drop file</p>
22 | 		</div>
23 | 	)
24 | }
25 | 
26 | export default UploadDropOverlay
27 | 


--------------------------------------------------------------------------------
/components/UploadFile.tsx:
--------------------------------------------------------------------------------
  1 | import { useCallback, useEffect, useState } from 'react'
  2 | import { useRecoilValue } from 'recoil'
  3 | import { useRouter } from 'next/router'
  4 | import { saveAs } from 'file-saver'
  5 | import copy from 'copy-to-clipboard'
  6 | import { toast } from 'react-toastify'
  7 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  8 | import { faDownload, faLink, faTimes, faTrash } from '@fortawesome/free-solid-svg-icons'
  9 | import cx from 'classnames'
 10 | 
 11 | import FileMeta from 'models/FileMeta'
 12 | import uploadFile from 'lib/uploadFile'
 13 | import _deleteFile from 'lib/deleteFile'
 14 | import getFileUrl from 'lib/getFileUrl'
 15 | import uploadFileState from 'state/uploadFile'
 16 | import useCurrentUser from 'hooks/useCurrentUser'
 17 | import useHideOverlays from 'hooks/useHideOverlays'
 18 | import Modal from './Modal'
 19 | import Title from './Title'
 20 | import AccessToggle from './AccessToggle'
 21 | import ProgressCircle from './ProgressCircle'
 22 | import FilePreview from './FilePreview'
 23 | import EditFileName from './EditFileName'
 24 | import Comments from './Comments'
 25 | 
 26 | import styles from 'styles/UploadFile.module.scss'
 27 | 
 28 | const UploadFile = () => {
 29 | 	const path = useRouter().asPath
 30 | 	const currentUser = useCurrentUser()
 31 | 	const hideOverlays = useHideOverlays()
 32 | 	
 33 | 	const file = useRecoilValue(uploadFileState)
 34 | 	const [fileMeta, setFileMeta] = useState<FileMeta | null>(null)
 35 | 	const [progress, setProgress] = useState(0)
 36 | 	
 37 | 	const isComplete = progress === 100
 38 | 	const uid = currentUser && currentUser.auth?.uid
 39 | 	const id = fileMeta?.id
 40 | 	const url = fileMeta && getFileUrl(fileMeta)
 41 | 	const name = fileMeta?.name ?? file?.name
 42 | 	
 43 | 	const hide = useCallback(() => {
 44 | 		hideOverlays()
 45 | 		history.replaceState({}, '', path)
 46 | 	}, [path, hideOverlays])
 47 | 	
 48 | 	const setIsShowing = useCallback((isShowing: boolean) => {
 49 | 		if (!isShowing)
 50 | 			hide()
 51 | 	}, [hide])
 52 | 	
 53 | 	const download = useCallback(() => {
 54 | 		if (file && fileMeta)
 55 | 			saveAs(file, fileMeta.name)
 56 | 	}, [file, fileMeta])
 57 | 	
 58 | 	const copyLink = useCallback(() => {
 59 | 		if (!url)
 60 | 			return
 61 | 		
 62 | 		copy(url)
 63 | 		toast.success('Copied file to clipboard')
 64 | 	}, [url])
 65 | 	
 66 | 	const deleteFile = useCallback(() => {
 67 | 		if (!(fileMeta && window.confirm('Are you sure? You cannot restore a deleted file.')))
 68 | 			return
 69 | 		
 70 | 		_deleteFile(fileMeta)
 71 | 			.catch(({ message }) => toast.error(message))
 72 | 		
 73 | 		hide()
 74 | 	}, [fileMeta, hide])
 75 | 	
 76 | 	useEffect(() => { // Reset
 77 | 		if (file)
 78 | 			return
 79 | 		
 80 | 		setFileMeta(null)
 81 | 		setProgress(0)
 82 | 	}, [file, setFileMeta, setProgress])
 83 | 	
 84 | 	useEffect(() => { // Upload
 85 | 		if (!file || uid === undefined)
 86 | 			return
 87 | 		
 88 | 		uploadFile(file, uid, setProgress)
 89 | 			.then(setFileMeta)
 90 | 			.catch(({ message }) => toast.error(message))
 91 | 	}, [uid, file, setFileMeta, setProgress])
 92 | 	
 93 | 	useEffect(() => {
 94 | 		if (id)
 95 | 			history.replaceState({}, '', `/${id}`)
 96 | 	}, [id])
 97 | 	
 98 | 	useEffect(copyLink, [copyLink])
 99 | 	
100 | 	return (
101 | 		<Modal className={styles.root} isShowing={file !== null} setIsShowing={setIsShowing}>
102 | 			{name && <Title>{name} - filein</Title>}
103 | 			<header className={styles.header}>
104 | 				<p className={styles.headerName}>{name}</p>
105 | 				{fileMeta && (
106 | 					<AccessToggle
107 | 						className={styles.accessToggle}
108 | 						file={fileMeta}
109 | 						disabledMessage={currentUser ? undefined : 'Sign in to upload private files'}
110 | 					/>
111 | 				)}
112 | 				<button className={styles.close} onClick={hide} title="Close">
113 | 					<FontAwesomeIcon className={styles.closeIcon} icon={faTimes} />
114 | 				</button>
115 | 			</header>
116 | 			<div className={styles.content}>
117 | 				<ProgressCircle
118 | 					className={styles.progress}
119 | 					value={progress}
120 | 					aria-hidden={isComplete}
121 | 				/>
122 | 				<div className={styles.summary} aria-hidden={!isComplete}>
123 | 					{fileMeta && (
124 | 						<>
125 | 							<FilePreview className={styles.preview} file={fileMeta} />
126 | 							<div className={styles.main}>
127 | 								<div className={styles.info}>
128 | 									<EditFileName
129 | 										className={styles.editName}
130 | 										file={fileMeta}
131 | 										onEdit={setFileMeta}
132 | 										disabledMessage={currentUser ? undefined : 'Sign in to edit filenames'}
133 | 									/>
134 | 									<div className={styles.actions}>
135 | 										<button
136 | 											className={cx(styles.action, styles.download)}
137 | 											onClick={download}
138 | 											title="Download"
139 | 										>
140 | 											<FontAwesomeIcon icon={faDownload} />
141 | 										</button>
142 | 										<button
143 | 											className={cx(styles.action, styles.copy)}
144 | 											onClick={copyLink}
145 | 											title="Copy source"
146 | 										>
147 | 											<FontAwesomeIcon icon={faLink} />
148 | 										</button>
149 | 										{uid && (
150 | 											<button
151 | 												className={cx(styles.action, styles.delete)}
152 | 												onClick={deleteFile}
153 | 												title="Delete"
154 | 											>
155 | 												<FontAwesomeIcon icon={faTrash} />
156 | 											</button>
157 | 										)}
158 | 									</div>
159 | 								</div>
160 | 								<Comments className={styles.comments} file={fileMeta} />
161 | 							</div>
162 | 						</>
163 | 					)}
164 | 				</div>
165 | 			</div>
166 | 		</Modal>
167 | 	)
168 | }
169 | 
170 | export default UploadFile
171 | 


--------------------------------------------------------------------------------
/docs/privacy.mdx:
--------------------------------------------------------------------------------
  1 | Last updated February 25, 2020
  2 | 
  3 | Thank you for choosing to be part of our community at filein ("Company", "we", "us", or "our"). We are committed to protecting your personal information and your right to privacy. If you have any questions or concerns about our notice, or our practices with regards to your personal information, please contact us at kenmueller0@gmail.com.
  4 | 
  5 | When you visit our mobile application, and use our services, you trust us with your personal information. We take your privacy very seriously. In this privacy notice, we seek to explain to you in the clearest way possible what information we collect, how we use it and what rights you have in relation to it. We hope you take some time to read through it carefully, as it is important. If there are any terms in this privacy notice that you do not agree with, please discontinue use of our Apps and our services.
  6 | 
  7 | This privacy notice applies to all information collected through our mobile application, ("Apps"), and/or any related services, sales, marketing or events (we refer to them collectively in this privacy notice as the "Services").
  8 | 
  9 | Please read this privacy notice carefully as it will help you make informed decisions about sharing your personal information with us.
 10 |  
 11 | TABLE OF CONTENTS
 12 | 
 13 | 1. WHAT INFORMATION DO WE COLLECT?
 14 | 2. HOW DO WE USE YOUR INFORMATION?
 15 | 3. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
 16 | 4. DO WE USE COOKIES AND OTHER TRACKING TECHNOLOGIES?
 17 | 5. HOW LONG DO WE KEEP YOUR INFORMATION?
 18 | 6. HOW DO WE KEEP YOUR INFORMATION SAFE?
 19 | 7. DO WE COLLECT INFORMATION FROM MINORS?
 20 | 8. WHAT ARE YOUR PRIVACY RIGHTS?
 21 | 9. CONTROLS FOR DO-NOT-TRACK FEATURES
 22 | 10. DO CALIFORNIA RESIDENTS HAVE SPECIFIC PRIVACY RIGHTS?
 23 | 11. DO WE MAKE UPDATES TO THIS POLICY?
 24 | 12. HOW CAN YOU CONTACT US ABOUT THIS POLICY?
 25 | 
 26 | 1. WHAT INFORMATION DO WE COLLECT?
 27 | 
 28 | Information collected through our Apps
 29 | 
 30 | In Short: We may collect information regarding your mobile device, when you use our apps.
 31 | 
 32 | If you use our Apps, we may also collect the following information:
 33 | 
 34 | Mobile Device Access. We may request access or permission to certain features from your mobile device, including your mobile device's camera, and other features. If you wish to change our access or permissions, you may do so in your device's settings.
 35 | 
 36 | 2. HOW DO WE USE YOUR INFORMATION?
 37 |  
 38 | In Short: We process your information for purposes based on legitimate business interests, the fulfillment of our contract with you, compliance with our legal obligations, and/or your consent.
 39 |  
 40 | We use personal information collected via our Apps for a variety of business purposes described below. We process your personal information for these purposes in reliance on our legitimate business interests, in order to enter into or perform a contract with you, with your consent, and/or for compliance with our legal obligations. We indicate the specific processing grounds we rely on next to each purpose listed below.
 41 |  
 42 | We use the information we collect or receive:
 43 |  
 44 | For other Business Purposes. We may use your information for other Business Purposes, such as data analysis, identifying usage trends, determining the effectiveness of our promotional campaigns and to evaluate and improve our Apps, products, marketing and your experience. We may use and store this information in aggregated and anonymized form so that it is not associated with individual end users and does not include personal information. We will not use identifiable personal information without your consent.
 45 |  
 46 | 3. WILL YOUR INFORMATION BE SHARED WITH ANYONE?
 47 |  
 48 | In Short: We only share information with your consent, to comply with laws, to provide you with services, to protect your rights, or to fulfill business obligations.
 49 |  
 50 | We may process or share data based on the following legal basis:
 51 | 
 52 | Consent: We may process your data if you have given us specific consent to use your personal information in a specific purpose.
 53 |  
 54 | Legitimate Interests: We may process your data when it is reasonably necessary to achieve our legitimate business interests.
 55 |  
 56 | Performance of a Contract: Where we have entered into a contract with you, we may process your personal information to fulfill the terms of our contract.
 57 |  
 58 | Legal Obligations: We may disclose your information where we are legally required to do so in order to comply with applicable law, governmental requests, a judicial proceeding, court order, or legal process, such as in response to a court order or a subpoena (including in response to public authorities to meet national security or law enforcement requirements).
 59 |  
 60 | Vital Interests: We may disclose your information where we believe it is necessary to investigate, prevent, or take action regarding potential violations of our policies, suspected fraud, situations involving potential threats to the safety of any person and illegal activities, or as evidence in litigation in which we are involved.
 61 | 
 62 | More specifically, we may need to process your data or share your personal information in the following situations:
 63 |  
 64 | Vendors, Consultants and Other Third-Party Service Providers. We may share your data with third party vendors, service providers, contractors or agents who perform services for us or on our behalf and require access to such information to do that work. Examples include: payment processing, data analysis, email delivery, hosting services, customer service and marketing efforts. We may allow selected third parties to use tracking technology on the Apps, which will enable them to collect data about how you interact with the Apps over time. This information may be used to, among other things, analyze and track data, determine the popularity of certain content and better understand online activity. Unless described in this Policy, we do not share, sell, rent or trade any of your information with third parties for their promotional purposes.
 65 |  
 66 | Business Transfers. We may share or transfer your information in connection with, or during negotiations of, any merger, sale of company assets, financing, or acquisition of all or a portion of our business to another company.
 67 |  
 68 | Third-Party Advertisers. We may use third-party advertising companies to serve ads when you visit the Apps. These companies may use information about your visits to our Website(s) and other websites that are contained in web cookies and other tracking technologies in order to provide advertisements about goods and services of interest to you.
 69 |  
 70 | 4. DO WE USE COOKIES AND OTHER TRACKING TECHNOLOGIES?
 71 | 
 72 | In Short: We may use cookies and other tracking technologies to collect and store your information.
 73 |  
 74 | We may use cookies and similar tracking technologies (like web beacons and pixels) to access or store information. Specific information about how we use such technologies and how you can refuse certain cookies is set out in our Cookie Policy.
 75 |  
 76 | 5. HOW LONG DO WE KEEP YOUR INFORMATION?
 77 |  
 78 | In Short: We keep your information for as long as necessary to fulfill the purposes outlined in this privacy notice unless otherwise required by law.
 79 | 
 80 | We will only keep your personal information for as long as it is necessary for the purposes set out in this privacy notice, unless a longer retention period is required or permitted by law (such as tax, accounting or other legal requirements). No purpose in this policy will require us keeping your personal information for longer than the period of time in which users have an account with us.
 81 |  
 82 | When we have no ongoing legitimate business need to process your personal information, we will either delete or anonymize it, or, if this is not possible (for example, because your personal information has been stored in backup archives), then we will securely store your personal information and isolate it from any further processing until deletion is possible.
 83 |  
 84 | 6. HOW DO WE KEEP YOUR INFORMATION SAFE?
 85 |  
 86 | In Short: We aim to protect your personal information through a system of organizational and technical security measures.
 87 |  
 88 | We have implemented appropriate technical and organizational security measures designed to protect the security of any personal information we process. However, please also remember that we cannot guarantee that the internet itself is 100% secure. Although we will do our best to protect your personal information, transmission of personal information to and from our Apps is at your own risk. You should only access the services within a secure environment.
 89 |  
 90 | 7. DO WE COLLECT INFORMATION FROM MINORS?
 91 |  
 92 | In Short: We do not knowingly collect data from or market to children under 18 years of age.
 93 |  
 94 | We do not knowingly solicit data from or market to children under 18 years of age. By using the Apps, you represent that you are at least 18 or that you are the parent or guardian of such a minor and consent to such minor dependent’s use of the Apps. If we learn that personal information from users less than 18 years of age has been collected, we will deactivate the account and take reasonable measures to promptly delete such data from our records. If you become aware of any data we have collected from children under age 18, please contact us at kenmueller0@gmail.com.
 95 |  
 96 | 8. WHAT ARE YOUR PRIVACY RIGHTS?
 97 |  
 98 | In Short: In some regions, such as the European Economic Area, you have rights that allow you greater access to and control over your personal information. You may review, change, or terminate your account at any time.
 99 |  
100 | In some regions (like the European Economic Area), you have certain rights under applicable data protection laws. These may include the right (i) to request access and obtain a copy of your personal information, (ii) to request rectification or erasure; (iii) to restrict the processing of your personal information; and (iv) if applicable, to data portability. In certain circumstances, you may also have the right to object to the processing of your personal information. To make such a request, please use the contact details provided below. We will consider and act upon any request in accordance with applicable data protection laws.
101 |  
102 | If we are relying on your consent to process your personal information, you have the right to withdraw your consent at any time. Please note however that this will not affect the lawfulness of the processing before its withdrawal.
103 |  
104 | If you are resident in the European Economic Area and you believe we are unlawfully processing your personal information, you also have the right to complain to your local data protection supervisory authority. You can find their contact details here: http://ec.europa.eu/justice/data-protection/bodies/authorities/index_en.htm.
105 |  
106 | Account Information
107 | 
108 | If you would at any time like to review or change the information in your account or terminate your account, you can:
109 |  
110 | Log into your account settings and update your user account.
111 |  
112 | Upon your request to terminate your account, we will deactivate or delete your account and information from our active databases. However, some information may be retained in our files to prevent fraud, troubleshoot problems, assist with any investigations, enforce our Terms of Use and/or comply with legal requirements.
113 |  
114 | Cookies and similar technologies: Most Web browsers are set to accept cookies by default. If you prefer, you can usually choose to set your browser to remove cookies and to reject cookies. If you choose to remove cookies or reject cookies, this could affect certain features or services of our Apps. To opt-out of interest-based advertising by advertisers on our Apps visit http://www.aboutads.info/choices/.
115 |  
116 | Opting out of email marketing: You can unsubscribe from our marketing email list at any time by clicking on the unsubscribe link in the emails that we send or by contacting us using the details provided below. You will then be removed from the marketing email list – however, we will still need to send you service-related emails that are necessary for the administration and use of your account. To otherwise opt-out, you may:
117 |  
118 | 9. CONTROLS FOR DO-NOT-TRACK FEATURES
119 |  
120 | Most web browsers and some mobile operating systems and mobile applications include a Do-Not-Track ("DNT") feature or setting you can activate to signal your privacy preference not to have data about your online browsing activities monitored and collected. No uniform technology standard for recognizing and implementing DNT signals has been finalized. As such, we do not currently respond to DNT browser signals or any other mechanism that automatically communicates your choice not to be tracked online. If a standard for online tracking is adopted that we must follow in the future, we will inform you about that practice in a revised version of this privacy notice.
121 |  
122 | 10. DO CALIFORNIA RESIDENTS HAVE SPECIFIC PRIVACY RIGHTS?
123 |  
124 | In Short: Yes, if you are a resident of California, you are granted specific rights regarding access to your personal information.
125 |  
126 | California Civil Code Section 1798.83, also known as the "Shine The Light" law, permits our users who are California residents to request and obtain from us, once a year and free of charge, information about categories of personal information (if any) we disclosed to third parties for direct marketing purposes and the names and addresses of all third parties with which we shared personal information in the immediately preceding calendar year. If you are a California resident and would like to make such a request, please submit your request in writing to us using the contact information provided below.
127 |  
128 | If you are under 18 years of age, reside in California, and have a registered account with the Apps, you have the right to request removal of unwanted data that you publicly post on the Apps. To request removal of such data, please contact us using the contact information provided below, and include the email address associated with your account and a statement that you reside in California. We will make sure the data is not publicly displayed on the Apps, but please be aware that the data may not be completely or comprehensively removed from our systems.
129 |  
130 | 11. DO WE MAKE UPDATES TO THIS POLICY?
131 |  
132 | In Short: Yes, we will update this policy as necessary to stay compliant with relevant laws.
133 |  
134 | We may update this privacy notice from time to time. The updated version will be indicated by an updated "Revised" date and the updated version will be effective as soon as it is accessible. If we make material changes to this privacy notice, we may notify you either by prominently posting a notice of such changes or by directly sending you a notification. We encourage you to review this privacy notice frequently to be informed of how we are protecting your information.
135 |  
136 | 12. HOW CAN YOU CONTACT US ABOUT THIS POLICY?
137 |  
138 | If you have questions or comments about this policy, you may email us at kenmueller0@gmail.com.
139 |  
140 | HOW CAN YOU REVIEW, UPDATE, OR DELETE THE DATA WE COLLECT FROM YOU?
141 | 
142 | Based on the laws of some countries, you may have the right to request access to the personal information we collect from you, change that information, or delete it in some circumstances. To request to review, update, or delete your personal information, please submit a request form by clicking here. We will respond to your request within 30 days.
143 | 


--------------------------------------------------------------------------------
/hooks/useComments.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import { useRecoilState } from 'recoil'
 3 | import { toast } from 'react-toastify'
 4 | 
 5 | import FileMeta from 'models/FileMeta'
 6 | import firebase from 'lib/firebase'
 7 | import snapshotToComment from 'lib/snapshotToComment'
 8 | import commentsState from 'state/comments'
 9 | 
10 | import 'firebase/firestore'
11 | 
12 | const firestore = firebase.firestore()
13 | const queue = new Set<string>()
14 | 
15 | const useComments = (file: FileMeta) => {
16 | 	const [comments, setComments] = useRecoilState(commentsState)
17 | 	
18 | 	useEffect(() => {
19 | 		if (queue.has(file.id))
20 | 			return
21 | 		
22 | 		queue.add(file.id)
23 | 		
24 | 		firestore.collection(`files/${file.id}/comments`).onSnapshot(
25 | 			snapshot => {
26 | 				setComments(_comments => {
27 | 					let comments = _comments[file.id] ?? []
28 | 					
29 | 					for (const { type, doc } of snapshot.docChanges())
30 | 						switch (type) {
31 | 							case 'added': {
32 | 								const comment = snapshotToComment(doc)
33 | 								
34 | 								if (comment)
35 | 									comments = [...comments, comment]
36 | 								
37 | 								break
38 | 							}
39 | 							case 'modified':
40 | 								comments = comments.map(comment =>
41 | 									comment.id === doc.id
42 | 										? snapshotToComment(doc) ?? comment
43 | 										: comment
44 | 								)
45 | 								break
46 | 							case 'removed':
47 | 								comments = comments.filter(({ id }) => id !== doc.id)
48 | 								break
49 | 						}
50 | 					
51 | 					return {
52 | 						..._comments,
53 | 						[file.id]: comments.sort((a, b) => a.date - b.date)
54 | 					}
55 | 				})
56 | 			},
57 | 			({ message }) => toast.error(message)
58 | 		)
59 | 	}, [file.id, setComments])
60 | 	
61 | 	return comments[file.id]
62 | }
63 | 
64 | export default useComments
65 | 


--------------------------------------------------------------------------------
/hooks/useCurrentUser.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import { useRecoilState } from 'recoil'
 3 | import { toast } from 'react-toastify'
 4 | 
 5 | import firebase from 'lib/firebase'
 6 | import currentUserState from 'state/currentUser'
 7 | import useUser, { UseUserOptions } from './useUser'
 8 | 
 9 | import 'firebase/auth'
10 | 
11 | const USE_USER_OPTIONS: UseUserOptions = {
12 | 	observe: true,
13 | 	includeApiKey: true
14 | }
15 | 
16 | const auth = firebase.auth()
17 | 
18 | const useCurrentUser = () => {
19 | 	const [currentUser, setCurrentUser] = useRecoilState(currentUserState)
20 | 	const user = useUser(currentUser?.auth?.uid, USE_USER_OPTIONS)
21 | 	
22 | 	useEffect(() => {
23 | 		if (currentUser !== undefined)
24 | 			return
25 | 		
26 | 		auth.onAuthStateChanged(
27 | 			auth => setCurrentUser(auth && { auth, data: null }),
28 | 			({ message }) => toast.error(message)
29 | 		)
30 | 	}, [currentUser, setCurrentUser])
31 | 	
32 | 	useEffect(() => {
33 | 		setCurrentUser(currentUser => currentUser && {
34 | 			...currentUser,
35 | 			data: user ?? null
36 | 		})
37 | 	}, [user, setCurrentUser])
38 | 	
39 | 	return currentUser
40 | }
41 | 
42 | export default useCurrentUser
43 | 


--------------------------------------------------------------------------------
/hooks/useFiles.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react'
 2 | import { useRecoilState } from 'recoil'
 3 | import { toast } from 'react-toastify'
 4 | 
 5 | import firebase from 'lib/firebase'
 6 | import snapshotToFileMeta from 'lib/snapshotToFileMeta'
 7 | import filesState from 'state/files'
 8 | import useCurrentUser from './useCurrentUser'
 9 | 
10 | import 'firebase/firestore'
11 | 
12 | const firestore = firebase.firestore()
13 | const queue = new Set<string>()
14 | 
15 | const useFiles = (owner: string) => {
16 | 	const [files, setFiles] = useRecoilState(filesState)
17 | 	
18 | 	const currentUser = useCurrentUser()
19 | 	const uid = currentUser && (currentUser.auth?.uid ?? currentUser.data?.id)
20 | 	
21 | 	useEffect(() => {
22 | 		if (uid === undefined || queue.has(owner))
23 | 			return
24 | 		
25 | 		queue.add(owner)
26 | 		
27 | 		let query = firestore.collection('files').where('owner', '==', owner)
28 | 		
29 | 		if (uid !== owner)
30 | 			query = query.where('public', '==', true)
31 | 		
32 | 		query.onSnapshot(
33 | 			snapshot => {
34 | 				setFiles(_files => {
35 | 					let files = _files[owner] ?? []
36 | 					
37 | 					for (const { type, doc } of snapshot.docChanges())
38 | 						switch (type) {
39 | 							case 'added': {
40 | 								const file = snapshotToFileMeta(doc)
41 | 								
42 | 								if (file)
43 | 									files = [...files, file]
44 | 								
45 | 								break
46 | 							}
47 | 							case 'modified':
48 | 								files = files.map(file =>
49 | 									file.id === doc.id
50 | 										? snapshotToFileMeta(doc) ?? file
51 | 										: file
52 | 								)
53 | 								break
54 | 							case 'removed':
55 | 								files = files.filter(({ id }) => id !== doc.id)
56 | 								break
57 | 						}
58 | 					
59 | 					return {
60 | 						..._files,
61 | 						[owner]: files.sort((a, b) => b.uploaded - a.uploaded)
62 | 					}
63 | 				})
64 | 			},
65 | 			({ message }) => toast.error(message)
66 | 		)
67 | 	}, [uid, owner, setFiles])
68 | 	
69 | 	return files[owner]
70 | }
71 | 
72 | export default useFiles
73 | 


--------------------------------------------------------------------------------
/hooks/useHideOverlays.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback } from 'react'
 2 | import { useSetRecoilState } from 'recoil'
 3 | 
 4 | import currentFileState from 'state/currentFile'
 5 | import uploadFileState from 'state/uploadFile'
 6 | 
 7 | const useHideOverlays = () => {
 8 | 	const setCurrentFile = useSetRecoilState(currentFileState)
 9 | 	const setUploadFile = useSetRecoilState(uploadFileState)
10 | 	
11 | 	return useCallback(() => {
12 | 		setCurrentFile(null)
13 | 		setUploadFile(null)
14 | 	}, [setCurrentFile, setUploadFile])
15 | }
16 | 
17 | export default useHideOverlays
18 | 


--------------------------------------------------------------------------------
/hooks/useRecentlyUploadedFiles.ts:
--------------------------------------------------------------------------------
  1 | import { useEffect } from 'react'
  2 | import { useRecoilState } from 'recoil'
  3 | import { toast } from 'react-toastify'
  4 | 
  5 | import firebase from 'lib/firebase'
  6 | import snapshotToFileMeta from 'lib/snapshotToFileMeta'
  7 | import { RECENTLY_UPLOADED_FILES_LIMIT } from 'lib/constants'
  8 | import recentlyUploadedFilesState from 'state/recentlyUploadedFiles'
  9 | import useCurrentUser from './useCurrentUser'
 10 | 
 11 | import 'firebase/firestore'
 12 | 
 13 | const firestore = firebase.firestore()
 14 | 
 15 | let isListeningToAll = false
 16 | let isListeningToUser = false
 17 | 
 18 | const useRecentlyUploadedFiles = () => {
 19 | 	const [files, setFiles] = useRecoilState(recentlyUploadedFilesState)
 20 | 	
 21 | 	const currentUser = useCurrentUser()
 22 | 	const uid = currentUser && (currentUser.auth?.uid ?? currentUser.data?.id)
 23 | 	
 24 | 	useEffect(() => {
 25 | 		if (isListeningToAll)
 26 | 			return
 27 | 		
 28 | 		isListeningToAll = true
 29 | 		
 30 | 		firestore
 31 | 			.collection('files')
 32 | 			.where('public', '==', true)
 33 | 			.orderBy('uploaded', 'desc')
 34 | 			.limit(RECENTLY_UPLOADED_FILES_LIMIT)
 35 | 			.onSnapshot(
 36 | 				snapshot => {
 37 | 					setFiles(_files => {
 38 | 						let files = _files ?? []
 39 | 						
 40 | 						for (const { type, doc } of snapshot.docChanges())
 41 | 							switch (type) {
 42 | 								case 'added': {
 43 | 									const file = snapshotToFileMeta(doc)
 44 | 									
 45 | 									if (file)
 46 | 										files = [...files, file]
 47 | 									
 48 | 									break
 49 | 								}
 50 | 								case 'modified': {
 51 | 									const newFile = snapshotToFileMeta(doc)
 52 | 									
 53 | 									if (newFile)
 54 | 										files = files.map(file =>
 55 | 											file.id === newFile.id ? newFile : file
 56 | 										)
 57 | 									
 58 | 									break
 59 | 								}
 60 | 								case 'removed':
 61 | 									for (const file of files)
 62 | 										if (file.id === doc.id) {
 63 | 											files = files.filter(_file => _file !== file)
 64 | 											break
 65 | 										}
 66 | 									
 67 | 									break
 68 | 							}
 69 | 						
 70 | 						return files.sort((a, b) => b.uploaded - a.uploaded)
 71 | 					})
 72 | 				},
 73 | 				({ message }) => toast.error(message)
 74 | 			)
 75 | 	}, [setFiles])
 76 | 	
 77 | 	useEffect(() => {
 78 | 		if (isListeningToUser || !uid)
 79 | 			return
 80 | 		
 81 | 		isListeningToUser = true
 82 | 		
 83 | 		firestore
 84 | 			.collection('files')
 85 | 			.where('owner', '==', uid)
 86 | 			.where('public', '==', false)
 87 | 			.onSnapshot(
 88 | 				snapshot => {
 89 | 					setFiles(_files => {
 90 | 						let files = _files ?? []
 91 | 						
 92 | 						for (const { type, doc } of snapshot.docChanges())
 93 | 							switch (type) {
 94 | 								case 'added': {
 95 | 									const file = snapshotToFileMeta(doc)
 96 | 									
 97 | 									if (file)
 98 | 										files = [...files, file]
 99 | 									
100 | 									break
101 | 								}
102 | 								case 'modified': {
103 | 									const newFile = snapshotToFileMeta(doc)
104 | 									
105 | 									if (newFile)
106 | 										files = files.map(file =>
107 | 											file.id === newFile.id ? newFile : file
108 | 										)
109 | 									
110 | 									break
111 | 								}
112 | 								case 'removed':
113 | 									for (const file of files)
114 | 										if (file.id === doc.id) {
115 | 											files = files.filter(_file => _file !== file)
116 | 											break
117 | 										}
118 | 									
119 | 									break
120 | 							}
121 | 						
122 | 						return files.sort((a, b) => b.uploaded - a.uploaded)
123 | 					})
124 | 				},
125 | 				({ message }) => toast.error(message)
126 | 			)
127 | 	}, [uid, setFiles])
128 | 	
129 | 	return files
130 | }
131 | 
132 | export default useRecentlyUploadedFiles
133 | 


--------------------------------------------------------------------------------
/hooks/useSignIn.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback } from 'react'
 2 | import { useSetRecoilState } from 'recoil'
 3 | 
 4 | import signIn from 'lib/signIn'
 5 | import currentUserState from 'state/currentUser'
 6 | 
 7 | const useSignIn = () => {
 8 | 	const setCurrentUser = useSetRecoilState(currentUserState)
 9 | 	
10 | 	return useCallback(async () => {
11 | 		const data = await signIn()
12 | 		
13 | 		if (data)
14 | 			setCurrentUser(user => ({
15 | 				auth: user?.auth ?? null,
16 | 				data
17 | 			}))
18 | 		
19 | 		return data !== undefined
20 | 	}, [setCurrentUser])
21 | }
22 | 
23 | export default useSignIn
24 | 


--------------------------------------------------------------------------------
/hooks/useUpdate.ts:
--------------------------------------------------------------------------------
1 | import { useState, useCallback } from 'react'
2 | 
3 | const useUpdate = () => {
4 | 	const [, setState] = useState({})
5 | 	return useCallback(() => setState({}), [setState])
6 | }
7 | 
8 | export default useUpdate
9 | 


--------------------------------------------------------------------------------
/hooks/useUser.ts:
--------------------------------------------------------------------------------
 1 | import { useCallback, useEffect } from 'react'
 2 | import { useRecoilState } from 'recoil'
 3 | import { toast } from 'react-toastify'
 4 | 
 5 | import firebase from 'lib/firebase'
 6 | import snapshotToUser from 'lib/snapshotToUser'
 7 | import usersState from 'state/users'
 8 | 
 9 | import 'firebase/firestore'
10 | 
11 | const firestore = firebase.firestore()
12 | 
13 | const getQueue = new Set<string>()
14 | const observeQueue = new Set<string>()
15 | 
16 | const onError = ({ message }: Error) => {
17 | 	toast.error(message)
18 | }
19 | 
20 | export interface UseUserOptions {
21 | 	observe?: boolean
22 | 	includeApiKey?: boolean
23 | }
24 | 
25 | /**
26 |  * - `undefined` - loading
27 |  * - `null` - nonexistent
28 |  * - `User` - loaded
29 |  */
30 | const useUser = (
31 | 	id: string | null | undefined,
32 | 	{ observe = false, includeApiKey = false }: UseUserOptions = {}
33 | ) => {
34 | 	const [users, setUsers] = useRecoilState(usersState)
35 | 	
36 | 	const onSnapshot = useCallback((snapshot: firebase.firestore.DocumentSnapshot) => {
37 | 		setUsers(users => ({
38 | 			...users,
39 | 			[id]: snapshotToUser(snapshot, includeApiKey)
40 | 		}))
41 | 	}, [id, includeApiKey, setUsers])
42 | 	
43 | 	useEffect(() => {
44 | 		if (!id)
45 | 			return
46 | 		
47 | 		const queue = observe ? observeQueue : getQueue
48 | 		
49 | 		if (queue.has(id))
50 | 			return
51 | 		
52 | 		queue.add(id)
53 | 		const doc = firestore.doc(`users/${id}`)
54 | 		
55 | 		observe
56 | 			? doc.onSnapshot(onSnapshot, onError)
57 | 			: doc.get().then(onSnapshot).catch(onError)
58 | 	}, [id, observe, onSnapshot])
59 | 	
60 | 	return id && users[id]
61 | }
62 | 
63 | export default useUser
64 | 


--------------------------------------------------------------------------------
/images/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenmueller/filein-frontend/f8cf657ddb9ca40b6e287e166296b61ac8bc8f62/images/apple-touch-icon.png


--------------------------------------------------------------------------------
/images/icon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenmueller/filein-frontend/f8cf657ddb9ca40b6e287e166296b61ac8bc8f62/images/icon-16x16.png


--------------------------------------------------------------------------------
/images/icon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenmueller/filein-frontend/f8cf657ddb9ca40b6e287e166296b61ac8bc8f62/images/icon-32x32.png


--------------------------------------------------------------------------------
/images/icon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1359 1812">
2 | 	<path class="icon-background" d="M792.75 481.312V0H84.937C37.868 0 0 37.868 0 84.938V1727.06c0 47.07 37.868 84.94 84.938 84.94H1274.06c47.07 0 84.94-37.87 84.94-84.94V566.25H877.688c-46.716 0-84.938-38.222-84.938-84.938zm566.25-49.9V453H906V0h21.588c22.65 0 44.239 8.848 60.164 24.773l346.478 346.829a84.686 84.686 0 0124.77 59.81z" />
3 | 	<path class="icon-foreground" d="M1214.95 986.249L964.943 1238.57c-26.353 26.59-70.276 6.87-70.276-32.38v-133.52c-250.999 1.8-356.886 65.15-286.068 317.94 7.783 27.78-22.302 49.29-43.413 32.15-67.651-54.92-128.853-159.97-128.853-266.01 0-267.07 204.165-320.068 458.334-321.575V701.554c0-39.288 43.953-58.945 70.276-32.374l250.007 252.321c17.39 17.558 17.41 47.175 0 64.748zM894.667 1360.46v127.79H339.111V894.5h88.396a19.682 19.682 0 008.162-1.787c2.58-1.178 4.91-2.9 6.852-5.065 25.96-28.886 55.967-51.749 88.566-69.907 19.323-10.763 12.163-41.991-9.627-41.991H311.333c-46.024 0-83.333 39.874-83.333 89.063v653.127c0 49.19 37.309 89.06 83.333 89.06h611.111c46.025 0 83.336-39.87 83.336-89.06v-164.78c0-15.38-14.233-26.1-27.799-20.97-19.02 7.19-39.388 9.34-59.356 6.27-12.622-1.94-23.958 8.37-23.958 22z" />
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/images/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" standalone="no"?>
 2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 3 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="1812.000000pt" height="1812.000000pt"
 4 | 	viewBox="0 0 1812.000000 1812.000000" preserveAspectRatio="xMidYMid meet">
 5 | 	<g transform="translate(0.000000,1812.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
 6 | 		<path d="M2917 18099 c-149 -36 -272 -105 -391 -218 -117 -113 -198 -253 -236
 7 | -413 -20 -83 -20 -126 -20 -8401 0 -7551 1 -8325 16 -8395 34 -168 121 -321
 8 | 253 -444 118 -110 241 -176 398 -212 66 -15 568 -16 6123 -16 5407 0 6059 2
 9 | 6125 15 156 33 286 100 406 213 132 123 219 276 253 444 15 70 16 629 16 5933
10 | l0 5855 -2434 0 c-2673 0 -2520 -3 -2685 60 -209 81 -400 272 -481 481 -63
11 | 165 -60 11 -60 2685 l0 2434 -3602 -1 c-3514 0 -3605 -1 -3681 -20z m8855
12 | -6579 c73 -28 130 -75 297 -247 146 -149 340 -345 1797 -1813 559 -564 593
13 | -599 627 -670 63 -128 67 -277 12 -398 -40 -86 136 95 -1594 -1649 -1196
14 | -1207 -1095 -1118 -1276 -1118 -92 0 -106 3 -167 32 -80 38 -156 109 -192 182
15 | -56 110 -56 106 -56 863 0 552 -3 698 -12 698 -141 -1 -649 -24 -788 -35 -644
16 | -53 -1138 -172 -1478 -355 -477 -258 -734 -653 -793 -1219 -17 -162 -6 -525
17 | 20 -721 29 -205 80 -461 141 -698 58 -225 63 -289 26 -368 -49 -106 -136 -164
18 | -246 -164 -85 0 -127 20 -231 111 -477 414 -888 1059 -1079 1691 -94 311 -130
19 | 535 -137 859 -8 322 16 602 73 887 148 732 514 1286 1101 1669 680 444 1685
20 | 672 3081 700 l322 6 0 693 c0 471 4 710 11 746 36 170 175 309 337 338 61 11
21 | 145 3 204 -20z m-4230 -1170 c135 -38 191 -229 102 -347 -13 -17 -84 -68 -161
22 | -114 -277 -166 -473 -320 -698 -548 -83 -83 -144 -136 -168 -146 -31 -13 -110
23 | -15 -497 -15 l-460 0 0 -2975 0 -2975 2780 0 2780 0 0 658 c0 432 4 670 11
24 | 695 13 47 73 115 117 134 26 11 70 12 205 7 195 -7 281 3 452 56 132 41 192
25 | 32 257 -37 61 -63 58 -17 58 -1008 0 -788 -2 -916 -16 -983 -34 -164 -108
26 | -310 -220 -430 -116 -126 -240 -201 -404 -244 l-85 -23 -3160 0 c-3054 0
27 | -3162 1 -3230 19 -159 42 -289 120 -405 243 -115 121 -192 268 -227 433 -17
28 | 81 -18 240 -18 3470 l0 3385 27 98 c94 341 345 584 663 642 90 17 2238 21
29 | 2297 5z" />
30 | 		<path d="M11330 15855 l0 -2265 2265 0 2265 0 0 164 c0 139 -4 177 -24 258
31 | -30 119 -88 234 -164 329 -33 41 -856 869 -1828 1840 -1316 1314 -1786 1777
32 | -1834 1808 -76 48 -197 97 -290 117 -40 8 -128 14 -227 14 l-163 0 0 -2265z" />
33 | 	</g>
34 | </svg>
35 | 


--------------------------------------------------------------------------------
/lib/access.ts:
--------------------------------------------------------------------------------
 1 | const KEY = 'filein.io-file-private'
 2 | 
 3 | export const getIsPublic = () =>
 4 | 	!localStorage.getItem(KEY)
 5 | 
 6 | export const setIsPublic = (isPublic: boolean) =>
 7 | 	isPublic
 8 | 		? localStorage.removeItem(KEY)
 9 | 		: localStorage.setItem(KEY, '1')
10 | 


--------------------------------------------------------------------------------
/lib/clipBody.ts:
--------------------------------------------------------------------------------
1 | const clipBody = (clipped: boolean) =>
2 | 	document.body.classList[clipped ? 'add' : 'remove']('clipped')
3 | 
4 | export default clipBody
5 | 


--------------------------------------------------------------------------------
/lib/constants.ts:
--------------------------------------------------------------------------------
1 | export const RECENTLY_UPLOADED_FILES_LIMIT = 100
2 | export const REVALIDATE = 1
3 | 
4 | export const MAX_FILE_SIZE = 10 * 1024 * 1024 * 1024 // 10 GB
5 | 


--------------------------------------------------------------------------------
/lib/deleteFile.ts:
--------------------------------------------------------------------------------
 1 | import FileMeta from 'models/FileMeta'
 2 | import firebase from './firebase'
 3 | 
 4 | import 'firebase/firestore'
 5 | 
 6 | const firestore = firebase.firestore()
 7 | 
 8 | const deleteFile = (file: FileMeta) =>
 9 | 	firestore.doc(`files/${file.id}`).delete()
10 | 
11 | export default deleteFile
12 | 


--------------------------------------------------------------------------------
/lib/editAccess.ts:
--------------------------------------------------------------------------------
 1 | import { toast } from 'react-toastify'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | import firebase from './firebase'
 5 | import { setIsPublic } from './access'
 6 | 
 7 | import 'firebase/firestore'
 8 | 
 9 | const firestore = firebase.firestore()
10 | 
11 | const editAccess = async (file: FileMeta, isPublic: boolean) => {
12 | 	const _isPublic = file.public
13 | 	
14 | 	try {
15 | 		file.public = isPublic
16 | 		setIsPublic(isPublic)
17 | 		
18 | 		await firestore.doc(`files/${file.id}`).update({
19 | 			public: isPublic
20 | 		})
21 | 	} catch ({ message }) {
22 | 		file.public = _isPublic
23 | 		setIsPublic(_isPublic)
24 | 		
25 | 		toast.error(message)
26 | 	}
27 | }
28 | 
29 | export default editAccess
30 | 


--------------------------------------------------------------------------------
/lib/editFileName.ts:
--------------------------------------------------------------------------------
 1 | import FileMeta from 'models/FileMeta'
 2 | import firebase from './firebase'
 3 | 
 4 | import 'firebase/firestore'
 5 | 
 6 | const firestore = firebase.firestore()
 7 | 
 8 | const editFileName = ({ id }: FileMeta, name: string) =>
 9 | 	firestore.doc(`files/${id}`).update({ name })
10 | 
11 | export default editFileName
12 | 


--------------------------------------------------------------------------------
/lib/editUserName.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | 
 3 | import 'firebase/firestore'
 4 | 
 5 | const firestore = firebase.firestore()
 6 | 
 7 | const editUserName = (uid: string, name: string) =>
 8 | 	firestore.doc(`users/${uid}`).update({ name })
 9 | 
10 | export default editUserName
11 | 


--------------------------------------------------------------------------------
/lib/firebase/admin.ts:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase-admin'
 2 | 
 3 | if (!firebase.apps.length)
 4 | 	firebase.initializeApp({
 5 | 		credential: firebase.credential.cert(
 6 | 			JSON.parse(Buffer.from(process.env.FIREBASE_ADMIN_KEY, 'base64').toString())
 7 | 		),
 8 | 		databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
 9 | 		storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
10 | 	})
11 | 
12 | export default firebase
13 | 


--------------------------------------------------------------------------------
/lib/firebase/index.ts:
--------------------------------------------------------------------------------
 1 | import firebase from 'firebase/app'
 2 | 
 3 | if (!firebase.apps.length)
 4 | 	firebase.initializeApp({
 5 | 		apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
 6 | 		authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
 7 | 		databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
 8 | 		projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
 9 | 		storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
10 | 		messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
11 | 		appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
12 | 		measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
13 | 	})
14 | 
15 | export default firebase
16 | 


--------------------------------------------------------------------------------
/lib/getFile.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | import snapshotToFileMeta from './snapshotToFileMeta'
 3 | 
 4 | import 'firebase/firestore'
 5 | 
 6 | const firestore = firebase.firestore()
 7 | 
 8 | const getFile = async (id: string) =>
 9 | 	snapshotToFileMeta(await firestore.doc(`files/${id}`).get())
10 | 
11 | export default getFile
12 | 


--------------------------------------------------------------------------------
/lib/getFileIcon.ts:
--------------------------------------------------------------------------------
 1 | import { faCode, faFile, faFileAlt, faFileArchive, faFileCsv, faFileExcel, faFilePdf, faFilePowerpoint, faFileWord, faVideo, faVolumeUp } from '@fortawesome/free-solid-svg-icons'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | 
 5 | const getFileIcon = ({ type }: FileMeta) => {
 6 | 	switch (type) {
 7 | 		case 'application/pdf':
 8 | 			return faFilePdf
 9 | 		case 'application/rtf':
10 | 			return faFileAlt
11 | 		case 'text/html':
12 | 		case 'text/css':
13 | 		case 'text/javascript':
14 | 		case 'application/json':
15 | 		case 'application/ld+json':
16 | 		case 'application/java-archive':
17 | 		case 'application/xhtml+xml':
18 | 		case 'application/xml':
19 | 		case 'text/xml':
20 | 			return faCode
21 | 		case 'text/csv':
22 | 			return faFileCsv
23 | 		case 'application/msword':
24 | 		case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
25 | 			return faFileWord
26 | 		case 'application/vnd.ms-powerpoint':
27 | 		case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
28 | 			return faFilePowerpoint
29 | 		case 'application/vnd.ms-excel':
30 | 		case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
31 | 			return faFileExcel
32 | 		case 'application/zip':
33 | 		case 'application/gzip':
34 | 		case 'application/vnd.rar':
35 | 		case 'application/x-tar':
36 | 			return faFileArchive
37 | 	}
38 | 	
39 | 	if (type.startsWith('text/') || type.startsWith('font/')) return faFileAlt
40 | 	if (type.startsWith('audio/')) return faVolumeUp
41 | 	if (type.startsWith('video/')) return faVideo
42 | 	
43 | 	return faFile
44 | }
45 | 
46 | export default getFileIcon
47 | 


--------------------------------------------------------------------------------
/lib/getFileIds.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | 
 3 | import 'firebase/firestore'
 4 | 
 5 | const LIMIT = 1000
 6 | 
 7 | const firestore = firebase.firestore()
 8 | 
 9 | const getFileIds = async () => {
10 | 	const { docs } = await firestore
11 | 		.collection('files')
12 | 		.orderBy('uploaded', 'desc')
13 | 		.limit(LIMIT)
14 | 		.get()
15 | 
16 | 	return docs.map(({ id }) => id)
17 | }
18 | 
19 | export default getFileIds
20 | 


--------------------------------------------------------------------------------
/lib/getFilePredicate.ts:
--------------------------------------------------------------------------------
 1 | import FileMeta from 'models/FileMeta'
 2 | import normalize from 'lib/normalize'
 3 | 
 4 | const getFilePredicate = (query: string) => {
 5 | 	const characters = normalize(query).split('')
 6 | 	
 7 | 	return (file: FileMeta) => {
 8 | 		const name = file.name.toLowerCase()
 9 | 		
10 | 		for (const character of characters)
11 | 			if (!name.includes(character))
12 | 				return false
13 | 		
14 | 		return true
15 | 	}
16 | }
17 | 
18 | export default getFilePredicate
19 | 


--------------------------------------------------------------------------------
/lib/getFileType.ts:
--------------------------------------------------------------------------------
 1 | import FileMeta from 'models/FileMeta'
 2 | import FileType from 'models/FileType'
 3 | 
 4 | const getFileType = ({ type }: FileMeta) => {
 5 | 	if (type.startsWith('image/')) return FileType.Image
 6 | 	if (type.startsWith('video/')) return FileType.Video
 7 | 	if (type.startsWith('audio/')) return FileType.Audio
 8 | 	if (type === 'application/pdf') return FileType.PDF
 9 | 	
10 | 	return FileType.Other
11 | }
12 | 
13 | export default getFileType
14 | 


--------------------------------------------------------------------------------
/lib/getFileUrl.ts:
--------------------------------------------------------------------------------
1 | import FileMeta from 'models/FileMeta'
2 | 
3 | const getFileUrl = (file: FileMeta, secure: boolean = false) =>
4 | 	`${secure ? 'https://storage.googleapis.com/' : 'http://'}u.filein.io/${file.id}`
5 | 
6 | export default getFileUrl
7 | 


--------------------------------------------------------------------------------
/lib/getFiles.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | import snapshotToFileMeta from './snapshotToFileMeta'
 3 | 
 4 | import 'firebase/firestore'
 5 | 
 6 | const firestore = firebase.firestore()
 7 | 
 8 | const getFiles = async (uid: string) => {
 9 | 	const { docs } = await firestore
10 | 		.collection('files')
11 | 		.where('owner', '==', uid)
12 | 		.where('public', '==', true)
13 | 		.get()
14 | 	
15 | 	return docs
16 | 		.map(snapshotToFileMeta)
17 | 		.sort((a, b) => b.uploaded - a.uploaded)
18 | }
19 | 
20 | export default getFiles
21 | 


--------------------------------------------------------------------------------
/lib/getRecentlyUploadedFiles.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | import snapshotToFileMeta from './snapshotToFileMeta'
 3 | import { RECENTLY_UPLOADED_FILES_LIMIT } from './constants'
 4 | 
 5 | import 'firebase/firestore'
 6 | 
 7 | const firestore = firebase.firestore()
 8 | 
 9 | const getRecentlyUploadedFiles = async () => {
10 | 	const { docs } = await firestore
11 | 		.collection('files')
12 | 		.where('public', '==', true)
13 | 		.orderBy('uploaded', 'desc')
14 | 		.limit(RECENTLY_UPLOADED_FILES_LIMIT)
15 | 		.get()
16 | 	
17 | 	return docs.map(snapshotToFileMeta)
18 | }
19 | 
20 | export default getRecentlyUploadedFiles
21 | 


--------------------------------------------------------------------------------
/lib/getUser.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | import snapshotToUser from './snapshotToUser'
 3 | 
 4 | import 'firebase/firestore'
 5 | 
 6 | const firestore = firebase.firestore()
 7 | 
 8 | const getUser = async (id: string) =>
 9 | 	snapshotToUser(await firestore.doc(`users/${id}`).get())
10 | 
11 | export default getUser
12 | 


--------------------------------------------------------------------------------
/lib/getUserFromSlug.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | import snapshotToUser from './snapshotToUser'
 3 | 
 4 | import 'firebase/firestore'
 5 | 
 6 | const firestore = firebase.firestore()
 7 | 
 8 | const getUserFromSlug = async (slug: string) => {
 9 | 	const { empty, docs } = await firestore
10 | 		.collection('users')
11 | 		.where('slug', '==', slug)
12 | 		.limit(1)
13 | 		.get()
14 | 	
15 | 	return empty ? null : snapshotToUser(docs[0])
16 | }
17 | 
18 | export default getUserFromSlug
19 | 


--------------------------------------------------------------------------------
/lib/getUserSlug.ts:
--------------------------------------------------------------------------------
 1 | import { nanoid } from 'nanoid'
 2 | 
 3 | import firebase from './firebase'
 4 | import toSlug from './toSlug'
 5 | 
 6 | import 'firebase/firestore'
 7 | 
 8 | const firestore = firebase.firestore()
 9 | 
10 | const getUserSlug = async (name: string) => {
11 | 	const slug = toSlug(name)
12 | 	const { empty } = await firestore
13 | 		.collection('users')
14 | 		.where('slug', '==', slug)
15 | 		.limit(1)
16 | 		.get()
17 | 	
18 | 	return empty
19 | 		? slug
20 | 		: `${slug}-${nanoid(5)}`
21 | }
22 | 
23 | export default getUserSlug
24 | 


--------------------------------------------------------------------------------
/lib/getUserSlugs.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | 
 3 | import 'firebase/firestore'
 4 | 
 5 | const firestore = firebase.firestore()
 6 | 
 7 | const getUserSlugs = async () => {
 8 | 	const { docs } = await firestore.collection('users').get()
 9 | 	return docs.map(snapshot => snapshot.get('slug') as string)
10 | }
11 | 
12 | export default getUserSlugs
13 | 


--------------------------------------------------------------------------------
/lib/newId.ts:
--------------------------------------------------------------------------------
1 | import { nanoid } from 'nanoid'
2 | 
3 | const ID_LENGTH = 10
4 | 
5 | const newId = () =>
6 | 	nanoid(ID_LENGTH)
7 | 
8 | export default newId
9 | 


--------------------------------------------------------------------------------
/lib/normalize.ts:
--------------------------------------------------------------------------------
1 | const normalize = (string: string) =>
2 | 	string.toLowerCase().replace(/\s/g, '')
3 | 
4 | export default normalize
5 | 


--------------------------------------------------------------------------------
/lib/normalizeExtension.ts:
--------------------------------------------------------------------------------
 1 | const NAME_REGEX = /^(.+)\./
 2 | const EXTENSION_REGEX = /\.([^\.]+)$/
 3 | 
 4 | const getName = (file: string) =>
 5 | 	file.match(NAME_REGEX)?.[1] ?? file
 6 | 
 7 | const getExtension = (file: string) =>
 8 | 	file.match(EXTENSION_REGEX)?.[1].toLowerCase()
 9 | 
10 | const normalizeExtension = (from: string, to: string) => {
11 | 	const fromExtension = getExtension(from)
12 | 	const toName = getName(to)
13 | 	const toExtension = getExtension(to)
14 | 	
15 | 	return `${toName}${
16 | 		fromExtension
17 | 			? `.${fromExtension}`
18 | 			: toExtension ? `.${toExtension}` : ''
19 | 	}`
20 | }
21 | 
22 | export default normalizeExtension
23 | 


--------------------------------------------------------------------------------
/lib/signIn.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | import getSlug from './getUserSlug'
 3 | 
 4 | import 'firebase/auth'
 5 | import 'firebase/firestore'
 6 | import User from 'models/User'
 7 | 
 8 | const auth = firebase.auth()
 9 | const firestore = firebase.firestore()
10 | 
11 | const provider = new firebase.auth.GoogleAuthProvider()
12 | provider.addScope('https://www.googleapis.com/auth/userinfo.email')
13 | 
14 | const signIn = async (): Promise<User | null | undefined> => {
15 | 	try {
16 | 		const {
17 | 			user,
18 | 			additionalUserInfo
19 | 		} = await auth.signInWithPopup(provider)
20 | 		
21 | 		if (!(user && additionalUserInfo))
22 | 			throw new Error('An unknown error occurred. Please try again')
23 | 		
24 | 		if (!user.email)
25 | 			throw new Error('Unable to get your email address')
26 | 		
27 | 		if (additionalUserInfo.isNewUser) {
28 | 			const name = user.displayName ?? 'Anonymous'
29 | 			const slug = await getSlug(name)
30 | 			
31 | 			await firestore.doc(`users/${user.uid}`).set({
32 | 				slug,
33 | 				apiKey: null,
34 | 				name,
35 | 				email: user.email,
36 | 				files: 0,
37 | 				comments: 0,
38 | 				joined: firebase.firestore.FieldValue.serverTimestamp()
39 | 			})
40 | 			
41 | 			return { id: user.uid, slug, name, files: 0, comments: 0 }
42 | 		}
43 | 		
44 | 		return null
45 | 	} catch (error) {
46 | 		switch (error.code) {
47 | 			case 'auth/popup-closed-by-user':
48 | 				return
49 | 			default:
50 | 				throw error
51 | 		}
52 | 	}
53 | }
54 | 
55 | export default signIn
56 | 


--------------------------------------------------------------------------------
/lib/signOut.ts:
--------------------------------------------------------------------------------
 1 | import firebase from './firebase'
 2 | 
 3 | import 'firebase/auth'
 4 | 
 5 | const auth = firebase.auth()
 6 | 
 7 | const signOut = () =>
 8 | 	auth.signOut()
 9 | 
10 | export default signOut
11 | 


--------------------------------------------------------------------------------
/lib/snapshotToComment.ts:
--------------------------------------------------------------------------------
 1 | import Comment from 'models/Comment'
 2 | import firebase from './firebase'
 3 | 
 4 | const snapshotToComment = (snapshot: firebase.firestore.DocumentSnapshot | FirebaseFirestore.DocumentSnapshot): Comment | null =>
 5 | 	snapshot.exists
 6 | 		? {
 7 | 			id: snapshot.id,
 8 | 			from: snapshot.get('from'),
 9 | 			body: snapshot.get('body'),
10 | 			date: snapshot.get('date')?.toMillis()
11 | 		}
12 | 		: null
13 | 
14 | export default snapshotToComment
15 | 


--------------------------------------------------------------------------------
/lib/snapshotToFileMeta.ts:
--------------------------------------------------------------------------------
 1 | import FileMeta from 'models/FileMeta'
 2 | import firebase from './firebase'
 3 | 
 4 | const snapshotToFileMeta = (snapshot: firebase.firestore.DocumentSnapshot | FirebaseFirestore.DocumentSnapshot): FileMeta | null =>
 5 | 	snapshot.exists
 6 | 		? {
 7 | 			id: snapshot.id,
 8 | 			name: snapshot.get('name'),
 9 | 			type: snapshot.get('type'),
10 | 			size: snapshot.get('size'),
11 | 			owner: snapshot.get('owner'),
12 | 			comments: snapshot.get('comments'),
13 | 			uploaded: snapshot.get('uploaded')?.toMillis(),
14 | 			public: snapshot.get('public')
15 | 		}
16 | 		: null
17 | 
18 | export default snapshotToFileMeta
19 | 


--------------------------------------------------------------------------------
/lib/snapshotToUser.ts:
--------------------------------------------------------------------------------
 1 | import User from 'models/User'
 2 | import firebase from './firebase'
 3 | 
 4 | const snapshotToUser = (
 5 | 	snapshot: firebase.firestore.DocumentSnapshot | FirebaseFirestore.DocumentSnapshot,
 6 | 	includeApiKey: boolean = false
 7 | ) => {
 8 | 	if (!snapshot.exists)
 9 | 		return null
10 | 	
11 | 	const user: User = {
12 | 		id: snapshot.id,
13 | 		slug: snapshot.get('slug'),
14 | 		name: snapshot.get('name'),
15 | 		files: snapshot.get('files'),
16 | 		comments: snapshot.get('comments')
17 | 	}
18 | 	
19 | 	if (includeApiKey)
20 | 		user.apiKey = snapshot.get('apiKey')
21 | 	
22 | 	return user
23 | }
24 | 
25 | export default snapshotToUser
26 | 


--------------------------------------------------------------------------------
/lib/submitComment.ts:
--------------------------------------------------------------------------------
 1 | import FileMeta from 'models/FileMeta'
 2 | import firebase from './firebase'
 3 | 
 4 | import 'firebase/firestore'
 5 | 
 6 | const { FieldValue } = firebase.firestore
 7 | const firestore = firebase.firestore()
 8 | 
 9 | const submitComment = (uid: string, file: FileMeta, body: string) =>
10 | 	firestore.collection(`files/${file.id}/comments`).add({
11 | 		from: uid,
12 | 		body,
13 | 		date: FieldValue.serverTimestamp()
14 | 	})
15 | 
16 | export default submitComment
17 | 


--------------------------------------------------------------------------------
/lib/toSlug.ts:
--------------------------------------------------------------------------------
1 | const toSlug = (string: string) =>
2 | 	string
3 | 		.trim()
4 | 		.replace(/[\s\-\+\_]+/g, '-')
5 | 		.toLowerCase()
6 | 
7 | export default toSlug
8 | 


--------------------------------------------------------------------------------
/lib/uploadFile.ts:
--------------------------------------------------------------------------------
 1 | import { getExtension } from 'mime'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | import firebase from './firebase'
 5 | import { getIsPublic } from './access'
 6 | import newId from './newId'
 7 | 
 8 | import 'firebase/firestore'
 9 | import 'firebase/storage'
10 | 
11 | const { FieldValue } = firebase.firestore
12 | const firestore = firebase.firestore()
13 | const storage = firebase.storage().ref()
14 | 
15 | const uploadFile = async (
16 | 	file: File,
17 | 	owner: string | null,
18 | 	setProgress: (progress: number) => void
19 | ): Promise<FileMeta> => {
20 | 	const { name, type, size } = file
21 | 	const isPublic = owner ? getIsPublic() : true
22 | 	
23 | 	const indexOfDot = name.lastIndexOf('.')
24 | 	const id = `${newId()}.${
25 | 		~indexOfDot
26 | 			? name.slice(indexOfDot + 1)
27 | 			: getExtension(type)
28 | 	}`
29 | 	
30 | 	const task = storage.child(id).put(file, {
31 | 		contentType: type,
32 | 		contentDisposition: `inline; filename=${JSON.stringify(name)}`,
33 | 		cacheControl: 'public, max-age=31536000, s-maxage=31536000',
34 | 		customMetadata: { name, owner }
35 | 	})
36 | 	
37 | 	task.on('state_changed', ({ bytesTransferred, totalBytes }) => {
38 | 		setProgress((bytesTransferred / totalBytes) * 90)
39 | 	})
40 | 	
41 | 	await task
42 | 	await firestore.doc(`files/${id}`).set({
43 | 		name,
44 | 		type,
45 | 		size,
46 | 		owner,
47 | 		comments: 0,
48 | 		uploaded: FieldValue.serverTimestamp(),
49 | 		public: isPublic
50 | 	})
51 | 	
52 | 	setProgress(100)
53 | 	
54 | 	return { id, name, type, size, owner, comments: 0, uploaded: Date.now(), public: isPublic, blob: file }
55 | }
56 | 
57 | export default uploadFile
58 | 


--------------------------------------------------------------------------------
/models/Comment.ts:
--------------------------------------------------------------------------------
1 | export default interface Comment {
2 | 	id: string
3 | 	from: string
4 | 	body: string
5 | 	date: number
6 | }
7 | 


--------------------------------------------------------------------------------
/models/CurrentUser.ts:
--------------------------------------------------------------------------------
 1 | import User from './User'
 2 | import firebase from 'lib/firebase'
 3 | 
 4 | import 'firebase/auth'
 5 | 
 6 | export default interface CurrentUser {
 7 | 	auth: firebase.User
 8 | 	data: User | null
 9 | }
10 | 


--------------------------------------------------------------------------------
/models/FileMeta.ts:
--------------------------------------------------------------------------------
 1 | export default interface FileMeta {
 2 | 	id: string
 3 | 	name: string
 4 | 	type: string
 5 | 	size: number
 6 | 	owner: string | null
 7 | 	comments: number
 8 | 	uploaded: number
 9 | 	public: boolean
10 | 	blob?: Blob
11 | }
12 | 


--------------------------------------------------------------------------------
/models/FileType.ts:
--------------------------------------------------------------------------------
 1 | enum FileType {
 2 | 	Image = 'image',
 3 | 	Video = 'video',
 4 | 	Audio = 'audio',
 5 | 	PDF = 'pdf',
 6 | 	Other = 'other'
 7 | }
 8 | 
 9 | export default FileType
10 | 


--------------------------------------------------------------------------------
/models/User.ts:
--------------------------------------------------------------------------------
1 | export default interface User {
2 | 	id: string
3 | 	slug: string
4 | 	apiKey?: string | null
5 | 	name: string
6 | 	files: number
7 | 	comments: number
8 | }
9 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | /// <reference types="optimized-images-loader" />
4 | 
5 | declare module '*.mdx' {
6 | 	const Document: React.FC
7 | 	export default Document
8 | }
9 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const { getCSP, SELF, DATA, INLINE, NONE } = require('csp-header')
 2 | 
 3 | const IS_PRODUCTION = process.env.NODE_ENV === 'production'
 4 | const ORIGIN = IS_PRODUCTION ? 'https://filein.io' : 'http://localhost:3000'
 5 | 
 6 | const plugins = [
 7 | 	[require('next-optimized-images')],
 8 | 	[require('@next/mdx')()]
 9 | ]
10 | 
11 | const config = {
12 | 	headers: () => [
13 | 		{
14 | 			source: '/(.*)',
15 | 			headers: [
16 | 				{ key: 'Access-Control-Allow-Origin', value: ORIGIN },
17 | 				{
18 | 					key: 'Content-Security-Policy',
19 | 					value: getCSP({
20 | 						directives: {
21 | 							'default-src': [SELF],
22 | 							'base-uri': [SELF],
23 | 							'font-src': [
24 | 								SELF,
25 | 								'https://fonts.gstatic.com'
26 | 							],
27 | 							'frame-src': [
28 | 								SELF,
29 | 								'https://file-in.firebaseapp.com',
30 | 								'https://app.hubspot.com'
31 | 							],
32 | 							'frame-ancestors': [SELF],
33 | 							'img-src': [
34 | 								SELF,
35 | 								DATA,
36 | 								'https://storage.googleapis.com',
37 | 								'https://platform.slack-edge.com',
38 | 								'https://forms.hsforms.com',
39 | 								'https://track.hubspot.com'
40 | 							],
41 | 							'media-src': [
42 | 								SELF,
43 | 								DATA,
44 | 								'https://storage.googleapis.com'
45 | 							],
46 | 							'script-src': [
47 | 								SELF,
48 | 								...IS_PRODUCTION ? [] : ["'unsafe-eval'"],
49 | 								'https://apis.google.com',
50 | 								'https://js.hs-scripts.com',
51 | 								'https://js.hs-analytics.net',
52 | 								'https://js.hs-banner.com',
53 | 								'https://js.usemessages.com',
54 | 								'https://js.hscollectedforms.net'
55 | 							],
56 | 							'script-src-attr': [NONE],
57 | 							'style-src': [
58 | 								SELF,
59 | 								INLINE,
60 | 								'https://fonts.googleapis.com'
61 | 							],
62 | 							'connect-src': [
63 | 								SELF,
64 | 								'https://*.googleapis.com',
65 | 								'https://vitals.vercel-insights.com',
66 | 								'https://api.hubspot.com',
67 | 								'https://forms.hubspot.com'
68 | 							],
69 | 							'block-all-mixed-content': true,
70 | 							'upgrade-insecure-requests': true
71 | 						}
72 | 					})
73 | 				},
74 | 				{ key: 'Expect-CT', value: '0' },
75 | 				{ key: 'Referrer-Policy', value: 'no-referrer' },
76 | 				{ key: 'Strict-Transport-Security', value: 'max-age=15552000' },
77 | 				{ key: 'X-Content-Type-Options', value: 'nosniff' },
78 | 				{ key: 'X-DNS-Prefetch-Control', value: 'off' },
79 | 				{ key: 'X-Download-Options', value: 'noopen' },
80 | 				{ key: 'X-Frame-Options', value: 'SAMEORIGIN' },
81 | 				{ key: 'X-Permitted-Cross-Domain-Policies', value: 'none' },
82 | 				{ key: 'X-XSS-Protection', value: '0' }
83 | 			]
84 | 		}
85 | 	],
86 | 	redirects: () => [
87 | 		{
88 | 			source: '/slack/install',
89 | 			destination: process.env.NEXT_PUBLIC_SLACK_INSTALL_URL,
90 | 			statusCode: 302
91 | 		}
92 | 	]
93 | }
94 | 
95 | module.exports = require('next-compose-plugins')(plugins, config)
96 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "filein",
 3 | 	"version": "1.0.0",
 4 | 	"scripts": {
 5 | 		"dev": "next",
 6 | 		"build": "next build",
 7 | 		"start": "next start"
 8 | 	},
 9 | 	"dependencies": {
10 | 		"@fortawesome/fontawesome-svg-core": "^1.2.32",
11 | 		"@fortawesome/free-brands-svg-icons": "^5.15.1",
12 | 		"@fortawesome/free-solid-svg-icons": "^5.15.1",
13 | 		"@fortawesome/react-fontawesome": "^0.1.13",
14 | 		"@mdx-js/loader": "^1.6.22",
15 | 		"@next/mdx": "^10.0.4",
16 | 		"balloon-css": "^1.2.0",
17 | 		"classnames": "^2.2.6",
18 | 		"copy-to-clipboard": "^3.3.1",
19 | 		"csp-header": "^2.1.1",
20 | 		"file-saver": "^2.0.5",
21 | 		"firebase": "^8.2.1",
22 | 		"firebase-admin": "^9.4.2",
23 | 		"mime": "^2.4.7",
24 | 		"nanoid": "^3.1.20",
25 | 		"next": "^10.0.3",
26 | 		"next-compose-plugins": "^2.2.1",
27 | 		"next-optimized-images": "^3.0.0-canary.10",
28 | 		"nextjs-progressbar": "^0.0.7",
29 | 		"react": "^17.0.1",
30 | 		"react-dom": "^17.0.1",
31 | 		"react-dropzone": "^11.2.4",
32 | 		"react-pdf": "^5.1.0",
33 | 		"react-toastify": "^6.2.0",
34 | 		"recoil": "^0.1.2",
35 | 		"sass": "^1.30.0"
36 | 	},
37 | 	"devDependencies": {
38 | 		"@babel/preset-env": "^7.12.11",
39 | 		"@babel/preset-react": "^7.12.10",
40 | 		"@types/classnames": "^2.2.11",
41 | 		"@types/file-saver": "^2.0.1",
42 | 		"@types/mime": "^2.0.3",
43 | 		"@types/node": "^14.14.14",
44 | 		"@types/react": "^17.0.0",
45 | 		"@types/react-pdf": "^5.0.0",
46 | 		"typescript": "^4.1.3"
47 | 	},
48 | 	"private": true
49 | }
50 | 


--------------------------------------------------------------------------------
/pages/404.tsx:
--------------------------------------------------------------------------------
 1 | import { NextPage } from 'next'
 2 | import { useRouter } from 'next/router'
 3 | 
 4 | import Head from 'components/Head'
 5 | import Gradient from 'components/Gradient'
 6 | import Footer from 'components/Footer'
 7 | 
 8 | import styles from 'styles/NotFound.module.scss'
 9 | 
10 | const NotFound: NextPage = () => (
11 | 	<div className={styles.root}>
12 | 		<Head
13 | 			url={`https://filein.io${useRouter().asPath}`}
14 | 			title="404 - filein"
15 | 			description="Oh no! Are you lost?"
16 | 			storagePreconnect={false}
17 | 		/>
18 | 		<Gradient className={styles.header}>
19 | 			<h1 className={styles.title}>404</h1>
20 | 			<p className={styles.subtitle}>
21 | 				Oh no! Are you lost?
22 | 			</p>
23 | 		</Gradient>
24 | 		<Footer className={styles.footer} />
25 | 	</div>
26 | )
27 | 
28 | export default NotFound
29 | 


--------------------------------------------------------------------------------
/pages/[id].tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useCallback, useEffect } from 'react'
  2 | import { NextPage, GetStaticPaths, GetStaticProps } from 'next'
  3 | import Router from 'next/router'
  4 | import { useSetRecoilState } from 'recoil'
  5 | import Link from 'next/link'
  6 | import copy from 'copy-to-clipboard'
  7 | import { toast } from 'react-toastify'
  8 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  9 | import { faChevronRight, faDownload, faLink, faTrash } from '@fortawesome/free-solid-svg-icons'
 10 | import cx from 'classnames'
 11 | 
 12 | import User from 'models/User'
 13 | import FileMeta from 'models/FileMeta'
 14 | import getFileIds from 'lib/getFileIds'
 15 | import getUser from 'lib/getUser'
 16 | import getFile from 'lib/getFile'
 17 | import getFileUrl from 'lib/getFileUrl'
 18 | import _deleteFile from 'lib/deleteFile'
 19 | import { REVALIDATE } from 'lib/constants'
 20 | import usersState from 'state/users'
 21 | import useCurrentUser from 'hooks/useCurrentUser'
 22 | import Head from 'components/Head'
 23 | import FileHead from 'components/FileHead'
 24 | import Gradient from 'components/Gradient'
 25 | import FilePreview from 'components/FilePreview'
 26 | import EditFileName from 'components/EditFileName'
 27 | import AccessToggle from 'components/AccessToggle'
 28 | import Comments from 'components/Comments'
 29 | import Footer from 'components/Footer'
 30 | 
 31 | import styles from 'styles/FilePage.module.scss'
 32 | 
 33 | interface FilePageProps {
 34 | 	file: FileMeta
 35 | 	owner: User | null
 36 | }
 37 | 
 38 | const FilePage: NextPage<FilePageProps> = ({ file: _file, owner }) => {
 39 | 	const setUsers = useSetRecoilState(usersState)
 40 | 	const [file, setFile] = useState(_file)
 41 | 	
 42 | 	const currentUser = useCurrentUser()
 43 | 	
 44 | 	const url = getFileUrl(file)
 45 | 	const isOwner = currentUser?.auth
 46 | 		? currentUser.auth.uid === file.owner
 47 | 		: false
 48 | 	
 49 | 	const download = useCallback(() => {
 50 | 		saveAs(getFileUrl(file, true), file.name)
 51 | 	}, [file])
 52 | 	
 53 | 	const copyLink = useCallback(() => {
 54 | 		if (!url)
 55 | 			return
 56 | 		
 57 | 		copy(url)
 58 | 		toast.success('Copied file to clipboard')
 59 | 	}, [url])
 60 | 	
 61 | 	const deleteFile = useCallback(() => {
 62 | 		if (!window.confirm('Are you sure? You cannot restore a deleted file.'))
 63 | 			return
 64 | 		
 65 | 		_deleteFile(file)
 66 | 			.catch(({ message }) => toast.error(message))
 67 | 		
 68 | 		Router.push('/')
 69 | 	}, [file])
 70 | 	
 71 | 	useEffect(() => {
 72 | 		if (owner)
 73 | 			setUsers(users => ({
 74 | 				...users,
 75 | 				[owner.id]: users[owner.id] ?? owner
 76 | 			}))
 77 | 	}, [owner, setUsers])
 78 | 	
 79 | 	return (
 80 | 		<div className={styles.root}>
 81 | 			<Head
 82 | 				url={`https://filein.io/${file.id}`}
 83 | 				title={`${file.name} - filein`}
 84 | 				description={`View ${file.name} by ${owner?.name ?? 'anonymous'}`}
 85 | 			/>
 86 | 			<FileHead file={file} />
 87 | 			<Gradient className={styles.header}>
 88 | 				<FilePreview className={styles.preview} file={file} />
 89 | 				<div className={styles.main}>
 90 | 					<div className={styles.info}>
 91 | 						<div className={styles.meta}>
 92 | 							{isOwner
 93 | 								? <EditFileName className={styles.editName} file={file} onEdit={setFile} />
 94 | 								: <h1 className={styles.name}>{file.name}</h1>
 95 | 							}
 96 | 							<p className={styles.user}>
 97 | 								Uploaded by {owner
 98 | 									? (
 99 | 										<Link href={`/u/${owner.slug}`}>
100 | 											<a className={styles.userLink}>
101 | 												<span className={styles.userName}>{owner.name}</span>
102 | 												<FontAwesomeIcon
103 | 													className={styles.userIcon}
104 | 													icon={faChevronRight}
105 | 												/>
106 | 											</a>
107 | 										</Link>
108 | 									)
109 | 									: <span className={styles.userName}>anonymous</span>
110 | 								}
111 | 							</p>
112 | 						</div>
113 | 						<div className={styles.options}>
114 | 							<div className={styles.actions}>
115 | 								<button
116 | 									className={cx(styles.action, styles.download)}
117 | 									onClick={download}
118 | 									title="Download"
119 | 								>
120 | 									<FontAwesomeIcon icon={faDownload} />
121 | 								</button>
122 | 								<button
123 | 									className={cx(styles.action, styles.copy)}
124 | 									onClick={copyLink}
125 | 									title="Copy source"
126 | 								>
127 | 									<FontAwesomeIcon icon={faLink} />
128 | 								</button>
129 | 								{isOwner && (
130 | 									<button
131 | 										className={cx(styles.action, styles.delete)}
132 | 										onClick={deleteFile}
133 | 										title="Delete"
134 | 									>
135 | 										<FontAwesomeIcon icon={faTrash} />
136 | 									</button>
137 | 								)}
138 | 							</div>
139 | 							{(isOwner || !file.public) && (
140 | 								<AccessToggle
141 | 									className={styles.accessToggle}
142 | 									file={file}
143 | 									disabledMessage={isOwner ? undefined : null}
144 | 									leftIndicator
145 | 								/>
146 | 							)}
147 | 						</div>
148 | 					</div>
149 | 					<Comments className={styles.comments} file={file} />
150 | 				</div>
151 | 			</Gradient>
152 | 			<Footer className={styles.footer} />
153 | 		</div>
154 | 	)
155 | }
156 | 
157 | export const getStaticPaths: GetStaticPaths = async () => ({
158 | 	paths: (await getFileIds()).map(id => ({
159 | 		params: { id }
160 | 	})),
161 | 	fallback: 'blocking'
162 | })
163 | 
164 | export const getStaticProps: GetStaticProps<FilePageProps> = async ({ params }) => {
165 | 	const file = await getFile(params.id as string)
166 | 	
167 | 	if (!file)
168 | 		return { notFound: true }
169 | 	
170 | 	return {
171 | 		props: { file, owner: file.owner && await getUser(file.owner) },
172 | 		revalidate: REVALIDATE
173 | 	}
174 | }
175 | 
176 | export default FilePage
177 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { NextPage } from 'next'
 2 | import { AppProps } from 'next/app'
 3 | import Head from 'next/head'
 4 | import { RecoilRoot } from 'recoil'
 5 | import { ToastContainer } from 'react-toastify'
 6 | import { config } from '@fortawesome/fontawesome-svg-core'
 7 | 
 8 | import UploadDrop from 'components/UploadDrop'
 9 | import UploadFile from 'components/UploadFile'
10 | import CurrentFile from 'components/CurrentFile'
11 | import Navbar from 'components/Navbar'
12 | 
13 | import { src as appleTouchIcon } from 'images/apple-touch-icon.png'
14 | import { src as icon32 } from 'images/icon-32x32.png'
15 | import { src as icon16 } from 'images/icon-16x16.png'
16 | 
17 | import 'styles/global.scss'
18 | 
19 | config.autoAddCss = false
20 | 
21 | const App: NextPage<AppProps> = ({ Component, pageProps }) => (
22 | 	<>
23 | 		<Head>
24 | 			<link key="fonts-googleapis-preconnect" rel="preconnect" href="https://fonts.googleapis.com" />
25 | 			<link key="fonts-gstatic-preconnect" rel="preconnect" href="https://fonts.gstatic.com" />
26 | 			<link
27 | 				key="roboto-stylesheet"
28 | 				rel="stylesheet"
29 | 				href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700;900&display=swap"
30 | 			/>
31 | 			<meta key="og-site-name" property="og:site_name" content="filein" />
32 | 			<meta key="og-type" property="og:type" content="website" />
33 | 			<meta key="twitter-card" name="twitter:card" content="summary_large_image" />
34 | 			<meta key="twitter-site" name="twitter:site" content="@filein" />
35 | 			<meta key="twitter-creator" name="twitter:creator" content="@filein" />
36 | 			<meta key="twitter-domain" name="twitter:domain" content="filein.io" />
37 | 			<link key="apple-touch-icon" rel="apple-touch-icon" sizes="180x180" href={appleTouchIcon} />
38 | 			<link key="icon-32x32" rel="icon" type="image/png" sizes="32x32" href={icon32} />
39 | 			<link key="icon-16x16" rel="icon" type="image/png" sizes="16x16" href={icon16} />
40 | 			<link key="manifest" rel="manifest" href="/site.webmanifest" />
41 | 			<meta key="msapplication-tilecolor" name="msapplication-TileColor" content="#ffffff" />
42 | 			<meta key="theme-color" name="theme-color" content="#ffffff" />
43 | 			<meta key="slack-app-id" name="slack-app-id" content={process.env.NEXT_PUBLIC_SLACK_APP_ID} />
44 | 		</Head>
45 | 		<RecoilRoot>
46 | 			<UploadDrop>
47 | 				<UploadFile />
48 | 				<CurrentFile />
49 | 				<Navbar />
50 | 				<Component {...pageProps} />
51 | 				<ToastContainer />
52 | 			</UploadDrop>
53 | 		</RecoilRoot>
54 | 	</>
55 | )
56 | 
57 | export default App
58 | 


--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | export default class CustomDocument extends Document {
 4 | 	render = () => (
 5 | 		<Html lang="en">
 6 | 			<Head />
 7 | 			<body>
 8 | 				<Main />
 9 | 				<NextScript />
10 | 				<script id="hs-script-loader" src={process.env.NEXT_PUBLIC_HUBSPOT_URL} async />
11 | 			</body>
12 | 		</Html>
13 | 	)
14 | }
15 | 


--------------------------------------------------------------------------------
/pages/api/files/[id].ts:
--------------------------------------------------------------------------------
 1 | import { NextApiHandler } from 'next'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | import firebase from 'lib/firebase/admin'
 5 | import snapshotToFileMeta from 'lib/snapshotToFileMeta'
 6 | 
 7 | const firestore = firebase.firestore()
 8 | 
 9 | const handler: NextApiHandler<FileMeta | string | void> = async ({ method, query: { id } }, res) => {
10 | 	try {
11 | 		res.setHeader('Access-Control-Allow-Origin', '*')
12 | 		res.setHeader('Access-Control-Allow-Methods', 'GET')
13 | 		
14 | 		if (method === 'OPTIONS')
15 | 			return res.send()
16 | 		
17 | 		if (method !== 'GET')
18 | 			return res.status(400).send('Invalid method')
19 | 		
20 | 		if (typeof id !== 'string')
21 | 			return res.status(400).send('Invalid ID')
22 | 		
23 | 		const file = snapshotToFileMeta(await firestore.doc(`files/${id}`).get())
24 | 		
25 | 		if (!file)
26 | 			return res.status(404).send('Not found')
27 | 		
28 | 		res.send(file)
29 | 	} catch ({ message }) {
30 | 		res.status(500).send(message)
31 | 	}
32 | }
33 | 
34 | export default handler
35 | 


--------------------------------------------------------------------------------
/pages/api/files/index.ts:
--------------------------------------------------------------------------------
  1 | import { NextApiHandler, PageConfig } from 'next'
  2 | import { getExtension } from 'mime'
  3 | 
  4 | import FileMeta from 'models/FileMeta'
  5 | import { MAX_FILE_SIZE } from 'lib/constants'
  6 | import firebase from 'lib/firebase/admin'
  7 | import newId from 'lib/newId'
  8 | import snapshotToUser from 'lib/snapshotToUser'
  9 | 
 10 | const AUTHORIZATION_REGEX = /^Bearer (.+)$/
 11 | 
 12 | const { FieldValue } = firebase.firestore
 13 | 
 14 | const firestore = firebase.firestore()
 15 | const storage = firebase.storage().bucket()
 16 | 
 17 | const getApiKey = (authorization: string | undefined) =>
 18 | 	authorization?.match(AUTHORIZATION_REGEX)?.[1]
 19 | 
 20 | const getUserFromApiKey = async (apiKey: string) => {
 21 | 	const { empty, docs } = await firestore
 22 | 		.collection('users')
 23 | 		.where('apiKey', '==', apiKey)
 24 | 		.limit(1)
 25 | 		.get()
 26 | 
 27 | 	return empty ? null : snapshotToUser(docs[0], true)
 28 | }
 29 | 
 30 | const handler: NextApiHandler<FileMeta | string | void> = async (
 31 | 	{ method, headers, body },
 32 | 	res
 33 | ) => {
 34 | 	try {
 35 | 		res.setHeader('Access-Control-Allow-Origin', '*')
 36 | 		res.setHeader('Access-Control-Allow-Methods', 'POST')
 37 | 		res.setHeader('Access-Control-Allow-Headers', [
 38 | 			'Authorization',
 39 | 			'Content-Type'
 40 | 		])
 41 | 
 42 | 		if (method === 'OPTIONS') return res.send()
 43 | 		if (method !== 'POST') return res.status(400).send('Invalid method')
 44 | 
 45 | 		if (typeof body !== 'object') return res.status(400).send('Invalid body')
 46 | 
 47 | 		const apiKey = getApiKey(headers.authorization)
 48 | 		if (!apiKey) return res.status(400).send('Missing API key')
 49 | 
 50 | 		const { name, type, public: isPublic, data } = body
 51 | 
 52 | 		if (
 53 | 			!(
 54 | 				typeof name === 'string' &&
 55 | 				name &&
 56 | 				typeof type === 'string' &&
 57 | 				type &&
 58 | 				typeof isPublic === 'boolean' &&
 59 | 				typeof data === 'string' &&
 60 | 				data
 61 | 			)
 62 | 		)
 63 | 			return res.status(400).send('Invalid body')
 64 | 
 65 | 		const indexOfDot = name.lastIndexOf('.')
 66 | 		const extension = ~indexOfDot
 67 | 			? name.slice(indexOfDot + 1)
 68 | 			: getExtension(type)
 69 | 
 70 | 		if (!extension) return res.status(400).send('Invalid type')
 71 | 
 72 | 		const id = `${newId()}.${extension}`
 73 | 		const file = Buffer.from(data, 'base64')
 74 | 		const size = file.byteLength
 75 | 
 76 | 		if (size > MAX_FILE_SIZE)
 77 | 			return res.status(400).send('File too large, maximum is 10 GB')
 78 | 
 79 | 		const user = await getUserFromApiKey(apiKey)
 80 | 		if (!user) return res.status(400).send('Invalid API key')
 81 | 
 82 | 		await storage.file(id).save(file, {
 83 | 			public: true,
 84 | 			gzip: true,
 85 | 			metadata: {
 86 | 				contentType: type,
 87 | 				contentDisposition: `inline; filename=${JSON.stringify(name)}`,
 88 | 				cacheControl: 'public, max-age=31536000, s-maxage=31536000',
 89 | 				metadata: { name, owner: user.id }
 90 | 			}
 91 | 		})
 92 | 
 93 | 		await firestore.doc(`files/${id}`).set({
 94 | 			name,
 95 | 			type,
 96 | 			size,
 97 | 			owner: user.id,
 98 | 			comments: 0,
 99 | 			uploaded: FieldValue.serverTimestamp(),
100 | 			public: isPublic
101 | 		})
102 | 
103 | 		res.send({
104 | 			id,
105 | 			name,
106 | 			type,
107 | 			size,
108 | 			owner: user.id,
109 | 			comments: 0,
110 | 			uploaded: Date.now(),
111 | 			public: isPublic
112 | 		})
113 | 	} catch ({ message }) {
114 | 		res.status(500).send(message)
115 | 	}
116 | }
117 | 
118 | export const config: PageConfig = {
119 | 	api: {
120 | 		bodyParser: { sizeLimit: MAX_FILE_SIZE }
121 | 	}
122 | }
123 | 
124 | export default handler
125 | 


--------------------------------------------------------------------------------
/pages/api/users/id/[id].ts:
--------------------------------------------------------------------------------
 1 | import { NextApiHandler } from 'next'
 2 | 
 3 | import User from 'models/User'
 4 | import firebase from 'lib/firebase/admin'
 5 | import snapshotToUser from 'lib/snapshotToUser'
 6 | 
 7 | const firestore = firebase.firestore()
 8 | 
 9 | const handler: NextApiHandler<User | string | void> = async ({ method, query: { id } }, res) => {
10 | 	try {
11 | 		res.setHeader('Access-Control-Allow-Origin', '*')
12 | 		res.setHeader('Access-Control-Allow-Methods', 'GET')
13 | 		
14 | 		if (method === 'OPTIONS')
15 | 			return res.send()
16 | 		
17 | 		if (method !== 'GET')
18 | 			return res.status(400).send('Invalid method')
19 | 		
20 | 		if (typeof id !== 'string')
21 | 			return res.status(400).send('Invalid ID')
22 | 		
23 | 		const user = snapshotToUser(await firestore.doc(`users/${id}`).get())
24 | 		
25 | 		if (!user)
26 | 			return res.status(404).send('Not found')
27 | 		
28 | 		res.send(user)
29 | 	} catch ({ message }) {
30 | 		res.status(500).send(message)
31 | 	}
32 | }
33 | 
34 | export default handler
35 | 


--------------------------------------------------------------------------------
/pages/api/users/slug/[slug].ts:
--------------------------------------------------------------------------------
 1 | import { NextApiHandler } from 'next'
 2 | 
 3 | import User from 'models/User'
 4 | import firebase from 'lib/firebase/admin'
 5 | import snapshotToUser from 'lib/snapshotToUser'
 6 | 
 7 | const firestore = firebase.firestore()
 8 | 
 9 | const handler: NextApiHandler<User | string | void> = async ({ method, query: { slug } }, res) => {
10 | 	try {
11 | 		res.setHeader('Access-Control-Allow-Origin', '*')
12 | 		res.setHeader('Access-Control-Allow-Methods', 'GET')
13 | 		
14 | 		if (method === 'OPTIONS')
15 | 			return res.send()
16 | 		
17 | 		if (method !== 'GET')
18 | 			return res.status(400).send('Invalid method')
19 | 		
20 | 		if (typeof slug !== 'string')
21 | 			return res.status(400).send('Invalid slug')
22 | 		
23 | 		const { docs } = await firestore
24 | 			.collection('users')
25 | 			.where('slug', '==', slug)
26 | 			.limit(1)
27 | 			.get()
28 | 		
29 | 		const snapshot = docs[0]
30 | 		const user = snapshot && snapshotToUser(snapshot)
31 | 		
32 | 		if (!user)
33 | 			return res.status(404).send('Not found')
34 | 		
35 | 		res.send(user)
36 | 	} catch ({ message }) {
37 | 		res.status(500).send(message)
38 | 	}
39 | }
40 | 
41 | export default handler
42 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { NextPage, GetStaticProps } from 'next'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | import getRecentlyUploadedFiles from 'lib/getRecentlyUploadedFiles'
 5 | import { REVALIDATE } from 'lib/constants'
 6 | import Head from 'components/Head'
 7 | import Gradient from 'components/Gradient'
 8 | import RecentlyUploadedFiles from 'components/RecentlyUploadedFiles'
 9 | import Footer from 'components/Footer'
10 | 
11 | import styles from 'styles/Home.module.scss'
12 | 
13 | interface HomeProps {
14 | 	files: FileMeta[]
15 | }
16 | 
17 | const Home: NextPage<HomeProps> = ({ files }) => (
18 | 	<div className={styles.root}>
19 | 		<Head
20 | 			url="https://filein.io"
21 | 			title="filein - The best way to share files"
22 | 			description="The best way to share files"
23 | 		/>
24 | 		<Gradient className={styles.header}>
25 | 			<h1 className={styles.title}>
26 | 				The best way to share files
27 | 			</h1>
28 | 			<p className={styles.subtitle}>
29 | 				Super fast file hosting. Free forever. Upload public or private files.
30 | 			</p>
31 | 			<RecentlyUploadedFiles
32 | 				className={styles.recentlyUploadedFiles}
33 | 				files={files}
34 | 			/>
35 | 		</Gradient>
36 | 		<Footer className={styles.footer} />
37 | 	</div>
38 | )
39 | 
40 | export const getStaticProps: GetStaticProps<HomeProps> = async () => ({
41 | 	props: { files: await getRecentlyUploadedFiles() },
42 | 	revalidate: REVALIDATE
43 | })
44 | 
45 | export default Home
46 | 


--------------------------------------------------------------------------------
/pages/privacy.tsx:
--------------------------------------------------------------------------------
 1 | import { NextPage } from 'next'
 2 | 
 3 | import Head from 'components/Head'
 4 | import Gradient from 'components/Gradient'
 5 | import Document from 'docs/privacy.mdx'
 6 | import Footer from 'components/Footer'
 7 | 
 8 | import styles from 'styles/Privacy.module.scss'
 9 | 
10 | const Privacy: NextPage = () => (
11 | 	<div className={styles.root}>
12 | 		<Head
13 | 			url="https://filein.io/privacy"
14 | 			title="Privacy - filein"
15 | 			description="View filein's privacy policy"
16 | 			storagePreconnect={false}
17 | 		/>
18 | 		<Gradient className={styles.header}>
19 | 			<h1 className={styles.title}>Privacy</h1>
20 | 			<article className={styles.document}>
21 | 				<Document />
22 | 			</article>
23 | 		</Gradient>
24 | 		<Footer className={styles.footer} />
25 | 	</div>
26 | )
27 | 
28 | export default Privacy
29 | 


--------------------------------------------------------------------------------
/pages/slack.tsx:
--------------------------------------------------------------------------------
 1 | import { NextPage } from 'next'
 2 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 3 | import { faSlack } from '@fortawesome/free-brands-svg-icons'
 4 | 
 5 | import Head from 'components/Head'
 6 | import Gradient from 'components/Gradient'
 7 | import Footer from 'components/Footer'
 8 | 
 9 | import styles from 'styles/Slack.module.scss'
10 | import SlackInstallButton from 'components/SlackInstallButton'
11 | 
12 | const Slack: NextPage = () => (
13 | 	<div className={styles.root}>
14 | 		<Head
15 | 			url="https://filein.io/slack"
16 | 			title="Slack - filein"
17 | 			description="Add filein to your Slack workspace"
18 | 			storagePreconnect={false}
19 | 		/>
20 | 		<Gradient className={styles.header}>
21 | 			<FontAwesomeIcon className={styles.titleIcon} icon={faSlack} />
22 | 			<h1 className={styles.title}>
23 | 				Slack + filein
24 | 			</h1>
25 | 			<p className={styles.subtitle}>
26 | 				Upload files without leaving your workspace
27 | 			</p>
28 | 			<SlackInstallButton className={styles.install} />
29 | 		</Gradient>
30 | 		<Footer className={styles.footer} />
31 | 	</div>
32 | )
33 | 
34 | export default Slack
35 | 


--------------------------------------------------------------------------------
/pages/support.tsx:
--------------------------------------------------------------------------------
 1 | import { NextPage } from 'next'
 2 | 
 3 | import Head from 'components/Head'
 4 | import Gradient from 'components/Gradient'
 5 | import Footer from 'components/Footer'
 6 | 
 7 | import styles from 'styles/Support.module.scss'
 8 | 
 9 | const SUPPORT_EMAIL = 'kenmueller0@gmail.com'
10 | 
11 | const Support: NextPage = () => (
12 | 	<div className={styles.root}>
13 | 		<Head
14 | 			url="https://filein.io/support"
15 | 			title="Support - filein"
16 | 			description="Contact filein's support team"
17 | 			storagePreconnect={false}
18 | 		/>
19 | 		<Gradient className={styles.header}>
20 | 			<h1 className={styles.title}>Support</h1>
21 | 			<p className={styles.subtitle}>
22 | 				Email us at <a
23 | 					className={styles.email}
24 | 					href={`mailto:${SUPPORT_EMAIL}`}
25 | 					rel="noopener noreferrer"
26 | 					target="_blank"
27 | 				>
28 | 					{SUPPORT_EMAIL}
29 | 				</a> or use the live chat on the bottom right of the page.
30 | 			</p>
31 | 		</Gradient>
32 | 		<Footer className={styles.footer} />
33 | 	</div>
34 | )
35 | 
36 | export default Support
37 | 


--------------------------------------------------------------------------------
/pages/u/[slug].tsx:
--------------------------------------------------------------------------------
 1 | import { useCallback, useEffect } from 'react'
 2 | import { useSetRecoilState } from 'recoil'
 3 | import { NextPage, GetStaticPaths, GetStaticProps } from 'next'
 4 | import { useRouter } from 'next/router'
 5 | 
 6 | import User from 'models/User'
 7 | import FileMeta from 'models/FileMeta'
 8 | import getUserSlugs from 'lib/getUserSlugs'
 9 | import getUserFromSlug from 'lib/getUserFromSlug'
10 | import getFiles from 'lib/getFiles'
11 | import getFilePredicate from 'lib/getFilePredicate'
12 | import { REVALIDATE } from 'lib/constants'
13 | import usersState from 'state/users'
14 | import useFiles from 'hooks/useFiles'
15 | import Head from 'components/Head'
16 | import Gradient from 'components/Gradient'
17 | import Search from 'components/Search'
18 | import FileGrid from 'components/FileGrid'
19 | import FileCell from 'components/FileCell'
20 | import Footer from 'components/Footer'
21 | 
22 | import styles from 'styles/UserPage.module.scss'
23 | 
24 | interface UserPageProps {
25 | 	user: User
26 | 	files: FileMeta[]
27 | }
28 | 
29 | const UserPage: NextPage<UserPageProps> = ({ user, files: _files }) => {
30 | 	const setUsers = useSetRecoilState(usersState)
31 | 	
32 | 	const router = useRouter()
33 | 	const files = useFiles(user.id) ?? _files
34 | 	const query = (router.query.q ?? '') as string
35 | 	
36 | 	const setQuery = useCallback((query: string) => {
37 | 		router.replace(
38 | 			`/u/${user.slug}${query ? `?q=${encodeURIComponent(query)}` : ''}`,
39 | 			undefined,
40 | 			{ shallow: true }
41 | 		)
42 | 	}, [user.slug, router])
43 | 	
44 | 	useEffect(() => {
45 | 		setUsers(users => ({ ...users, [user.id]: user }))
46 | 	}, [user, setUsers])
47 | 	
48 | 	return (
49 | 		<div className={styles.root}>
50 | 			<Head
51 | 				url={`https://filein.io/u/${user.slug}`}
52 | 				title={`${user.name} - filein`}
53 | 				description={`View ${user.name}'s ${user.files} file${user.files === 1 ? '' : 's'}`}
54 | 			/>
55 | 			<Gradient className={styles.header}>
56 | 				<h1 className={styles.name}>{user.name}</h1>
57 | 				<p className={styles.filesCount}>
58 | 					{user.files} file{user.files === 1 ? '' : 's'}
59 | 				</p>
60 | 				<div className={styles.filesContainer}>
61 | 					<Search placeholder="Files" value={query} setValue={setQuery} />
62 | 					<FileGrid className={styles.files}>
63 | 						{files?.filter(getFilePredicate(query)).map(file => (
64 | 							<FileCell key={file.id} file={file} />
65 | 						))}
66 | 					</FileGrid>
67 | 				</div>
68 | 			</Gradient>
69 | 			<Footer className={styles.footer} />
70 | 		</div>
71 | 	)
72 | }
73 | 
74 | export const getStaticPaths: GetStaticPaths = async () => ({
75 | 	paths: (await getUserSlugs()).map(slug => ({
76 | 		params: { slug }
77 | 	})),
78 | 	fallback: 'blocking'
79 | })
80 | 
81 | export const getStaticProps: GetStaticProps<UserPageProps> = async ({ params }) => {
82 | 	const user = await getUserFromSlug(params.slug as string)
83 | 	
84 | 	if (!user)
85 | 		return { notFound: true }
86 | 	
87 | 	return {
88 | 		props: { user, files: await getFiles(user.id) },
89 | 		revalidate: REVALIDATE
90 | 	}
91 | }
92 | 
93 | export default UserPage
94 | 


--------------------------------------------------------------------------------
/public/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 | 	<msapplication>
 4 | 		<tile>
 5 | 			<square150x150logo src="/images/mstile-150x150.png" />
 6 | 			<TileColor>#ffffff</TileColor>
 7 | 		</tile>
 8 | 	</msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenmueller/filein-frontend/f8cf657ddb9ca40b6e287e166296b61ac8bc8f62/public/favicon.ico


--------------------------------------------------------------------------------
/public/images/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenmueller/filein-frontend/f8cf657ddb9ca40b6e287e166296b61ac8bc8f62/public/images/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/images/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenmueller/filein-frontend/f8cf657ddb9ca40b6e287e166296b61ac8bc8f62/public/images/android-chrome-512x512.png


--------------------------------------------------------------------------------
/public/images/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kenmueller/filein-frontend/f8cf657ddb9ca40b6e287e166296b61ac8bc8f62/public/images/mstile-150x150.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *
2 | 


--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "filein",
 3 | 	"short_name": "filein",
 4 | 	"icons": [
 5 | 		{
 6 | 			"src": "/images/android-chrome-192x192.png",
 7 | 			"sizes": "192x192",
 8 | 			"type": "image/png"
 9 | 		},
10 | 		{
11 | 			"src": "/images/android-chrome-512x512.png",
12 | 			"sizes": "512x512",
13 | 			"type": "image/png"
14 | 		}
15 | 	],
16 | 	"theme_color": "#ffffff",
17 | 	"background_color": "#ffffff",
18 | 	"display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/state/comments.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'recoil'
 2 | 
 3 | import Comment from 'models/Comment'
 4 | 
 5 | const commentsState = atom<Record<string, Comment[]>>({
 6 | 	key: 'comments',
 7 | 	default: {}
 8 | })
 9 | 
10 | export default commentsState
11 | 


--------------------------------------------------------------------------------
/state/currentFile.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'recoil'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | 
 5 | const currentFileState = atom<FileMeta | null>({
 6 | 	key: 'currentFile',
 7 | 	default: null,
 8 | 	dangerouslyAllowMutability: true
 9 | })
10 | 
11 | export default currentFileState
12 | 


--------------------------------------------------------------------------------
/state/currentUser.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'recoil'
 2 | 
 3 | import CurrentUser from 'models/CurrentUser'
 4 | 
 5 | const currentUserState = atom<CurrentUser | null | undefined>({
 6 | 	key: 'currentUser',
 7 | 	default: undefined,
 8 | 	dangerouslyAllowMutability: true
 9 | })
10 | 
11 | export default currentUserState
12 | 


--------------------------------------------------------------------------------
/state/files.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'recoil'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | 
 5 | const filesState = atom<Record<string, FileMeta[]>>({
 6 | 	key: 'files',
 7 | 	default: {},
 8 | 	dangerouslyAllowMutability: true
 9 | })
10 | 
11 | export default filesState
12 | 


--------------------------------------------------------------------------------
/state/recentlyUploadedFiles.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'recoil'
 2 | 
 3 | import FileMeta from 'models/FileMeta'
 4 | 
 5 | const recentlyUploadedFilesState = atom<FileMeta[] | null>({
 6 | 	key: 'recentlyUploadedFiles',
 7 | 	default: null,
 8 | 	dangerouslyAllowMutability: true
 9 | })
10 | 
11 | export default recentlyUploadedFilesState
12 | 


--------------------------------------------------------------------------------
/state/uploadFile.ts:
--------------------------------------------------------------------------------
1 | import { atom } from 'recoil'
2 | 
3 | const uploadFileState = atom<File | null>({
4 | 	key: 'uploadFile',
5 | 	default: null
6 | })
7 | 
8 | export default uploadFileState
9 | 


--------------------------------------------------------------------------------
/state/users.ts:
--------------------------------------------------------------------------------
 1 | import { atom } from 'recoil'
 2 | 
 3 | import User from 'models/User'
 4 | 
 5 | const usersState = atom<Record<string, User>>({
 6 | 	key: 'users',
 7 | 	default: {}
 8 | })
 9 | 
10 | export default usersState
11 | 


--------------------------------------------------------------------------------
/styles/AccessToggle.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'colors';
 2 | 
 3 | $indicator-padding: 10px;
 4 | 
 5 | .root {
 6 | 	display: flex;
 7 | 	align-items: center;
 8 | 	color: transparentize(white, 0.3);
 9 | }
10 | 
11 | .input {
12 | 	display: none;
13 | }
14 | 
15 | .icon {
16 | 	position: relative;
17 | 	display: flex;
18 | 	justify-content: center;
19 | 	align-items: center;
20 | 	padding: 6px 8px;
21 | 	cursor: default;
22 | 	color: white;
23 | 	background: colors.$red;
24 | 	border-radius: 8px;
25 | 	transition: background 0.3s, opacity 0.3s;
26 | 	
27 | 	&::after {
28 | 		content: 'make public';
29 | 		position: absolute;
30 | 		top: 50%;
31 | 		left: 100%;
32 | 		padding: 0 0 0 $indicator-padding;
33 | 		white-space: nowrap;
34 | 		opacity: 0;
35 | 		transform: translateY(-50%);
36 | 		transition: opacity 0.3s;
37 | 	}
38 | 	
39 | 	.input:not(:disabled) + & {
40 | 		cursor: pointer;
41 | 		
42 | 		&:hover {
43 | 			opacity: 0.7;
44 | 			
45 | 			&::after {
46 | 				opacity: 1;
47 | 			}
48 | 		}
49 | 	}
50 | }
51 | 
52 | .public {
53 | 	background: colors.$blue;
54 | 	
55 | 	&::after {
56 | 		content: 'make private';
57 | 	}
58 | }
59 | 
60 | .leftIndicator::after {
61 | 	left: unset;
62 | 	right: 100%;
63 | 	padding: 0 $indicator-padding 0 0;
64 | }
65 | 


--------------------------------------------------------------------------------
/styles/AuthDropdownContent.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'colors';
 2 | 
 3 | .root {
 4 | 	min-width: 300px;
 5 | 	padding: 12px;
 6 | 	background: colors.$dark;
 7 | 	border-radius: 8px;
 8 | 	box-shadow:
 9 | 		0 0 0 100vmax transparentize(black, 0.7),
10 | 		0 0 10px 2px transparentize(black, 0.9);
11 | }
12 | 
13 | .row {
14 | 	& + & {
15 | 		margin-top: 12px;
16 | 	}
17 | }
18 | 
19 | .action {
20 | 	display: flex;
21 | 	align-items: center;
22 | 	width: 100%;
23 | 	padding: 8px 12px;
24 | 	text-decoration: none;
25 | 	font-size: 20px;
26 | 	color: white;
27 | 	background: transparent;
28 | 	border-radius: 8px;
29 | 	transition: background 0.3s;
30 | 	
31 | 	&[aria-disabled='true'] {
32 | 		pointer-events: none;
33 | 		opacity: 0.5;
34 | 	}
35 | 	
36 | 	&:not([aria-disabled='true']):hover {
37 | 		background: transparentize(white, 0.9);
38 | 	}
39 | }
40 | 
41 | .danger {
42 | 	color: colors.$red;
43 | }
44 | 
45 | .actionMessage {
46 | 	margin-left: 12px;
47 | 	font-size: 16px;
48 | 	font-weight: 900;
49 | }
50 | 
51 | .copyApiKeyMessage {
52 | 	margin-left: 8px;
53 | }
54 | 


--------------------------------------------------------------------------------
/styles/AuthDropdownTrigger.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 | 	display: flex;
 3 | 	align-items: center;
 4 | 	padding: 0 16px;
 5 | 	font-size: 18px;
 6 | 	color: var(--color);
 7 | 	background: transparent;
 8 | 	border: 2px solid var(--color);
 9 | 	border-radius: 8px;
10 | 	transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.3s;
11 | 	
12 | 	&:hover {
13 | 		background: var(--background-hover);
14 | 	}
15 | 	
16 | 	&:active {
17 | 		transform: translateY(-2px);
18 | 	}
19 | }
20 | 
21 | .name {
22 | 	flex-grow: 1;
23 | 	margin-right: 8px;
24 | 	overflow: hidden;
25 | 	text-overflow: ellipsis;
26 | 	white-space: nowrap;
27 | 	font-size: 16px;
28 | 	font-weight: 900;
29 | }
30 | 


--------------------------------------------------------------------------------
/styles/CommentRow.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'colors';
 2 | @use 'spinner' as *;
 3 | 
 4 | .root {
 5 | 	max-width: 75%;
 6 | 	width: 400px;
 7 | 	word-wrap: break-word;
 8 | 	animation: send 0.15s ease-in-out;
 9 | 	
10 | 	& + & {
11 | 		margin-top: 4px;
12 | 	}
13 | 	
14 | 	& + .showName {
15 | 		margin-top: 20px;
16 | 	}
17 | 	
18 | 	@keyframes send {
19 | 		0% {
20 | 			opacity: 0.5;
21 | 			transform: scale(0.95) translateY(4px);
22 | 		}
23 | 		
24 | 		50% {
25 | 			transform: scale(1.05);
26 | 		}
27 | 	}
28 | }
29 | 
30 | .fromSelf {
31 | 	margin-left: auto;
32 | 	
33 | 	> .body {
34 | 		margin-left: auto;
35 | 		color: white;
36 | 		background: colors.$blue;
37 | 	}
38 | }
39 | 
40 | .link {
41 | 	display: flex;
42 | 	align-items: center;
43 | 	max-width: max-content;
44 | 	margin-bottom: 4px;
45 | 	text-decoration: none;
46 | 	font-size: 14px;
47 | 	color: colors.$comment;
48 | 	
49 | 	&:hover {
50 | 		> .name {
51 | 			text-decoration: underline;
52 | 		}
53 | 		
54 | 		> .icon {
55 | 			transform: translateX(4px);
56 | 		}
57 | 	}
58 | }
59 | 
60 | .name {
61 | 	max-width: 200px;
62 | 	margin-right: 4px;
63 | 	overflow: hidden;
64 | 	text-overflow: ellipsis;
65 | 	white-space: nowrap;
66 | 	font-weight: 900;
67 | }
68 | 
69 | .icon {
70 | 	transition: transform 0.3s;
71 | }
72 | 
73 | .spinner {
74 | 	@include spinner(14px, 3px, colors.$comment);
75 | 	
76 | 	margin-bottom: 2px;
77 | }
78 | 
79 | .body {
80 | 	max-width: max-content;
81 | 	padding: 6px 12px;
82 | 	background: colors.$comment;
83 | 	border-radius: 16px;
84 | }
85 | 


--------------------------------------------------------------------------------
/styles/Comments.module.scss:
--------------------------------------------------------------------------------
  1 | @use 'colors';
  2 | @use 'spinner' as *;
  3 | 
  4 | $scrollbar-width: 2px;
  5 | 
  6 | .root {
  7 | 	display: flex;
  8 | 	flex-direction: column;
  9 | 	overflow-y: auto;
 10 | }
 11 | 
 12 | .comments {
 13 | 	flex-grow: 1;
 14 | 	display: flex;
 15 | 	flex-direction: column;
 16 | 	padding: 0 4px 8px 0;
 17 | 	overflow-y: auto;
 18 | 	
 19 | 	&::-webkit-scrollbar {
 20 | 		width: $scrollbar-width;
 21 | 	}
 22 | 	
 23 | 	&::-webkit-scrollbar-thumb {
 24 | 		background: colors.$scrollbar;
 25 | 		border-radius: $scrollbar-width / 2;
 26 | 	}
 27 | }
 28 | 
 29 | .empty {
 30 | 	margin: auto;
 31 | 	text-align: center;
 32 | 	font-size: 20px;
 33 | 	font-weight: 900;
 34 | 	color: white;
 35 | }
 36 | 
 37 | .commentsSpinner {
 38 | 	@include spinner(20px, 4px, white);
 39 | 	
 40 | 	margin: auto;
 41 | }
 42 | 
 43 | .form {
 44 | 	flex-shrink: 0;
 45 | 	display: flex;
 46 | 	position: relative;
 47 | 	height: 35px;
 48 | 	margin-top: 8px;
 49 | }
 50 | 
 51 | .input {
 52 | 	flex-grow: 1;
 53 | 	width: 0;
 54 | 	margin-right: 8px;
 55 | 	padding: 0 10px 0 37px;
 56 | 	font-size: 16px;
 57 | 	color: white;
 58 | 	background: transparentize(white, 0.9);
 59 | 	border-radius: 8px;
 60 | 	transition: background 0.3s;
 61 | 	
 62 | 	&::placeholder {
 63 | 		color: transparentize(white, 0.5);
 64 | 	}
 65 | 	
 66 | 	&:not(:disabled) {
 67 | 		&:hover,
 68 | 		&:focus {
 69 | 			background: transparentize(white, 0.8);
 70 | 			
 71 | 			+ .inputIcon {
 72 | 				opacity: 1;
 73 | 			}
 74 | 		}
 75 | 	}
 76 | }
 77 | 
 78 | .inputIcon {
 79 | 	position: absolute;
 80 | 	top: 10px;
 81 | 	left: 12px;
 82 | 	pointer-events: none;
 83 | 	color: white;
 84 | 	opacity: 0.7;
 85 | 	transition: opacity 0.3s;
 86 | }
 87 | 
 88 | .button {
 89 | 	--color: white;
 90 | 	
 91 | 	flex-shrink: 0;
 92 | 	display: flex;
 93 | 	justify-content: center;
 94 | 	align-items: center;
 95 | 	min-width: 72px;
 96 | 	font-size: 16px;
 97 | 	font-weight: 900;
 98 | 	color: var(--color);
 99 | 	background: colors.$blue;
100 | 	border-radius: 8px;
101 | 	transition: color 0.3s, background 0.3s, opacity 0.3s, transform 0.3s;
102 | 	
103 | 	&:disabled {
104 | 		opacity: 0.7;
105 | 	}
106 | 	
107 | 	&:not(:disabled):hover {
108 | 		--color: #{colors.$blue};
109 | 		
110 | 		background: white;
111 | 	}
112 | 	
113 | 	&:active {
114 | 		transform: translateY(-2px);
115 | 	}
116 | }
117 | 
118 | .buttonSpinner {
119 | 	@include spinner(16px, 3px, var(--color));
120 | }
121 | 


--------------------------------------------------------------------------------
/styles/CurrentFile.module.scss:
--------------------------------------------------------------------------------
  1 | @use 'colors';
  2 | @use 'spinner' as *;
  3 | 
  4 | .root {
  5 | 	max-width: 95%;
  6 | 	width: 1000px;
  7 | 	max-height: 95%;
  8 | 	background: colors.$dark;
  9 | 	border-radius: 8px;
 10 | 	box-shadow: 0 0 10px 2px transparentize(black, 0.9);
 11 | }
 12 | 
 13 | .header {
 14 | 	display: flex;
 15 | 	align-items: center;
 16 | 	padding: 12px 16px;
 17 | 	border-bottom: 2px solid #333;
 18 | }
 19 | 
 20 | .headerName,
 21 | .accessToggle {
 22 | 	margin-right: 16px;
 23 | }
 24 | 
 25 | .headerName {
 26 | 	overflow: hidden;
 27 | 	text-overflow: ellipsis;
 28 | 	white-space: nowrap;
 29 | 	font-weight: 900;
 30 | 	color: white;
 31 | }
 32 | 
 33 | .close {
 34 | 	flex-shrink: 0;
 35 | 	margin-left: auto;
 36 | 	font-size: 20px;
 37 | 	color: white;
 38 | 	background: transparent;
 39 | 	transition: opacity 0.3s, transform 0.3s;
 40 | 	
 41 | 	&:hover {
 42 | 		opacity: 0.7;
 43 | 	}
 44 | 	
 45 | 	&:active {
 46 | 		transform: translateY(-2px);
 47 | 	}
 48 | }
 49 | 
 50 | .closeIcon {
 51 | 	display: block !important;
 52 | }
 53 | 
 54 | .content {
 55 | 	display: flex;
 56 | 	height: 500px;
 57 | 	margin: 16px;
 58 | }
 59 | 
 60 | .preview {
 61 | 	margin-right: 16px;
 62 | }
 63 | 
 64 | .main {
 65 | 	flex-shrink: 0;
 66 | 	flex-grow: 1;
 67 | 	display: flex;
 68 | 	flex-direction: column;
 69 | 	min-width: 400px;
 70 | }
 71 | 
 72 | .info {
 73 | 	flex-shrink: 0;
 74 | 	display: flex;
 75 | 	justify-content: space-between;
 76 | }
 77 | 
 78 | .meta {
 79 | 	flex-grow: 1;
 80 | 	color: white;
 81 | }
 82 | 
 83 | .name {
 84 | 	max-width: 400px;
 85 | 	overflow: hidden;
 86 | 	text-overflow: ellipsis;
 87 | 	white-space: nowrap;
 88 | 	font-size: 20px;
 89 | 	font-weight: 900;
 90 | }
 91 | 
 92 | .editName {
 93 | 	max-width: 400px;
 94 | 	font-size: 20px;
 95 | }
 96 | 
 97 | .user {
 98 | 	margin-top: 8px;
 99 | 	opacity: 0.7;
100 | }
101 | 
102 | .userLink {
103 | 	display: inline-flex;
104 | 	align-items: center;
105 | 	text-decoration: none;
106 | 	color: white;
107 | 	
108 | 	&:hover {
109 | 		> .userName {
110 | 			text-decoration: underline;
111 | 		}
112 | 		
113 | 		> .userIcon {
114 | 			transform: translateX(4px);
115 | 		}
116 | 	}
117 | }
118 | 
119 | .userName {
120 | 	display: inline-block;
121 | 	max-width: 200px;
122 | 	overflow: hidden;
123 | 	text-overflow: ellipsis;
124 | 	white-space: nowrap;
125 | 	vertical-align: top;
126 | 	font-weight: 900;
127 | }
128 | 
129 | .userIcon {
130 | 	margin-left: 6px;
131 | 	transition: transform 0.3s;
132 | }
133 | 
134 | .spinner {
135 | 	@include spinner(16px, 3px, white);
136 | 	
137 | 	margin-left: 4px;
138 | 	vertical-align: middle;
139 | }
140 | 
141 | .actions {
142 | 	flex-shrink: 0;
143 | 	display: flex;
144 | 	margin-left: 16px;
145 | }
146 | 
147 | .action {
148 | 	$dimension: 40px;
149 | 	
150 | 	display: flex;
151 | 	justify-content: center;
152 | 	align-items: center;
153 | 	width: $dimension;
154 | 	height: $dimension;
155 | 	font-size: 16px;
156 | 	color: white;
157 | 	background: var(--color);
158 | 	border-radius: 8px;
159 | 	transition: color 0.3s, background 0.3s, transform 0.3s;
160 | 	
161 | 	& + & {
162 | 		margin-left: 12px;
163 | 	}
164 | 	
165 | 	&:hover {
166 | 		color: var(--color);
167 | 		background: white;
168 | 	}
169 | 	
170 | 	&:active {
171 | 		transform: translateY(-2px);
172 | 	}
173 | }
174 | 
175 | .download { --color: #{colors.$purple}; }
176 | .copy { --color: #{colors.$green}; }
177 | .delete { --color: #{colors.$red}; }
178 | 
179 | .comments {
180 | 	flex-grow: 1;
181 | 	margin-top: 16px;
182 | }
183 | 


--------------------------------------------------------------------------------
/styles/Dropdown.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 | 	position: relative;
 3 | }
 4 | 
 5 | .trigger {
 6 | 	width: 100%;
 7 | 	height: 100%;
 8 | }
 9 | 
10 | .content {
11 | 	position: absolute;
12 | 	top: 100%;
13 | 	right: 0;
14 | 	margin-top: 8px;
15 | 	transition: opacity 0.15s, transform 0.15s;
16 | 	
17 | 	&[aria-hidden='true'] {
18 | 		pointer-events: none;
19 | 		opacity: 0;
20 | 		transform: translateX(-20px);
21 | 	}
22 | }
23 | 


--------------------------------------------------------------------------------
/styles/EditFileName.module.scss:
--------------------------------------------------------------------------------
 1 | .input {
 2 | 	min-width: 0;
 3 | 	width: 100%;
 4 | 	padding: 4px 8px;
 5 | 	font-size: inherit;
 6 | 	font-weight: 900;
 7 | 	color: white;
 8 | 	background: transparentize(white, 0.9);
 9 | 	border-radius: 8px;
10 | 	transition: background 0.3s;
11 | 	
12 | 	&::placeholder {
13 | 		color: transparentize(white, 0.5);
14 | 	}
15 | 	
16 | 	&:not(:disabled) {
17 | 		&:hover,
18 | 		&:focus {
19 | 			background: transparentize(white, 0.8);
20 | 		}
21 | 	}
22 | }
23 | 


--------------------------------------------------------------------------------
/styles/EditUserName.module.scss:
--------------------------------------------------------------------------------
 1 | .input {
 2 | 	min-width: 0;
 3 | 	width: 100%;
 4 | 	height: 36px;
 5 | 	padding: 0 12px;
 6 | 	font-size: 16px;
 7 | 	font-weight: 900;
 8 | 	color: white;
 9 | 	background: transparentize(white, 0.9);
10 | 	border-radius: 8px;
11 | 	transition: background 0.3s;
12 | 	
13 | 	&::placeholder {
14 | 		color: transparentize(white, 0.5);
15 | 	}
16 | 	
17 | 	&:hover,
18 | 	&:focus {
19 | 		background: transparentize(white, 0.8);
20 | 	}
21 | }
22 | 


--------------------------------------------------------------------------------
/styles/FileCell.module.scss:
--------------------------------------------------------------------------------
  1 | @use 'colors';
  2 | @use 'spinner' as *;
  3 | 
  4 | .root {
  5 | 	display: flex;
  6 | 	position: relative;
  7 | 	overflow: hidden;
  8 | 	background: colors.$dark;
  9 | 	border-radius: 8px;
 10 | 	transition: transform 0.3s;
 11 | 	
 12 | 	&::before {
 13 | 		content: '';
 14 | 		display: block;
 15 | 		padding-bottom: 100%;
 16 | 	}
 17 | 	
 18 | 	&:hover {
 19 | 		transform: scale(1.02);
 20 | 	}
 21 | 	
 22 | 	&:active {
 23 | 		transform: none;
 24 | 	}
 25 | }
 26 | 
 27 | .image,
 28 | .video,
 29 | .pdf {
 30 | 	&:not(.fallback)::after {
 31 | 		content: '';
 32 | 		position: absolute;
 33 | 		top: 0;
 34 | 		right: 0;
 35 | 		bottom: 0;
 36 | 		left: 0;
 37 | 		background: transparentize(colors.$dark, 0.5);
 38 | 	}
 39 | }
 40 | 
 41 | .imageElement {
 42 | 	position: absolute;
 43 | 	width: 100%;
 44 | 	height: 100%;
 45 | 	object-fit: cover;
 46 | }
 47 | 
 48 | .videoIcon {
 49 | 	position: absolute;
 50 | 	top: 12px;
 51 | 	right: 12px;
 52 | 	font-size: 20px !important;
 53 | 	z-index: 1;
 54 | }
 55 | 
 56 | .videoElement {
 57 | 	position: absolute;
 58 | 	width: 100%;
 59 | 	height: 100%;
 60 | }
 61 | 
 62 | .document {
 63 | 	position: absolute;
 64 | 	top: 50%;
 65 | 	left: 50%;
 66 | 	transform: translate(-50%, -50%);
 67 | }
 68 | 
 69 | .icon {
 70 | 	margin: auto;
 71 | 	font-size: 60px !important;
 72 | 	color: white;
 73 | }
 74 | 
 75 | .owner {
 76 | 	position: absolute;
 77 | 	top: 12px;
 78 | 	left: 12px;
 79 | 	z-index: 1;
 80 | }
 81 | 
 82 | .ownerLink {
 83 | 	display: flex;
 84 | 	align-items: center;
 85 | 	text-decoration: none;
 86 | 	color: white;
 87 | 	
 88 | 	&:hover {
 89 | 		> .ownerName {
 90 | 			text-decoration: underline;
 91 | 		}
 92 | 		
 93 | 		> .ownerIcon {
 94 | 			transform: translateX(4px);
 95 | 		}
 96 | 	}
 97 | }
 98 | 
 99 | .ownerName {
100 | 	max-width: 200px;
101 | 	margin-right: 4px;
102 | 	overflow: hidden;
103 | 	text-overflow: ellipsis;
104 | 	white-space: nowrap;
105 | 	font-weight: 900;
106 | }
107 | 
108 | .ownerIcon {
109 | 	transition: transform 0.3s;
110 | }
111 | 
112 | .ownerSpinner {
113 | 	@include spinner(16px, 3px, white);
114 | }
115 | 
116 | .info {
117 | 	position: absolute;
118 | 	bottom: 32px;
119 | 	left: 12px;
120 | 	right: 12px;
121 | 	color: white;
122 | 	z-index: 1;
123 | }
124 | 
125 | .name {
126 | 	display: -webkit-box;
127 | 	overflow: hidden;
128 | 	text-overflow: ellipsis;
129 | 	-webkit-box-orient: vertical;
130 | 	-webkit-line-clamp: 2;
131 | 	text-align: center;
132 | 	font-size: 20px;
133 | 	font-weight: 900;
134 | }
135 | 
136 | .comments {
137 | 	display: flex;
138 | 	justify-content: center;
139 | 	align-items: center;
140 | 	margin-top: 8px;
141 | 	font-size: 16px;
142 | }
143 | 
144 | .commentCount {
145 | 	margin-left: 5px;
146 | 	font-weight: 900;
147 | }
148 | 


--------------------------------------------------------------------------------
/styles/FileGrid.module.scss:
--------------------------------------------------------------------------------
1 | @use 'sizes';
2 | 
3 | .root {
4 | 	display: grid;
5 | 	grid: none / repeat(auto-fill, minmax(sizes.$file-cell-min-dimension, 1fr));
6 | 	gap: sizes.$file-grid-gap;
7 | }
8 | 


--------------------------------------------------------------------------------
/styles/FilePage.module.scss:
--------------------------------------------------------------------------------
  1 | @use 'sizes';
  2 | @use 'colors';
  3 | 
  4 | $row-min-width: 700px;
  5 | 
  6 | .root {
  7 | 	display: flex;
  8 | 	flex-direction: column;
  9 | 	justify-content: space-between;
 10 | 	min-height: 100vh;
 11 | }
 12 | 
 13 | .header {
 14 | 	display: flex;
 15 | 	flex-direction: column;
 16 | 	max-width: sizes.$large-max-width;
 17 | 	width: 95%;
 18 | 	margin: 90px auto 0;
 19 | 	padding: 16px;
 20 | 	background: colors.$dark;
 21 | 	border-radius: 8px;
 22 | 	
 23 | 	@media (min-width: $row-min-width) {
 24 | 		flex-direction: row;
 25 | 		max-height: 700px;
 26 | 		height: calc(100vh - 225px);
 27 | 		margin: 120px auto 0;
 28 | 	}
 29 | }
 30 | 
 31 | .preview {
 32 | 	$margin: 16px;
 33 | 	
 34 | 	width: 100%;
 35 | 	height: unset;
 36 | 	margin: 0 0 $margin;
 37 | 	
 38 | 	@media (max-width: $row-min-width) {
 39 | 		:global(.file-preview-content) {
 40 | 			height: unset;
 41 | 		}
 42 | 	}
 43 | 	
 44 | 	@media (min-width: $row-min-width) {
 45 | 		width: unset;
 46 | 		height: 100%;
 47 | 		margin: 0 $margin 0 0;
 48 | 	}
 49 | }
 50 | 
 51 | .main {
 52 | 	flex-shrink: 0;
 53 | 	flex-grow: 1;
 54 | 	display: flex;
 55 | 	flex-direction: column;
 56 | 	
 57 | 	@media (min-width: $row-min-width) {
 58 | 		min-width: 300px;
 59 | 	}
 60 | 	
 61 | 	@media (min-width: 900px) {
 62 | 		min-width: 400px;
 63 | 	}
 64 | }
 65 | 
 66 | .info {
 67 | 	flex-shrink: 0;
 68 | 	display: flex;
 69 | 	justify-content: space-between;
 70 | }
 71 | 
 72 | .meta {
 73 | 	flex-grow: 1;
 74 | 	color: white;
 75 | }
 76 | 
 77 | .name,
 78 | .editName {
 79 | 	max-width: 550px;
 80 | }
 81 | 
 82 | .name {
 83 | 	overflow: hidden;
 84 | 	text-overflow: ellipsis;
 85 | 	white-space: nowrap;
 86 | 	font-size: 28px;
 87 | 	font-weight: 900;
 88 | }
 89 | 
 90 | .editName {
 91 | 	font-size: 26px;
 92 | }
 93 | 
 94 | .user {
 95 | 	margin-top: 8px;
 96 | 	font-size: 17px;
 97 | 	opacity: 0.7;
 98 | }
 99 | 
100 | .userLink {
101 | 	display: inline-flex;
102 | 	align-items: center;
103 | 	text-decoration: none;
104 | 	color: white;
105 | 	
106 | 	&:hover {
107 | 		> .userName {
108 | 			text-decoration: underline;
109 | 		}
110 | 		
111 | 		> .userIcon {
112 | 			transform: translateX(4px);
113 | 		}
114 | 	}
115 | }
116 | 
117 | .userName {
118 | 	display: inline-block;
119 | 	max-width: 200px;
120 | 	overflow: hidden;
121 | 	text-overflow: ellipsis;
122 | 	white-space: nowrap;
123 | 	vertical-align: top;
124 | 	font-weight: 900;
125 | }
126 | 
127 | .userIcon {
128 | 	margin-left: 6px;
129 | 	transition: transform 0.3s;
130 | }
131 | 
132 | .options {
133 | 	flex-shrink: 0;
134 | 	display: flex;
135 | 	flex-direction: column;
136 | 	align-items: flex-end;
137 | 	margin-left: 16px;
138 | }
139 | 
140 | .actions {
141 | 	display: flex;
142 | }
143 | 
144 | .action {
145 | 	$dimension: 40px;
146 | 	
147 | 	display: flex;
148 | 	justify-content: center;
149 | 	align-items: center;
150 | 	width: $dimension;
151 | 	height: $dimension;
152 | 	font-size: 16px;
153 | 	color: white;
154 | 	background: var(--color);
155 | 	border-radius: 8px;
156 | 	transition: color 0.3s, background 0.3s, transform 0.3s;
157 | 	
158 | 	& + & {
159 | 		margin-left: 12px;
160 | 	}
161 | 	
162 | 	&:hover {
163 | 		color: var(--color);
164 | 		background: white;
165 | 	}
166 | 	
167 | 	&:active {
168 | 		transform: translateY(-2px);
169 | 	}
170 | }
171 | 
172 | .download { --color: #{colors.$purple}; }
173 | .copy { --color: #{colors.$green}; }
174 | .delete { --color: #{colors.$red}; }
175 | 
176 | .accessToggle {
177 | 	margin-top: 8px;
178 | }
179 | 
180 | .comments {
181 | 	flex-grow: 1;
182 | 	height: calc(min(100vh - 225px, 400px));
183 | 	margin-top: 16px;
184 | 	
185 | 	@media (min-width: $row-min-width) {
186 | 		height: unset;
187 | 	}
188 | }
189 | 
190 | .footer {
191 | 	margin-top: 30px;
192 | }
193 | 


--------------------------------------------------------------------------------
/styles/FilePreview.module.scss:
--------------------------------------------------------------------------------
  1 | @use 'colors';
  2 | 
  3 | .root {
  4 | 	display: flex;
  5 | 	position: relative;
  6 | 	max-width: max-content;
  7 | 	height: 100%;
  8 | 	overflow: hidden;
  9 | 	color: white;
 10 | 	background: transparentize(white, 0.9);
 11 | 	border-radius: 8px;
 12 | 	
 13 | 	&:hover > .shareContainer {
 14 | 		background: transparentize(colors.$dark, 0.5);
 15 | 		opacity: 0.5;
 16 | 	}
 17 | }
 18 | 
 19 | .fallback,
 20 | .other {
 21 | 	min-width: 300px !important;
 22 | }
 23 | 
 24 | .image,
 25 | .other {
 26 | 	&::after {
 27 | 		content: '';
 28 | 		position: absolute;
 29 | 		top: 0;
 30 | 		right: 0;
 31 | 		bottom: 0;
 32 | 		left: 0;
 33 | 		transition: background 0.3s;
 34 | 	}
 35 | 	
 36 | 	&:hover {
 37 | 		&::after {
 38 | 			background: transparentize(colors.$dark, 0.5);
 39 | 		}
 40 | 		
 41 | 		> .shareContainer {
 42 | 			background: transparent;
 43 | 			opacity: 1;
 44 | 		}
 45 | 	}
 46 | }
 47 | 
 48 | .imageElement {
 49 | 	max-width: 100%;
 50 | 	height: 100%;
 51 | 	object-fit: contain;
 52 | }
 53 | 
 54 | .videoElement {
 55 | 	width: 100%;
 56 | 	height: 100%;
 57 | }
 58 | 
 59 | .audio {
 60 | 	position: relative;
 61 | 	max-width: none;
 62 | 	width: 400px;
 63 | 	
 64 | 	> .icon {
 65 | 		position: absolute;
 66 | 		top: 50%;
 67 | 		left: 50%;
 68 | 		transform: translate(-50%, -50%);
 69 | 	}
 70 | }
 71 | 
 72 | .audioElement {
 73 | 	width: 100%;
 74 | 	margin: auto 16px 16px;
 75 | }
 76 | 
 77 | .pdf {
 78 | 	min-width: 400px;
 79 | }
 80 | 
 81 | .document {
 82 | 	width: 100%;
 83 | 	height: 100%;
 84 | 	overflow: auto;
 85 | }
 86 | 
 87 | .icon {
 88 | 	margin: auto;
 89 | 	font-size: 60px !important;
 90 | }
 91 | 
 92 | .shareContainer {
 93 | 	$dimension: 40px;
 94 | 	$offset: 8px;
 95 | 	
 96 | 	display: flex;
 97 | 	position: absolute;
 98 | 	width: $dimension;
 99 | 	height: $dimension;
100 | 	top: $offset;
101 | 	right: $offset;
102 | 	font-size: 20px;
103 | 	background: transparentize(colors.$dark, 0.5);
104 | 	border-radius: 50%;
105 | 	z-index: 1;
106 | 	transition: background 0.3s, opacity 0.3s;
107 | }
108 | 
109 | .share {
110 | 	margin: auto;
111 | 	transform: translate(1px, -1px);
112 | }
113 | 


--------------------------------------------------------------------------------
/styles/Footer.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'sizes';
 2 | @use 'colors';
 3 | 
 4 | .root {
 5 | 	padding: 20px 0;
 6 | 	background: colors.$dark;
 7 | }
 8 | 
 9 | .content {
10 | 	display: flex;
11 | 	align-items: center;
12 | 	max-width: sizes.$large-max-width;
13 | 	width: 95%;
14 | 	margin: 0 auto;
15 | }
16 | 
17 | .copyright {
18 | 	display: none;
19 | 	margin-right: 20px;
20 | 	overflow: hidden;
21 | 	text-overflow: ellipsis;
22 | 	white-space: nowrap;
23 | 	color: white;
24 | 	
25 | 	@media (min-width: 475px) {
26 | 		display: block;
27 | 	}
28 | }
29 | 
30 | .slack {
31 | 	display: flex;
32 | 	margin-left: auto;
33 | 	transition: opacity 0.3s, transform 0.3s;
34 | 	
35 | 	&:hover {
36 | 		opacity: 0.7;
37 | 	}
38 | 	
39 | 	&:active {
40 | 		transform: translateY(-2px);
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------
/styles/FooterLink.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 | 	display: flex;
 3 | 	align-items: center;
 4 | 	margin-right: 20px;
 5 | 	text-decoration: none;
 6 | 	font-weight: 900;
 7 | 	color: white;
 8 | 	transition: opacity 0.3s, transform 0.3s;
 9 | 	
10 | 	&:hover {
11 | 		opacity: 0.7;
12 | 	}
13 | 	
14 | 	&:active {
15 | 		transform: translateY(-2px);
16 | 	}
17 | }
18 | 
19 | .icon {
20 | 	display: none;
21 | 	margin-right: 8px;
22 | 	font-size: 1.75em;
23 | 	
24 | 	@media (min-width: 550px) {
25 | 		display: block;
26 | 	}
27 | }
28 | 


--------------------------------------------------------------------------------
/styles/Gradient.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'colors';
 2 | 
 3 | .root {
 4 | 	display: grid;
 5 | }
 6 | 
 7 | .background,
 8 | .foreground {
 9 | 	grid-row: 1;
10 | 	grid-column: 1;
11 | }
12 | 
13 | .background {
14 | 	height: 440px;
15 | 	background: colors.$gradient;
16 | 	z-index: -1;
17 | 	transform: skewY(6deg);
18 | 	transform-origin: top right;
19 | 	
20 | 	@media (min-width: 375px) { height: 450px; }
21 | 	@media (min-width: 400px) { height: 475px; }
22 | 	@media (min-width: 430px) { height: 500px; }
23 | 	@media (min-width: 500px) { height: 550px; }
24 | 	@media (min-width: 600px) { height: 600px; }
25 | 	@media (min-width: 1075px) { height: 650px; }
26 | 	@media (min-width: 1300px) { height: 730px; }
27 | 	@media (min-width: 2000px) { height: 760px; }
28 | 	@media (min-width: 2400px) { height: 820px; }
29 | 	@media (min-width: 2800px) { height: 860px; }
30 | }
31 | 


--------------------------------------------------------------------------------
/styles/Home.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'sizes';
 2 | @use 'font';
 3 | 
 4 | .root {
 5 | 	display: flex;
 6 | 	flex-direction: column;
 7 | 	justify-content: space-between;
 8 | 	min-height: 100vh;
 9 | }
10 | 
11 | .header {
12 | 	max-width: sizes.$large-max-width;
13 | 	width: 95%;
14 | 	margin: 90px auto 0;
15 | 	color: white;
16 | 	
17 | 	@media (min-width: 500px) { margin: 120px auto 0; }
18 | 	@media (min-width: 600px) { margin: 150px auto 0; }
19 | }
20 | 
21 | .title {
22 | 	@include font.size(18px);
23 | 	
24 | 	font-weight: 900;
25 | 	
26 | 	@media (min-width: 300px) { @include font.size(22px); }
27 | 	@media (min-width: 350px) { @include font.size(26px); }
28 | 	@media (min-width: 400px) { @include font.size(30px); }
29 | 	@media (min-width: 450px) { @include font.size(34px); }
30 | 	@media (min-width: 500px) { @include font.size(38px); }
31 | 	@media (min-width: 550px) { @include font.size(42px); }
32 | 	@media (min-width: 600px) { @include font.size(46px); }
33 | 	@media (min-width: 650px) { @include font.size(50px); }
34 | }
35 | 
36 | .subtitle {
37 | 	@include font.size(14px);
38 | 	
39 | 	margin-top: 12px;
40 | 	font-weight: 900;
41 | 	
42 | 	@media (min-width: 350px) { @include font.size(16px); }
43 | 	@media (min-width: 450px) { @include font.size(20px); }
44 | 	@media (min-width: 770px) { @include font.size(24px); }
45 | }
46 | 
47 | .recentlyUploadedFiles {
48 | 	margin: 30px auto 0;
49 | 	
50 | 	@media (min-width: 500px) {
51 | 		margin: 60px auto 0;
52 | 	}
53 | }
54 | 
55 | .footer {
56 | 	margin-top: 30px;
57 | }
58 | 


--------------------------------------------------------------------------------
/styles/Modal.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 | 	display: flex;
 3 | 	position: fixed;
 4 | 	top: 0;
 5 | 	right: 0;
 6 | 	bottom: 0;
 7 | 	left: 0;
 8 | 	z-index: 200;
 9 | 	background: transparentize(black, 0.5);
10 | 	transition: background 0.3s;
11 | 	
12 | 	&[aria-hidden='true'] {
13 | 		pointer-events: none;
14 | 		background: transparent;
15 | 		
16 | 		> .content {
17 | 			opacity: 0;
18 | 			transform: translateY(-20px);
19 | 		}
20 | 	}
21 | }
22 | 
23 | .content {
24 | 	margin: auto;
25 | 	transition: opacity 0.3s, transform 0.3s;
26 | }
27 | 


--------------------------------------------------------------------------------
/styles/Navbar.module.scss:
--------------------------------------------------------------------------------
  1 | @use 'sizes';
  2 | @use 'colors';
  3 | 
  4 | .root {
  5 | 	--color: white;
  6 | 	--color-inverted: #{colors.$blue};
  7 | 	--background-hover: #{transparentize(white, 0.8)};
  8 | 	
  9 | 	position: fixed;
 10 | 	top: 0;
 11 | 	left: 0;
 12 | 	right: 0;
 13 | 	border-bottom: 1px solid transparent;
 14 | 	z-index: 100;
 15 | 	transition: background 0.3s, border-bottom-color 0.3s;
 16 | }
 17 | 
 18 | .active {
 19 | 	--color: #{colors.$blue};
 20 | 	--color-inverted: white;
 21 | 	--background-hover: #{transparentize(colors.$dark, 0.9)};
 22 | 	
 23 | 	background: white;
 24 | 	border-bottom-color: #eee;
 25 | }
 26 | 
 27 | .content {
 28 | 	display: flex;
 29 | 	align-items: center;
 30 | 	max-width: sizes.$large-max-width;
 31 | 	width: 95%;
 32 | 	height: sizes.$navbar-height;
 33 | 	margin: 0 auto;
 34 | }
 35 | 
 36 | .home {
 37 | 	display: flex;
 38 | 	align-items: center;
 39 | 	margin-right: auto;
 40 | 	padding: 6px 12px;
 41 | 	text-decoration: none;
 42 | 	color: var(--color);
 43 | 	border-radius: 8px;
 44 | 	transition: color 0.3s, background 0.3s, transform 0.3s;
 45 | 	
 46 | 	:global(.icon-background),
 47 | 	:global(.icon-foreground) {
 48 | 		transition: fill 0.3s;
 49 | 	}
 50 | 	
 51 | 	:global(.icon-background) { fill: var(--color); }
 52 | 	:global(.icon-foreground) { fill: var(--color-inverted); }
 53 | 	
 54 | 	&:hover {
 55 | 		color: var(--color-inverted);
 56 | 		background: var(--color);
 57 | 		
 58 | 		:global(.icon-background) { fill: var(--color-inverted); }
 59 | 		:global(.icon-foreground) { fill: var(--color); }
 60 | 	}
 61 | 	
 62 | 	&:active {
 63 | 		transform: translateY(-2px);
 64 | 	}
 65 | }
 66 | 
 67 | .homeIcon {
 68 | 	display: none;
 69 | 	height: 30px;
 70 | 	margin-right: 10px;
 71 | 	
 72 | 	@media (min-width: 350px) {
 73 | 		display: block;
 74 | 	}
 75 | }
 76 | 
 77 | .homeMessage {
 78 | 	font-size: 30px;
 79 | 	font-weight: 900;
 80 | }
 81 | 
 82 | .upload,
 83 | .auth {
 84 | 	align-self: stretch;
 85 | 	margin: 16px 0;
 86 | }
 87 | 
 88 | .upload {
 89 | 	display: flex;
 90 | 	align-items: center;
 91 | 	padding: 0 16px;
 92 | 	font-size: 20px;
 93 | 	color: var(--color);
 94 | 	background: transparent;
 95 | 	border-radius: 8px;
 96 | 	transition: color 0.3s, background 0.3s, transform 0.3s;
 97 | 	
 98 | 	&:hover {
 99 | 		background: var(--background-hover);
100 | 	}
101 | 	
102 | 	&:active {
103 | 		transform: translateY(-2px);
104 | 	}
105 | }
106 | 
107 | .uploadMessage {
108 | 	display: none;
109 | 	margin-left: 8px;
110 | 	font-size: 16px;
111 | 	font-weight: 900;
112 | 	
113 | 	@media (min-width: 500px) {
114 | 		display: block;
115 | 	}
116 | }
117 | 
118 | .auth {
119 | 	min-width: 115px;
120 | 	margin-left: 8px;
121 | 	
122 | 	@media (min-width: 500px) {
123 | 		margin-left: 16px;
124 | 	}
125 | }
126 | 


--------------------------------------------------------------------------------
/styles/NotFound.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'sizes';
 2 | @use 'colors';
 3 | 
 4 | .root {
 5 | 	display: flex;
 6 | 	flex-direction: column;
 7 | 	justify-content: space-between;
 8 | 	min-height: 100vh;
 9 | }
10 | 
11 | .header {
12 | 	max-width: sizes.$large-max-width;
13 | 	width: 95%;
14 | 	margin: 200px auto 0;
15 | 	color: white;
16 | }
17 | 
18 | .title {
19 | 	line-height: 56px;
20 | 	font-size: 50px;
21 | 	font-weight: 900;
22 | }
23 | 
24 | .subtitle {
25 | 	margin-top: 12px;
26 | 	line-height: 30px;
27 | 	font-size: 24px;
28 | 	font-weight: 900;
29 | }
30 | 
31 | .footer {
32 | 	margin-top: 30px;
33 | }
34 | 


--------------------------------------------------------------------------------
/styles/PDF.module.scss:
--------------------------------------------------------------------------------
 1 | @use '~react-pdf/dist/esm/Page/AnnotationLayer';
 2 | 
 3 | @use 'spinner' as *;
 4 | 
 5 | .loading > :global(.react-pdf__message--loading) {
 6 | 	display: flex;
 7 | 	width: 100%;
 8 | 	height: 100%;
 9 | }
10 | 
11 | .spinner {
12 | 	@include spinner(30px, 4px, white);
13 | 	
14 | 	margin: auto;
15 | }
16 | 
17 | .page {
18 | 	width: 100%;
19 | 	
20 | 	& + & {
21 | 		margin-top: 8px;
22 | 	}
23 | }
24 | 


--------------------------------------------------------------------------------
/styles/Privacy.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'sizes';
 2 | @use 'colors';
 3 | 
 4 | .root {
 5 | 	display: flex;
 6 | 	flex-direction: column;
 7 | 	justify-content: space-between;
 8 | 	min-height: 100vh;
 9 | }
10 | 
11 | .header {
12 | 	max-width: sizes.$large-max-width;
13 | 	width: 95%;
14 | 	margin: 200px auto 0;
15 | 	color: white;
16 | }
17 | 
18 | .title {
19 | 	line-height: 56px;
20 | 	font-size: 50px;
21 | 	font-weight: 900;
22 | }
23 | 
24 | .document {
25 | 	padding: 16px 20px;
26 | 	margin-top: 20px;
27 | 	line-height: 1.5;
28 | 	background: colors.$dark;
29 | 	border-radius: 8px;
30 | 	
31 | 	:not(:last-child) {
32 | 		margin-bottom: 16px;
33 | 	}
34 | 	
35 | 	li,
36 | 	ul ul,
37 | 	ul ol,
38 | 	ol ol,
39 | 	ol ul {
40 | 		margin-bottom: 0;
41 | 	}
42 | 	
43 | 	ul,
44 | 	ol {
45 | 		padding-left: 1.5em;
46 | 	}
47 | 	
48 | 	li:not(:first-child) {
49 | 		margin-top: 0.25em;
50 | 	}
51 | 	
52 | 	a {
53 | 		font-weight: bold;
54 | 		color: colors.$blue;
55 | 	}
56 | }
57 | 
58 | .footer {
59 | 	margin-top: 30px;
60 | }
61 | 


--------------------------------------------------------------------------------
/styles/ProgressCircle.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'colors';
 2 | 
 3 | .track,
 4 | .thumb {
 5 | 	fill: transparent;
 6 | 	stroke-width: 10px;
 7 | }
 8 | 
 9 | .track {
10 | 	stroke: transparentize(white, 0.8);
11 | }
12 | 
13 | .thumb {
14 | 	stroke: colors.$blue;
15 | 	stroke-dashoffset: 66;
16 | 	stroke-linecap: round;
17 | 	transition: stroke-dasharray 0.3s;
18 | }
19 | 
20 | .value {
21 | 	font-weight: 900;
22 | 	fill: white;
23 | }
24 | 


--------------------------------------------------------------------------------
/styles/RecentlyUploadedFiles.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'sizes';
 2 | 
 3 | .root {
 4 | 	max-width: sizes.$file-grid-max-width;
 5 | }
 6 | 
 7 | .files {
 8 | 	margin-top: sizes.$file-grid-gap;
 9 | }
10 | 


--------------------------------------------------------------------------------
/styles/Search.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 | 	position: relative;
 3 | 	width: 100%;
 4 | }
 5 | 
 6 | .input {
 7 | 	min-width: 0;
 8 | 	width: 100%;
 9 | 	padding: 12px 16px 12px 36px;
10 | 	font-size: 16px;
11 | 	color: white;
12 | 	background: transparentize(white, 0.8);
13 | 	border-radius: 8px;
14 | 	transition: background 0.3s;
15 | 	
16 | 	&::placeholder {
17 | 		color: transparentize(white, 0.2);
18 | 	}
19 | 	
20 | 	&:hover,
21 | 	&:focus {
22 | 		background: transparentize(white, 0.7);
23 | 		
24 | 		+ .icon {
25 | 			opacity: 1;
26 | 		}
27 | 	}
28 | }
29 | 
30 | .icon {
31 | 	position: absolute;
32 | 	top: 13px;
33 | 	left: 12px;
34 | 	pointer-events: none;
35 | 	color: white;
36 | 	opacity: 0.7;
37 | 	transition: opacity 0.3s;
38 | }
39 | 


--------------------------------------------------------------------------------
/styles/SignInButton.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'spinner' as *;
 2 | 
 3 | .root {
 4 | 	display: flex;
 5 | 	justify-content: center;
 6 | 	align-items: center;
 7 | 	padding: 0 16px;
 8 | 	font-size: 20px;
 9 | 	color: var(--color);
10 | 	background: transparent;
11 | 	border: 2px solid var(--color);
12 | 	border-radius: 8px;
13 | 	transition: color 0.3s, background 0.3s, border-color 0.3s, transform 0.3s;
14 | 	
15 | 	&:not(:disabled) {
16 | 		&:hover {
17 | 			background: var(--background-hover);
18 | 		}
19 | 		
20 | 		&:active {
21 | 			transform: translateY(-2px);
22 | 		}
23 | 	}
24 | }
25 | 
26 | .spinner {
27 | 	@include spinner(18px, 3px, var(--color));
28 | }
29 | 
30 | .message {
31 | 	margin-left: 8px;
32 | 	font-size: 16px;
33 | 	font-weight: 900;
34 | }
35 | 


--------------------------------------------------------------------------------
/styles/Slack.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'sizes';
 2 | @use 'colors';
 3 | 
 4 | .root {
 5 | 	display: flex;
 6 | 	flex-direction: column;
 7 | 	justify-content: space-between;
 8 | 	min-height: 100vh;
 9 | }
10 | 
11 | .header {
12 | 	display: grid;
13 | 	grid:
14 | 		'icon title' auto
15 | 		'_ subtitle' auto
16 | 		'_ install' auto /
17 | 		auto 1fr;
18 | 	max-width: sizes.$large-max-width;
19 | 	width: 95%;
20 | 	height: max-content;
21 | 	margin: 200px auto 0;
22 | 	color: white;
23 | }
24 | 
25 | .titleIcon {
26 | 	grid-area: icon;
27 | 	align-self: center;
28 | 	margin-right: 16px;
29 | 	font-size: 65px;
30 | }
31 | 
32 | .title {
33 | 	grid-area: title;
34 | 	align-self: center;
35 | 	line-height: 56px;
36 | 	font-size: 50px;
37 | 	font-weight: 900;
38 | }
39 | 
40 | .subtitle {
41 | 	grid-area: subtitle;
42 | 	margin-top: 4px;
43 | 	line-height: 30px;
44 | 	font-size: 24px;
45 | 	font-weight: 900;
46 | }
47 | 
48 | .install {
49 | 	grid-area: install;
50 | 	display: flex;
51 | 	max-width: max-content;
52 | 	margin-top: 20px;
53 | 	transition: opacity 0.3s, transform 0.3s;
54 | 	
55 | 	&:hover {
56 | 		opacity: 0.7;
57 | 	}
58 | 	
59 | 	&:active {
60 | 		transform: translateY(-2px);
61 | 	}
62 | }
63 | 
64 | .footer {
65 | 	margin-top: 30px;
66 | }
67 | 


--------------------------------------------------------------------------------
/styles/Spinner.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 | 	display: inline-block;
 3 | 	border-radius: 50%;
 4 | 	animation: spin 0.3s linear infinite;
 5 | }
 6 | 
 7 | @keyframes spin {
 8 | 	to {
 9 | 		transform: rotate(1turn);
10 | 	}
11 | }
12 | 


--------------------------------------------------------------------------------
/styles/Support.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'sizes';
 2 | @use 'colors';
 3 | 
 4 | .root {
 5 | 	display: flex;
 6 | 	flex-direction: column;
 7 | 	justify-content: space-between;
 8 | 	min-height: 100vh;
 9 | }
10 | 
11 | .header {
12 | 	max-width: sizes.$large-max-width;
13 | 	width: 95%;
14 | 	margin: 200px auto 0;
15 | 	color: white;
16 | }
17 | 
18 | .title {
19 | 	line-height: 56px;
20 | 	font-size: 50px;
21 | 	font-weight: 900;
22 | }
23 | 
24 | .subtitle {
25 | 	margin-top: 12px;
26 | 	line-height: 30px;
27 | 	font-size: 24px;
28 | 	font-weight: 900;
29 | }
30 | 
31 | .email {
32 | 	color: white;
33 | }
34 | 
35 | .footer {
36 | 	margin-top: 30px;
37 | }
38 | 


--------------------------------------------------------------------------------
/styles/UploadDropOverlay.module.scss:
--------------------------------------------------------------------------------
 1 | .root {
 2 | 	display: flex;
 3 | 	position: fixed;
 4 | 	justify-content: center;
 5 | 	align-items: center;
 6 | 	top: 0;
 7 | 	right: 0;
 8 | 	bottom: 0;
 9 | 	left: 0;
10 | 	font-size: 60px;
11 | 	color: white;
12 | 	background: transparentize(black, 0.5);
13 | 	z-index: 200;
14 | 	transition: opacity 0.3s;
15 | 	
16 | 	&[aria-hidden='true'] {
17 | 		pointer-events: none;
18 | 		opacity: 0;
19 | 	}
20 | }
21 | 
22 | .message {
23 | 	margin-left: 20px;
24 | 	font-weight: 900;
25 | }
26 | 


--------------------------------------------------------------------------------
/styles/UploadFile.module.scss:
--------------------------------------------------------------------------------
  1 | @use 'colors';
  2 | 
  3 | .root {
  4 | 	max-width: 95%;
  5 | 	width: 1000px;
  6 | 	max-height: 95%;
  7 | 	background: colors.$dark;
  8 | 	border-radius: 8px;
  9 | 	box-shadow: 0 0 10px 2px transparentize(black, 0.9);
 10 | }
 11 | 
 12 | .header {
 13 | 	display: flex;
 14 | 	align-items: center;
 15 | 	padding: 12px 16px;
 16 | 	border-bottom: 2px solid #333;
 17 | }
 18 | 
 19 | .headerName,
 20 | .accessToggle {
 21 | 	margin-right: 16px;
 22 | }
 23 | 
 24 | .headerName {
 25 | 	overflow: hidden;
 26 | 	text-overflow: ellipsis;
 27 | 	white-space: nowrap;
 28 | 	font-weight: 900;
 29 | 	color: white;
 30 | }
 31 | 
 32 | .close {
 33 | 	flex-shrink: 0;
 34 | 	margin-left: auto;
 35 | 	font-size: 20px;
 36 | 	color: white;
 37 | 	background: transparent;
 38 | 	transition: opacity 0.3s, transform 0.3s;
 39 | 	
 40 | 	&:hover {
 41 | 		opacity: 0.7;
 42 | 	}
 43 | 	
 44 | 	&:active {
 45 | 		transform: translateY(-2px);
 46 | 	}
 47 | }
 48 | 
 49 | .closeIcon {
 50 | 	display: block !important;
 51 | }
 52 | 
 53 | .content {
 54 | 	display: grid;
 55 | 	position: relative;
 56 | 	height: 500px;
 57 | 	margin: 16px;
 58 | }
 59 | 
 60 | .progress,
 61 | .summary {
 62 | 	grid-row: 1;
 63 | 	grid-column: 1;
 64 | 	transition: opacity 0.3s;
 65 | 	
 66 | 	&[aria-hidden='true'] {
 67 | 		opacity: 0;
 68 | 	}
 69 | }
 70 | 
 71 | .progress {
 72 | 	max-width: 200px;
 73 | 	margin: auto;
 74 | }
 75 | 
 76 | .summary {
 77 | 	display: flex;
 78 | 	position: absolute;
 79 | 	top: 0;
 80 | 	right: 0;
 81 | 	bottom: 0;
 82 | 	left: 0;
 83 | }
 84 | 
 85 | .preview {
 86 | 	margin-right: 16px;
 87 | }
 88 | 
 89 | .main {
 90 | 	flex-shrink: 0;
 91 | 	flex-grow: 1;
 92 | 	display: flex;
 93 | 	flex-direction: column;
 94 | 	min-width: 400px;
 95 | }
 96 | 
 97 | .info {
 98 | 	flex-shrink: 0;
 99 | 	display: flex;
100 | 	justify-content: space-between;
101 | 	align-items: flex-start;
102 | }
103 | 
104 | .editName {
105 | 	flex-grow: 1;
106 | 	max-width: 400px;
107 | 	font-size: 20px;
108 | }
109 | 
110 | .actions {
111 | 	flex-shrink: 0;
112 | 	display: flex;
113 | 	margin-left: 16px;
114 | }
115 | 
116 | .action {
117 | 	$dimension: 40px;
118 | 	
119 | 	display: flex;
120 | 	justify-content: center;
121 | 	align-items: center;
122 | 	width: $dimension;
123 | 	height: $dimension;
124 | 	font-size: 16px;
125 | 	color: white;
126 | 	background: var(--color);
127 | 	border-radius: 8px;
128 | 	transition: color 0.3s, background 0.3s, transform 0.3s;
129 | 	
130 | 	& + & {
131 | 		margin-left: 12px;
132 | 	}
133 | 	
134 | 	&:hover {
135 | 		color: var(--color);
136 | 		background: white;
137 | 	}
138 | 	
139 | 	&:active {
140 | 		transform: translateY(-2px);
141 | 	}
142 | }
143 | 
144 | .download { --color: #{colors.$purple}; }
145 | .copy { --color: #{colors.$green}; }
146 | .delete { --color: #{colors.$red}; }
147 | 
148 | .comments {
149 | 	flex-grow: 1;
150 | 	margin-top: 16px;
151 | }
152 | 


--------------------------------------------------------------------------------
/styles/UserPage.module.scss:
--------------------------------------------------------------------------------
 1 | @use 'sizes';
 2 | @use 'font';
 3 | 
 4 | .root {
 5 | 	display: flex;
 6 | 	flex-direction: column;
 7 | 	justify-content: space-between;
 8 | 	min-height: 100vh;
 9 | }
10 | 
11 | .header {
12 | 	max-width: sizes.$large-max-width;
13 | 	width: 95%;
14 | 	margin: 90px auto 0;
15 | 	color: white;
16 | 	
17 | 	@media (min-width: 500px) { margin: 120px auto 0; }
18 | 	@media (min-width: 600px) { margin: 150px auto 0; }
19 | }
20 | 
21 | .name,
22 | .filesCount {
23 | 	overflow: hidden;
24 | 	text-overflow: ellipsis;
25 | 	white-space: nowrap;
26 | }
27 | 
28 | .name {
29 | 	@include font.size(26px);
30 | 	
31 | 	font-weight: 900;
32 | 	
33 | 	@media (min-width: 300px) { @include font.size(30px); }
34 | 	@media (min-width: 350px) { @include font.size(34px); }
35 | 	@media (min-width: 400px) { @include font.size(38px); }
36 | 	@media (min-width: 450px) { @include font.size(42px); }
37 | 	@media (min-width: 500px) { @include font.size(46px); }
38 | 	@media (min-width: 550px) { @include font.size(50px); }
39 | }
40 | 
41 | .filesCount {
42 | 	@include font.size(20px);
43 | 	
44 | 	margin-top: 12px;
45 | 	font-weight: 900;
46 | 	
47 | 	@media (min-width: 350px) { @include font.size(24px); }
48 | }
49 | 
50 | .filesContainer {
51 | 	max-width: sizes.$file-grid-max-width;
52 | 	margin: 30px auto 0;
53 | 	
54 | 	@media (min-width: 500px) {
55 | 		margin: 60px auto 0;
56 | 	}
57 | }
58 | 
59 | .files {
60 | 	margin-top: sizes.$file-grid-gap;
61 | }
62 | 
63 | .footer {
64 | 	margin-top: 30px;
65 | }
66 | 


--------------------------------------------------------------------------------
/styles/_colors.scss:
--------------------------------------------------------------------------------
 1 | $light: #f5f6fb;
 2 | $dark: #292d3e;
 3 | $blue: #08f;
 4 | $purple: #4355f9;
 5 | $green: #42c374;
 6 | $red: #ec407a;
 7 | $gradient: linear-gradient(to bottom, #5a2aff, #00e5f4);
 8 | 
 9 | $scrollbar: #888;
10 | $comment: #f2f2f2;
11 | 


--------------------------------------------------------------------------------
/styles/_font.scss:
--------------------------------------------------------------------------------
1 | @mixin size($font-size) {
2 | 	line-height: $font-size + 4px;
3 | 	font-size: $font-size;
4 | }
5 | 


--------------------------------------------------------------------------------
/styles/_sizes.scss:
--------------------------------------------------------------------------------
 1 | $navbar-height: 74px;
 2 | $large-max-width: 1340px;
 3 | 
 4 | $file-cell-min-dimension: 250px;
 5 | $file-cell-max-dimension: 300px;
 6 | 
 7 | $file-grid-max-columns: 3;
 8 | $file-grid-gap: 16px;
 9 | 
10 | $file-grid-max-width:
11 | 	$file-grid-max-columns * $file-cell-max-dimension +
12 | 	($file-grid-max-columns - 1) * $file-grid-gap;
13 | 


--------------------------------------------------------------------------------
/styles/_spinner.scss:
--------------------------------------------------------------------------------
1 | @mixin spinner($size, $thickness, $color) {
2 | 	width: $size;
3 | 	height: $size;
4 | 	border: $thickness solid transparent;
5 | 	border-top: $thickness solid $color;
6 | 	border-right: $thickness solid $color;
7 | }
8 | 


--------------------------------------------------------------------------------
/styles/global.scss:
--------------------------------------------------------------------------------
 1 | @use '~@fortawesome/fontawesome-svg-core/styles';
 2 | @use '~react-toastify/dist/ReactToastify';
 3 | @use '~balloon-css/src/balloon';
 4 | 
 5 | @use 'colors';
 6 | 
 7 | *,
 8 | ::before,
 9 | ::after {
10 | 	box-sizing: border-box;
11 | 	margin: 0;
12 | 	padding: 0;
13 | 	font-family: Roboto, Arial, Helvetica, sans-serif;
14 | 	border: none;
15 | 	outline: none;
16 | }
17 | 
18 | body {
19 | 	overscroll-behavior: none;
20 | 	background: colors.$light;
21 | 	
22 | 	&.clipped {
23 | 		overflow: hidden;
24 | 	}
25 | }
26 | 
27 | button {
28 | 	cursor: pointer;
29 | 	
30 | 	&:disabled {
31 | 		cursor: default;
32 | 	}
33 | }
34 | 
35 | [role='button'] {
36 | 	cursor: pointer;
37 | }
38 | 
39 | .Toastify__toast {
40 | 	font-weight: bold;
41 | 	padding-left: 16px;
42 | 	border-radius: 5px;
43 | 	
44 | 	&--dark {
45 | 		background: colors.$dark;
46 | 	}
47 | }
48 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"target": "es5",
 4 | 		"lib": [
 5 | 			"dom",
 6 | 			"dom.iterable",
 7 | 			"esnext"
 8 | 		],
 9 | 		"allowJs": true,
10 | 		"skipLibCheck": true,
11 | 		"strict": false,
12 | 		"forceConsistentCasingInFileNames": true,
13 | 		"noEmit": true,
14 | 		"esModuleInterop": true,
15 | 		"module": "esnext",
16 | 		"moduleResolution": "node",
17 | 		"resolveJsonModule": true,
18 | 		"isolatedModules": true,
19 | 		"jsx": "preserve",
20 | 		"baseUrl": "."
21 | 	},
22 | 	"exclude": [
23 | 		"node_modules"
24 | 	],
25 | 	"include": [
26 | 		"next-env.d.ts",
27 | 		"**/*.ts",
28 | 		"**/*.tsx"
29 | 	]
30 | }
31 | 


--------------------------------------------------------------------------------