Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Sign In Screen #28

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Added Sign In Screen #28

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d5b14b
Added Sign In Screen
BalgopalP Oct 31, 2022
f62dfad
Create Dockerfile
BalgopalP Dec 5, 2023
571c989
Update Dockerfile
BalgopalP Dec 5, 2023
e5e741e
Update package.json
BalgopalP Dec 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
325 changes: 325 additions & 0 deletions My-First/src/app/create-publication.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,325 @@
import {
Alert,
Button,
CircularProgress,
Collapse,
FormControl,
Input,
InputLabel,
Stack,
Typography,
LinearProgress,
} from '@mui/material';
import fileSize from 'filesize';
import { useFormik } from 'formik';
import { useRouter } from 'next/router';
import { useContext, useState } from 'react';
import FeaturedIcon from '../../components/common/icon/FeaturedIcon';
import AuthLayout from '../../components/common/layout/AuthLayout';
import { File, UploadCloud } from '../../res/icons/icons';
import api from '../../lib/utils/axios/auth';
import { SessionContext } from '../../lib/context/PublishedSession';

const humanReadableSize = fileSize.partial();

const CreatePublication = () => {
// const {data: session, status} = useSession()
const [logo, setLogo] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const [fileUploadProgress, setFileUploadProgress] = useState(0);
const router = useRouter();
const { status, publication } = useContext(SessionContext);
// console.log(cValue)

// console.log(session)

const createPublication = (values) => {
setIsLoading(true);
const payload = {
...values,
logo: logo,
};
console.log('payload', payload);
api.publication
.create(payload, {
headers: { 'Content-Type': 'multipart/form-data' },
onUploadProgress: (progressEvent) => {
if (progressEvent.lengthComputable) {
let currentProgress = (progressEvent.loaded / progressEvent.total) * 100;
setFileUploadProgress(currentProgress);
}
},
})
.then((data) => {
console.log(data);
router.replace(`https://${data.subdomain}.${process.env.DOMAIN}`);
})
.catch((err) => {
console.log('error', err);
setError(Object.values(err)[0]);
})
.finally(() => {
setIsLoading(false);
});
};

const formik = useFormik({
initialValues: {
name: '',
description: '',
subdomain: '',
},
onSubmit: createPublication,
});

const handleLogo = (e) => {
const file = e.target.files[0];
console.log('file', file);
setLogo(file);
};

if (status !== 'unauthenticated')
return (
<Stack
sx={{
padding: '112px 32px',
borderLeft: '1px solid',
borderRight: '1px solid',
borderColor: 'grayIron.200',
width: '100%',
maxWidth: 522,
margin: '0 auto',
flexGrow: 1,
}}
justifyContent="center"
gap="16px"
>
<Typography variant="display-sm-medium" align="center">
Authentication required
</Typography>
<Stack direction="row" gap="16px" justifyContent="space-between">
<Button href="/auth/signup" variant="contained" fullWidth>
<Typography variant="text-md-medium">Sign up</Typography>
</Button>
<Button href="/auth/signin" variant="outlined" fullWidth>
<Typography variant="text-md-medium">Sign in</Typography>
</Button>
</Stack>
</Stack>
);

if (publication)
return (
<Stack
sx={{
padding: '112px 32px',
borderLeft: '1px solid',
borderRight: '1px solid',
borderColor: 'grayIron.200',
width: '100%',
maxWidth: 522,
margin: '0 auto',
flexGrow: 1,
}}
justifyContent="center"
gap="16px"
>
<Typography variant="display-sm-medium">You already have a publication</Typography>
</Stack>
);

return (
<Stack
sx={{
padding: '32px 32px',
borderLeft: '1px solid',
borderRight: '1px solid',
borderColor: 'grayIron.200',
width: '100%',
maxWidth: 522,
margin: '0 auto',
flexGrow: 1,
}}
justifyContent="center"
gap="16px"
>
<Typography variant="display-sm-semi-bold" align="center">
Create Publication
</Typography>
<Collapse in={error ? true : false}>
<Alert severity="error">{error}</Alert>
</Collapse>
<FormControl>
<InputLabel required>
<Typography variant="text-sm-medium" color="grayIron.700">
Publication logo
</Typography>
</InputLabel>
<Button
component="label"
variant="outlined"
sx={{
padding: '16px 24px',
borderColor: 'grayIron.200',
display: 'flex',
flexDirection: 'column',
gap: '12px',
'&:hover': {
borderColor: 'grayIron.200',
},
}}
>
<Input
type="file"
inputProps={{
accept: '.png,.jpg',
}}
sx={{
display: 'none',
}}
onChange={handleLogo}
/>
<FeaturedIcon icon={UploadCloud} width={20} stroke="grayIron.600" />
<Stack gap="4px" alignItems="center">
<Typography variant="text-sm-medium" color="grayIron.700">
Click to upload
<Typography variant="text-sm-normal" color="grayIron.500">
{' '}
or drag and drop
</Typography>
</Typography>
<Typography variant="text-xs-normal" color="grayIron.500">
{'SVG, PNG, JPG or GIF (max. 800x400px)'}
</Typography>
</Stack>
</Button>
</FormControl>
{logo && (
<Stack
direction="row"
sx={{
width: '100%',
border: '1px solid',
borderColor: 'grayIron.600',
borderRadius: '8px',
padding: '14px',
}}
gap="16px"
>
<FeaturedIcon icon={File} width={16} stroke="grayIron.600" />
<Stack
sx={{
width: '100%',
}}
>
<Stack direction="row">
<Typography
variant="text-sm-medium"
sx={{
flexGrow: 1,
}}
>
{logo.name}
</Typography>
{/* { fileUploadState==='success' && <CheckSuccess width={16} /> } */}
</Stack>
<Typography variant="text-sm-normal" color="grayIron.500">
{humanReadableSize(logo.size)}
</Typography>
<Stack direction="row" alignItems="center">
<LinearProgress
variant="determinate"
value={fileUploadProgress}
sx={{
flexGrow: 1,
height: '8px',
backgroundColor: 'transparent',
marginRight: '12px',
'& .MuiLinearProgress-bar': {
backgroundColor: 'moss.300',
borderRadius: '4px',
},
}}
/>
<Typography variant="text-sm-medium">{fileUploadProgress > 0 ? fileUploadProgress + '%' : ''}</Typography>
</Stack>
</Stack>
</Stack>
)}
<FormControl>
<InputLabel required>
<Typography variant="text-sm-medium" color="grayIron.700">
Publication name
</Typography>
</InputLabel>
<Input name="name" value={formik.values.name} onChange={formik.handleChange} required />
</FormControl>
<FormControl>
<InputLabel required>
<Typography variant="text-sm-medium" color="grayIron.700">
Description
</Typography>
</InputLabel>
<Input
name="description"
value={formik.values.description}
onChange={formik.handleChange}
required
multiline
rows={3}
/>
</FormControl>
<FormControl>
<InputLabel required>
<Typography variant="text-sm-medium" color="grayIron.700">
Website
</Typography>
</InputLabel>
<Input
name="subdomain"
value={formik.values.subdomain}
onChange={formik.handleChange}
required
sx={{
padding: 0,
}}
inputProps={{
style: {
padding: '14px 16px',
},
}}
endAdornment={
<Typography
variant="text-sm-medium"
sx={{
padding: '14px 16px',
borderLeft: '1px solid',
borderColor: 'grayTrue.300',
}}
>
.onpublished.com
</Typography>
}
/>
</FormControl>
<Button
variant="contained"
sx={{
padding: '10px 18px',
}}
onClick={formik.handleSubmit}
>
<Typography variant="text-md-medium">
{!isLoading ? 'Continue' : <CircularProgress size="16px" color="white" />}
</Typography>
</Button>
</Stack>
);
};

CreatePublication.getLayout = function getLayout(page) {
return <AuthLayout>{page}</AuthLayout>;
};

export default CreatePublication;
Loading