Skip to content
Snippets Groups Projects
Commit 7381bb83 authored by Joonas Seppä's avatar Joonas Seppä
Browse files

Added Material UI to style the front-end

parent af8a9ec3
No related branches found
No related tags found
No related merge requests found
Pipeline #61633 failed
Stage: build
Stage: deploy
Expand all Show whitespace changes
Inline Side-by-side
.gitlab-ci.yml
+ 10
− 0
View file @ 7381bb83
...@@ -14,6 +14,16 @@ build-backend: ...@@ -14,6 +14,16 @@ build-backend:
paths: paths:
- "messagesAppBackend/build/" - "messagesAppBackend/build/"
build-frontend:
stage: build
script:
- cd messages-app-frontend
- npm install
- npm run build
artifacts:
paths:
- "messages-app-frontend/build/"
deploy-backend-to-heroku: deploy-backend-to-heroku:
image: ruby:latest image: ruby:latest
stage: deploy stage: deploy
......
messages-app-frontend/package-lock.json
+ 492
− 13
View file @ 7381bb83
This diff is collapsed.
messages-app-frontend/package.json
+ 4
− 0
View file @ 7381bb83
...@@ -3,6 +3,10 @@ ...@@ -3,6 +3,10 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.12",
"@types/cors": "^2.8.13", "@types/cors": "^2.8.13",
"@types/jest": "^27.5.2", "@types/jest": "^27.5.2",
"@types/node": "^16.18.14", "@types/node": "^16.18.14",
......
messages-app-frontend/public/index.html
+ 1
− 0
View file @ 7381bb83
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Messages Application</title> <title>Messages Application</title>
<link rel="icon" type="image/png" href="https://e7.pngegg.com/pngimages/198/585/png-clipart-chatbox-icon-computer-icons-message-sms-icon-message-miscellaneous-grass.png" />
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
......
messages-app-frontend/src/App.tsx
+ 71
− 23
View file @ 7381bb83
import React from 'react'; import React from 'react';
import axios from 'axios'; import axios from 'axios';
import {Button, IconButton, Container, Typography, Box, Input, Paper, Card} from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
//import IconButton from '@mui/material';
//import SendIcon from '@mui/icons-material';
type messageType = { type messageType = {
message: string, message: string,
...@@ -24,7 +30,7 @@ const api = axios.create({ ...@@ -24,7 +30,7 @@ const api = axios.create({
class App extends React.Component{ export default class App extends React.Component{
state: AppState = { state: AppState = {
messages: [], messages: [],
...@@ -72,13 +78,33 @@ class App extends React.Component{ ...@@ -72,13 +78,33 @@ class App extends React.Component{
updatingMessage = (p: messageType) => { updatingMessage = (p: messageType) => {
if(p._id === this.state.editingMessage._id){ if(p._id === this.state.editingMessage._id){
return ( return (
<Paper elevation={5} sx={{padding: 1, margin: 1.5, width: "fit-content"}}>
<Input value={this.state.editedMessage} onChange={(e) => this.setState({editedMessage: e.target.value})}></Input>
<Button color="success" sx={{marginLeft: 2}} variant="contained" onClick={() => this.updateMessageApi()}>Confirm</Button>
<Button sx={{marginLeft: 1}} variant="contained" onClick={() => this.setState({editingMessage: {bool: false}})}>Back</Button>
</Paper>
/*
<div> <div>
<input value={this.state.editedMessage} onChange={(e) => this.setState({editedMessage: e.target.value})}></input> <button onClick={() => this.updateMessageApi()}>Confirm</button> <button onClick={() => this.setState({editingMessage: {bool: false}})}>Back</button> <input value={this.state.editedMessage} onChange={(e) => this.setState({editedMessage: e.target.value})}></input> <button onClick={() => this.updateMessageApi()}>Confirm</button> <button onClick={() => this.setState({editingMessage: {bool: false}})}>Back</button>
</div> </div>
*/
) )
} }
else{ else{
return <p>{p.message} <button onClick={() => this.updateMessage(p._id, p.message)}>Edit</button> <button onClick={() => this.deleteMessage(p._id)}>Delete</button></p> return(
<Paper elevation={5} sx={{padding: 1, margin: 1.5, width: "fit-content"}}>
{p.message}
<IconButton aria-label="edit" onClick={() => this.updateMessage(p._id, p.message)}>
<EditIcon />
</IconButton>
<IconButton color="error" aria-label="delete" onClick={() => this.deleteMessage(p._id)}>
<DeleteIcon />
</IconButton>
</Paper>
)
//return <p>{p.message} <button onClick={() => this.updateMessage(p._id, p.message)}>Edit</button> <button onClick={() => this.deleteMessage(p._id)}>Delete</button></p>
} }
} }
...@@ -87,34 +113,56 @@ class App extends React.Component{ ...@@ -87,34 +113,56 @@ class App extends React.Component{
if(this.state.editingMessage.bool){ if(this.state.editingMessage.bool){
return( return(
<div> <Container>
<Box sx={{bgcolor: 'white', marginX: 10, padding: 1, marginY: 2, borderRadius: 5, boxShadow: 20}}>
<Typography variant="h3" sx={{textAlign: "center", margin: 3}}>Welcome to my Messaging Application!</Typography>
</Box>
<Box sx={{bgcolor: "darkgreen", marginX: 10, padding: 3, display: "grid", /*flexDirection: "column", alignItems: "center",*/ justifyContent: "center", boxShadow: 20, borderRadius: 5}}>
{this.state.messages.map((p) => this.updatingMessage(p))} {this.state.messages.map((p) => this.updatingMessage(p))}
</Box>
<div> <Box sx={{textAlign: "center", paddingTop: 5}}>
<input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></input> <Input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></Input>
<button onClick={this.createMessage}>Create a message!</button> <Button /*color="success"*/ sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.createMessage}>Send</Button>
</div> </Box>
</div> </Container>
) )
} }
else{ else{
return( return(
<div> <Container>
<Box sx={{bgcolor: 'white', marginX: 10, padding: 1, marginY: 2, borderRadius: 5, boxShadow: 20}}>
<Typography variant="h3" sx={{textAlign: "center", margin: 3}}>Welcome to my Messaging Application!</Typography>
</Box>
<Box sx={{bgcolor: "darkgreen", marginX: 10, padding: 3, display: "grid", /*flexDirection: "column", alignItems: "center",*/ justifyContent: "center", boxShadow: 20, borderRadius: 5}}>
{this.state.messages.map((p) => {this.state.messages.map((p) =>
<p>{p.message} <button onClick={() => this.updateMessage(p._id, p.message)}>Edit</button> <button onClick={() => this.deleteMessage(p._id)}>Delete</button></p> <Paper elevation={5} sx={{padding: 1, margin: 1.5, width: "fit-content"}}>
{p.message}
<IconButton aria-label="edit" onClick={() => this.updateMessage(p._id, p.message)}>
<EditIcon />
</IconButton>
<IconButton color="error" aria-label="delete" onClick={() => this.deleteMessage(p._id)}>
<DeleteIcon />
</IconButton>
</Paper>
)} )}
</Box>
<div> <Box sx={{textAlign: "center", paddingTop: 5}}>
<input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></input> <Input value={this.state.newMessage} onChange={(p) => this.setState({newMessage: p.target.value})}></Input>
<button onClick={this.createMessage}>Create a message!</button> <Button /*color="success"*/ sx={{margin: 1.5}} variant="contained" endIcon={<SendIcon />} onClick={this.createMessage}>Send</Button>
</div> </Box>
</div>
</Container>
) )
} }
} }
} }
\ No newline at end of file
export default App;
messages-app-frontend/src/index.tsx
+ 15
− 1
View file @ 7381bb83
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from './App'; import App from './App';
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
background: {
default: "grey"
}
}
});
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById('root') as HTMLElement
); );
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<ThemeProvider theme={theme}>
<CssBaseline />
<App /> <App />
</ThemeProvider>
</React.StrictMode> </React.StrictMode>
); );
\ No newline at end of file
messages-app-frontend/tsconfig.json
+ 7
− 4
View file @ 7381bb83
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": [ "lib": [
"ESNext",
"dom", "dom",
"dom.iterable", "dom.iterable"
"esnext"
], ],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
...@@ -18,7 +18,10 @@ ...@@ -18,7 +18,10 @@
"resolveJsonModule": true, "resolveJsonModule": true,
"isolatedModules": true, "isolatedModules": true,
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx",
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true
}, },
"include": [ "include": [
"src" "src"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment