added material ui container

frontend/package.json

@@ -9,8 +9,14 @@
     "preview": "vite preview"
   },
   "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",
     "axios": "^1.3.4",
+    "csshake": "^1.7.0",
+    "font-proxima-nova": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.0.5"

frontend/src/App.tsx

+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 {getShortenLink, handleOriginalUrl} from './features/links/linkSlice';
 import {useAppDispatch, useAppSelector} from './hooks';
 import ILinkDTO from './types/ILinkDTO';
+import {checkHttpUrl} from './utils/checkUrl';
+
+const textFieldStyle = {
+  width: '400px',
+  color: '#161c34',
+  backgroundColor: 'white',
+  borderRadius: '4px',
+};
 
 const App = () => {
   const {shortUrl} = useAppSelector((state) => state.links.link);
   const [linkState, setlinkState] = useState<string>('');
+  const [errorLink, setErrorLink] = useState<boolean>(false);
   const dispatch = useAppDispatch();
 
   const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -15,6 +29,11 @@ const App = () => {
 
   const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
+    if (!checkHttpUrl(linkState)) {
+      setErrorLink(true);
+      return;
+    }
+    setErrorLink(false);
     const link: ILinkDTO = {
       originalUrl: linkState,
     };
@@ -24,21 +43,68 @@ const App = () => {
   useEffect(() => {}, [shortUrl]);
 
   return (
-    <>
-      <form onSubmit={handleSubmit}>
-        <h1>Shorten your url</h1>
-        <input onChange={handleInput} type="text" />
-        <button type="submit">Shorten</button>
-      </form>
-      {shortUrl && (
-        <>
-          <h1>Your link now looks like this:</h1>
-          <a target="_blank" href={shortUrl}>
-            {shortUrl}
-          </a>
-        </>
-      )}
-    </>
+    <Container maxWidth="lg">
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: '20px',
+          paddingTop: '200px',
+        }}
+        component={'form'}
+        onSubmit={handleSubmit}
+      >
+        <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>
   );
 };
 

frontend/src/features/links/linkSlice.ts

@@ -29,8 +29,8 @@ export const linkSlice = createSlice({
   name: 'link',
   initialState,
   reducers: {
-    handleOriginalUrl: (state, action) => {
-      state.link = {...state.link, originalUrl: action.payload};
+    handleOriginalUrl: (state, {payload}: PayloadAction<string>) => {
+      state.link = {...state.link, originalUrl: payload};
     },
   },
   extraReducers: (builder) => {

frontend/src/index.css

+body {
+  margin: 0;
+  background: #28384a;
+}

frontend/src/main.tsx

-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import {Provider} from 'react-redux';
 import App from './App';

frontend/src/moduleTypes/reshake.d.ts

+declare module 'reshake';

frontend/src/utils/checkUrl.ts

+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:';
+};