added material ui container

parent bb9be248
This diff is collapsed.
...@@ -9,8 +9,14 @@ ...@@ -9,8 +9,14 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@material/typography": "^14.0.0",
"@mui/material": "^5.11.12",
"@reduxjs/toolkit": "^1.9.3", "@reduxjs/toolkit": "^1.9.3",
"axios": "^1.3.4", "axios": "^1.3.4",
"csshake": "^1.7.0",
"font-proxima-nova": "^1.0.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-redux": "^8.0.5" "react-redux": "^8.0.5"
......
import {Box} from '@mui/material';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import {Container} from '@mui/system';
import React, {useEffect, useState} from 'react'; import React, {useEffect, useState} from 'react';
import {getShortenLink, handleOriginalUrl} from './features/links/linkSlice'; import {getShortenLink, handleOriginalUrl} from './features/links/linkSlice';
import {useAppDispatch, useAppSelector} from './hooks'; import {useAppDispatch, useAppSelector} from './hooks';
import ILinkDTO from './types/ILinkDTO'; import ILinkDTO from './types/ILinkDTO';
import {checkHttpUrl} from './utils/checkUrl';
const textFieldStyle = {
width: '400px',
color: '#161c34',
backgroundColor: 'white',
borderRadius: '4px',
};
const App = () => { const App = () => {
const {shortUrl} = useAppSelector((state) => state.links.link); const {shortUrl} = useAppSelector((state) => state.links.link);
const [linkState, setlinkState] = useState<string>(''); const [linkState, setlinkState] = useState<string>('');
const [errorLink, setErrorLink] = useState<boolean>(false);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => { const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
...@@ -15,6 +29,11 @@ const App = () => { ...@@ -15,6 +29,11 @@ const App = () => {
const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => { const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
e.preventDefault(); e.preventDefault();
if (!checkHttpUrl(linkState)) {
setErrorLink(true);
return;
}
setErrorLink(false);
const link: ILinkDTO = { const link: ILinkDTO = {
originalUrl: linkState, originalUrl: linkState,
}; };
...@@ -24,21 +43,68 @@ const App = () => { ...@@ -24,21 +43,68 @@ const App = () => {
useEffect(() => {}, [shortUrl]); useEffect(() => {}, [shortUrl]);
return ( return (
<> <Container maxWidth="lg">
<form onSubmit={handleSubmit}> <Box
<h1>Shorten your url</h1> sx={{
<input onChange={handleInput} type="text" /> display: 'flex',
<button type="submit">Shorten</button> flexDirection: 'column',
</form> alignItems: 'center',
{shortUrl && ( gap: '20px',
<> paddingTop: '200px',
<h1>Your link now looks like this:</h1> }}
<a target="_blank" href={shortUrl}> component={'form'}
{shortUrl} onSubmit={handleSubmit}
</a> >
</> <Typography
)} sx={{
</> color: '#fff',
}}
variant={'h2'}
component={'h1'}
>
Free URL Shortener
</Typography>
<Typography sx={{color: '#b9b9b9'}} component={'p'}>
This is a free tool to shorten URLs. Create short & memorable links in
seconds.
</Typography>
<Box sx={{display: 'flex', gap: '10px'}} component={'div'}>
<TextField
sx={textFieldStyle}
onChange={handleInput}
id="outlined-basic"
label={errorLink ? 'Incorrect link' : 'Enter your link here'}
variant="filled"
required
error={errorLink}
/>
<Button sx={{width: '231px'}} type="submit" variant="contained">
Shorten URL
</Button>
</Box>
</Box>
<Box
component={'div'}
sx={{
display: 'flex',
alignItems: 'center',
flexDirection: 'column',
paddingTop: '40px',
}}
>
{shortUrl && (
<>
<Typography sx={{color: '#fff'}} variant="h4">
Your link now looks like this:
</Typography>
<Button target={'_blank'} href={shortUrl}>
{shortUrl}
</Button>
</>
)}
</Box>
</Container>
); );
}; };
......
...@@ -29,8 +29,8 @@ export const linkSlice = createSlice({ ...@@ -29,8 +29,8 @@ export const linkSlice = createSlice({
name: 'link', name: 'link',
initialState, initialState,
reducers: { reducers: {
handleOriginalUrl: (state, action) => { handleOriginalUrl: (state, {payload}: PayloadAction<string>) => {
state.link = {...state.link, originalUrl: action.payload}; state.link = {...state.link, originalUrl: payload};
}, },
}, },
extraReducers: (builder) => { extraReducers: (builder) => {
......
body {
margin: 0;
background: #28384a;
}
import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import {Provider} from 'react-redux'; import {Provider} from 'react-redux';
import App from './App'; import App from './App';
......
export const checkHttpUrl = (url: string) => {
let givenURL;
try {
givenURL = new URL(url);
} catch (error) {
console.log('error is', error);
return false;
}
return givenURL.protocol === 'http:' || givenURL.protocol === 'https:';
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment