beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[Abhinav] | added Upload Button component

Browse source
This commit is contained in:
Abhinav-grd 2021-01-05 07:56:34 +05:30
parent 2bf68d71ad
commit d183b9290e
2 changed files with 95 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/UploadButton.tsx Normal file
View file

@ -0,0 +1,22 @@
import React from 'react';
import { Button } from 'react-bootstrap';
import Dropzone from 'react-dropzone';
const UploadButton = () => {
return (
<Dropzone
onDrop={(acceptedFiles) => {
console.log(acceptedFiles);
}}
>
{({ getRootProps, getInputProps }) => (
<div {...getRootProps()}>
<input {...getInputProps()} />
<Button>Upload</Button>
</div>
)}
</Dropzone>
);
};
export default UploadButton;

136
src/pages/_app.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useState } from 'react';
import styled, {createGlobalStyle } from 'styled-components';
import styled, { createGlobalStyle } from 'styled-components';
import Navbar from 'components/Navbar';
import constants from 'utils/strings/constants';
import Button from 'react-bootstrap/Button';
@ -13,12 +13,13 @@ import Head from 'next/head';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'react-photoswipe/lib/photoswipe.css';
import localForage from 'localforage';
import UploadButton from 'components/UploadButton';
localForage.config({
driver: localForage.INDEXEDDB,
name: 'ente-files',
version: 1.0,
storeName: 'files',
driver: localForage.INDEXEDDB,
name: 'ente-files',
version: 1.0,
storeName: 'files',
});
const GlobalStyles = createGlobalStyle`
@ -81,69 +82,78 @@ const GlobalStyles = createGlobalStyle`
`;
const Image = styled.img`
max-height: 28px;
margin-right: 5px;
max-height: 28px;
margin-right: 5px;
`;
const FlexContainer = styled.div`
flex: 1;
flex: 1;
`;
export default function App({ Component, pageProps }) {
const router = useRouter();
const [user, setUser] = useState();
const [loading, setLoading] = useState(false);
const router = useRouter();
const [user, setUser] = useState();
const [loading, setLoading] = useState(false);
useEffect(() => {
const user = getData(LS_KEYS.USER);
setUser(user);
console.log(`%c${constants.CONSOLE_WARNING_STOP}`, 'color: red; font-size: 52px;');
console.log(`%c${constants.CONSOLE_WARNING_DESC}`, 'font-size: 20px;');
router.events.on('routeChangeStart', (url: string) => {
if (window.location.pathname !== url.split('?')[0]) {
setLoading(true);
}
});
router.events.on('routeChangeComplete', () => {
const user = getData(LS_KEYS.USER);
setUser(user);
setLoading(false);
});
}, []);
const logout = async () => {
clearKeys();
clearData();
localForage.clear();
const cache = await caches.delete('thumbs');
router.push("/");
}
return (
<>
<Head>
<title>ente.io | Privacy friendly alternative to Google Photos</title>
</Head>
<GlobalStyles />
<Navbar>
<FlexContainer>
<Image alt='logo' src="/icon.png" />
{constants.COMPANY_NAME}
</FlexContainer>
{user && <Button variant='link' onClick={logout}>
<PowerSettings />
</Button>}
</Navbar>
{loading
? <Container>
<Spinner animation="border" role="status" variant="primary">
<span className="sr-only">Loading...</span>
</Spinner>
</Container>
: <Component />
}
</>
useEffect(() => {
const user = getData(LS_KEYS.USER);
setUser(user);
console.log(
`%c${constants.CONSOLE_WARNING_STOP}`,
'color: red; font-size: 52px;'
);
}
console.log(`%c${constants.CONSOLE_WARNING_DESC}`, 'font-size: 20px;');
router.events.on('routeChangeStart', (url: string) => {
if (window.location.pathname !== url.split('?')[0]) {
setLoading(true);
}
});
router.events.on('routeChangeComplete', () => {
const user = getData(LS_KEYS.USER);
setUser(user);
setLoading(false);
});
}, []);
const logout = async () => {
clearKeys();
clearData();
localForage.clear();
const cache = await caches.delete('thumbs');
router.push('/');
};
return (
<>
<Head>
<title>ente.io | Privacy friendly alternative to Google Photos</title>
</Head>
<GlobalStyles />
<Navbar>
<FlexContainer>
<Image alt='logo' src='/icon.png' />
{constants.COMPANY_NAME}
</FlexContainer>
{user && (
<>
<UploadButton />
<Button variant='link' onClick={logout}>
<PowerSettings />
</Button>
</>
)}
</Navbar>
{loading ? (
<Container>
<Spinner animation='border' role='status' variant='primary'>
<span className='sr-only'>Loading...</span>
</Spinner>
</Container>
) : (
<Component />
)}
</>
);
}