Skip to content

Commit

Permalink
fix(UI):change spaces
Browse files Browse the repository at this point in the history
  • Loading branch information
@Thibaut-Mouton
Thibaut-Mouton committed Jun 25, 2024
1 parent bd333f3 commit 0d0bafc
Show file tree
Hide file tree
Showing 17 changed files with 77 additions and 67 deletions.
2 changes: 1 addition & 1 deletion backend/src/main/java/com/mercure/mapper/GroupMapper.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ public GroupDTO toGroupDTO(GroupEntity grp, int userId) {
String senderName = userId == msg.getUser_id() ? "You" : sender;
stringBuilder.append(senderName);
stringBuilder.append(" ");
stringBuilder.append("have send a file");
stringBuilder.append("has send a file");
grpDTO.setLastMessage(stringBuilder.toString());
} else {
grpDTO.setLastMessage(msg.getMessage());
Expand Down
8 changes: 4 additions & 4 deletions backend/src/main/resources/application.properties
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,21 @@ spring.liquibase.enabled=true

spring.banner.location=classpath:/banner/banner.txt

spring.liquibase.url=jdbc:mysql://localhost:3306/fastlitemessage_dev?createDatabaseIfNotExist=true
spring.liquibase.url=jdbc:mysql://127.0.0.1:3306/fastlitemessage_dev?createDatabaseIfNotExist=true
spring.liquibase.change-log=classpath:/db/changelog-master.xml
spring.liquibase.user=root
spring.liquibase.password=
spring.liquibase.password=root
logging.level.liquibase=info
spring.jpa.open-in-view=false
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQLDialect

spring.batch.job.enabled=false
spring.batch.jdbc.initialize-schema=always

spring.datasource.url=jdbc:mysql://localhost:3306/fastlitemessage_dev
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/fastlitemessage_dev
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=
spring.datasource.password=root

spring.servlet.multipart.max-file-size=5MB
spring.servlet.multipart.max-request-size=5MB
Expand Down
4 changes: 2 additions & 2 deletions frontend-web/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
"dependencies": {
"@emotion/react": "11.11.4",
"@emotion/styled": "11.11.5",
"@mui/icons-material": "5.15.15",
"@mui/icons-material": "5.15.20",
"@mui/lab": "^5.0.0-alpha.170",
"@mui/material": "5.15.15",
"@mui/material": "5.15.20",
"@stomp/stompjs": "7.0.0",
"axios": "1.6.8",
"history": "5.3.0",
Expand Down
2 changes: 1 addition & 1 deletion frontend-web/src/components/home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const HomeComponent = (): React.JSX.Element => {
<Grid sx={{m: 2}} container>
<Card variant="outlined">
<CardContent>
<Typography variant="h5" gutterBottom>
<Typography variant="h4" gutterBottom>
Welcome to FastLiteMessage
</Typography>

Expand Down
8 changes: 6 additions & 2 deletions frontend-web/src/components/login/LoginComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function LoginComponent(): React.JSX.Element {
const {setUser} = useContext(UserContext)!
const {changeGroupState} = useContext(GroupContext)!
const {dispatch} = useContext(AlertContext)!
const {setLoading} = useContext(LoaderContext)
const {loading, setLoading} = useContext(LoaderContext)
const {theme} = useThemeContext()
const httpService = new HttpGroupService()

Expand Down Expand Up @@ -48,6 +48,10 @@ export function LoginComponent(): React.JSX.Element {
}
}

function isSignInButtonDisabled() {
return username === "" || password === "" || loading
}

const login = async () => {
setLoading(true)
try {
Expand Down Expand Up @@ -117,7 +121,7 @@ export function LoginComponent(): React.JSX.Element {
</Grid>
<Grid item xs={12}>
<Button
disabled={username === "" || password === ""}
disabled={isSignInButtonDisabled()}
className={"button-register-form"}
style={{marginTop: "15px"}}
onClick={(event) => submitLogin(event)}
Expand Down
4 changes: 2 additions & 2 deletions frontend-web/src/components/messages/DisplayMessagesComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export function DisplayMessagesComponent({messages, groupUrl, updateMessages}: D
)
}

return <div style={{overflowY: "auto", flex: "1"}} onScroll={(event) => handleScroll(event)}>
return <div style={{overflowY: "auto", flex: "1 1 auto", height: "0px"}} onScroll={(event) => handleScroll(event)}>
{
!areAllMessagesFetched && loadingOldMessages && <div style={{
width: "inherit",
Expand Down Expand Up @@ -154,7 +154,7 @@ export function DisplayMessagesComponent({messages, groupUrl, updateMessages}: D
}
{
messageModel.type === TypeMessageEnum.TEXT &&
<div style={{overflowWrap: "break-word"}}>
<div style={{overflowWrap: "break-word", wordBreak: "break-all"}}>
{messageModel.message}
</div>
}
Expand Down
47 changes: 25 additions & 22 deletions frontend-web/src/components/messages/SearchMessageComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ function HighlightSearchedText({message, searchText}: HighlightSearchedTextProps
const position = message.search(searchText)
const extracted = message.substring(position, position + searchText.length)
const text = message.split(searchText)
return <div>{text[0]}
return <span>{text[0]}
<span className={"simple-highlight"}>{extracted}</span>
{text[1]}
</div>
</span>
}

export function SearchMessageComponent() {
Expand All @@ -31,25 +31,28 @@ export function SearchMessageComponent() {
}

return <Box sx={{width: "100%"}}>
<span style={{marginLeft: "10px", fontSize: "20px", fontWeight: "bold"}}>Search results</span>
{
searchResponse && searchResponse.matchingMessages.map((searchResponseData, index) => (
<List key={index} subheader={<Typography variant={"h6"} component="div">
{searchResponseData.groupName}
</Typography>}>
{
searchResponseData.messages.map((message, messageIndex) => (
<ListItem onClick={() => redirectToGroup(searchResponseData.groupUrl)} key={messageIndex}
disablePadding>
<ListItemButton>
<ListItemText secondary={<HighlightSearchedText searchText={searchResponse.matchingText}
message={message}/>}/>
</ListItemButton>
</ListItem>
))
}
</List>
))
}
<div style={{marginLeft: "10px", fontSize: "20px", fontWeight: "bold"}}>Search results</div>
<div style={{margin: "12px"}}>
{
searchResponse && searchResponse.matchingMessages.map((searchResponseData, index) => (
<List key={index} subheader={<Typography variant={"h6"} component="div">
{searchResponseData.groupName}
</Typography>}>
{
searchResponseData.messages.map((message, messageIndex) => (
<ListItem onClick={() => redirectToGroup(searchResponseData.groupUrl)} key={messageIndex}
disablePadding>
<ListItemButton>
<ListItemText
secondary={<HighlightSearchedText searchText={searchResponse.matchingText}
message={message}/>}/>
</ListItemButton>
</ListItem>
))
}
</List>
))
}
</div>
</Box>
}
12 changes: 10 additions & 2 deletions frontend-web/src/components/search/SearchComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ export function SearchComponent() {
setTextSearch(event.target.value)
}

function resetSearch() {
setSearchText("")
setTextSearch("")
}

async function startSearch(event: any) {
if (event.key === undefined || event.key === "Enter") {
if (search !== "") {
Expand Down Expand Up @@ -47,11 +52,14 @@ export function SearchComponent() {

return <OutlinedInput
endAdornment={<InputAdornment position="end">
<IconButton>
<IconButton onClick={resetSearch}>
<CloseIcon/>
</IconButton>
</InputAdornment>}
onChange={handleChange} value={search} onKeyDown={startSearch} style={{width: "50%"}}
type={"text"}
onChange={handleChange}
value={search}
onKeyDown={startSearch} style={{width: "50%"}}
size={"small"}
label={"Search in conversations"}/>
}
10 changes: 5 additions & 5 deletions frontend-web/src/components/websocket/websocket-chat-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const WebSocketChatComponent: React.FunctionComponent<{ groupUrl?: string
!groupUrl ?
<div style={{
display: "flex",
width: "100%",
width: "56%",
flexDirection: "column",
}}>
<NoDataComponent/>
Expand All @@ -61,7 +61,7 @@ export const WebSocketChatComponent: React.FunctionComponent<{ groupUrl?: string
<div style={{
backgroundColor: "#f6f8fc",
display: "flex",
width: "90%",
width: "56%",
flexDirection: "column",
}}>
<div style={{
Expand All @@ -86,11 +86,11 @@ export const WebSocketChatComponent: React.FunctionComponent<{ groupUrl?: string
backgroundColor: "white",
display: "flex",
flexDirection: "column",
width: "100%",
height: "92%",
height: "100%",
}}>

<DisplayMessagesComponent updateMessages={updateMessages} groupUrl={groupUrl} messages={messages}/>
<DisplayMessagesComponent updateMessages={updateMessages} groupUrl={groupUrl}
messages={messages}/>
<CreateMessageComponent groupUrl={groupUrl}/>
</div>
</div>
Expand Down
21 changes: 7 additions & 14 deletions frontend-web/src/components/websocket/websocket-group-actions-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ import GroupIcon from "@mui/icons-material/Group"
import MoreHorizIcon from "@mui/icons-material/MoreHoriz"
import React, {useContext, useState} from "react"
import {GroupActionEnum} from "./group-action-enum"
import {useThemeContext} from "../../context/theme-context"
import {generateClassName, generateIconColorMode} from "../utils/enable-dark-mode"
import {TransportModel} from "../../interface-contract/transport-model"
import {TransportActionEnum} from "../../utils/transport-action-enum"
import {AllUsersDialog} from "../partials/all-users-dialog"
Expand All @@ -40,7 +38,6 @@ export const WebSocketGroupActionComponent: React.FunctionComponent<{ groupUrl?:
const [isCurrentUserAdmin, setCurrentUserIsAdmin] = useState(false)
const [toolTipAction, setToolTipAction] = useState(false)
const [openTooltipId, setToolTipId] = useState<number | null>(null)
const {theme} = useThemeContext()
const {dispatch} = useContext(AlertContext)!
const {ws} = useContext(WebSocketContext)!
const httpService = new HttpGroupService()
Expand Down Expand Up @@ -225,8 +222,8 @@ export const WebSocketGroupActionComponent: React.FunctionComponent<{ groupUrl?:
}

return (
<div style={{backgroundColor: "#f6f8fc"}}>
<div className={"sidebar"}>
<div className={"sidebar"}>
<div>
<List
component="nav">
<ListItemButton disabled={isDisabled()}
Expand Down Expand Up @@ -260,7 +257,7 @@ export const WebSocketGroupActionComponent: React.FunctionComponent<{ groupUrl?:
<ListItemText primary={value.firstName + " " + value.lastName}
secondary={
<React.Fragment>
<span className={generateClassName(theme)}>
<span>
{

value.admin
Expand Down Expand Up @@ -290,22 +287,19 @@ export const WebSocketGroupActionComponent: React.FunctionComponent<{ groupUrl?:
{
isCurrentUserAdmin && value.admin &&
<MenuItem
onClick={() => removeUserFromAdminListInConversation(value.userId)}
dense={true}>Remove from administrator
onClick={() => removeUserFromAdminListInConversation(value.userId)}>Remove from administrator
</MenuItem>
}
{
isCurrentUserAdmin && !value.admin &&
<MenuItem
onClick={() => grantUserAdminInConversation(value.userId)}
dense={true}>Grant
onClick={() => grantUserAdminInConversation(value.userId)}>Grant
administrator</MenuItem>
}
{
!(user?.id === value.userId) &&
<MenuItem
onClick={() => removeUserFromConversation(value.userId)}
dense={true}>Remove from group</MenuItem>
onClick={() => removeUserFromConversation(value.userId)}>Remove from group</MenuItem>
}
{
user?.id === value.userId &&
Expand All @@ -317,8 +311,7 @@ export const WebSocketGroupActionComponent: React.FunctionComponent<{ groupUrl?:
</React.Fragment>
}>
<IconButton
onClick={event => handleTooltipAction(event, GroupActionEnum.OPEN)}
style={{color: generateIconColorMode(theme)}}>
onClick={event => handleTooltipAction(event, GroupActionEnum.OPEN)}>
<MoreHorizIcon/>
</IconButton>
</Tooltip>
Expand Down
7 changes: 5 additions & 2 deletions frontend-web/src/components/websocket/websocket-groups-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,10 @@ export const WebsocketGroupsComponent: React.FunctionComponent<IWebSocketGroupCo
}
}

useEffect(() => {
console.log("GROUPS CHANGED", groups)
}, [groups])

useEffect(() => {
if (groups) {
if (groups.length !== 0) {
Expand Down Expand Up @@ -141,7 +145,7 @@ export const WebsocketGroupsComponent: React.FunctionComponent<IWebSocketGroupCo
<Box style={{overflowY: "auto", height: "87%"}}>
<List disablePadding={true}>
{!loadingState && groups && groups.map((group) => (
<ListItemButton sx={{borderRadius: 2, my: 1}} className={styleSelectedGroup(group.url)}
<ListItemButton sx={{borderRadius: 2, mx: 1}} className={styleSelectedGroup(group.url)}
key={group.id}
onClick={() => redirectToGroup(group.id, group.url)}>
<Avatar>
Expand Down Expand Up @@ -196,7 +200,6 @@ export const WebsocketGroupsComponent: React.FunctionComponent<IWebSocketGroupCo
}
</List>
</Box>

</div>
)
}
1 change: 0 additions & 1 deletion frontend-web/src/components/websocket/websocket-main-component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export const WebSocketMainComponent: React.FunctionComponent = (): React.JSX.Ele
<div style={{
height: "calc(100% - 64px)",
display: "flex",
justifyContent: "space-between"
}}>
<WebsocketContextProvider>
<WebsocketGroupsComponent groupUrl={groupId}/>
Expand Down
3 changes: 2 additions & 1 deletion frontend-web/src/components/websocket/websocketStyle.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
.sidebar {
width: 340px;
width: 22%;
background-color: #f6f8fc;
}

.light-t {
Expand Down
7 changes: 4 additions & 3 deletions frontend-web/src/context/GroupContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,11 +47,12 @@ export const groupReducer = (state: GroupModel[], action: GroupActionType): Grou
return state
}
case GroupContextAction.UPDATE_SEEN_MESSAGE: {
const index = state.findIndex((group) => group.url === action.payload.groupUrl)
const newState = [...state]
const index = newState.findIndex((group) => group.url === action.payload.groupUrl)
if (index > -1) {
state[index].lastMessageSeen = action.payload.isMessageSeen
newState[index].lastMessageSeen = action.payload.isMessageSeen
}
return state
return newState
}
case GroupContextAction.SET_GROUPS: {
return action.payload
Expand Down
2 changes: 1 addition & 1 deletion frontend-web/src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ body, html {
}

#root {
height: 100%;
height: 100vh;
}

.msg {
Expand Down
4 changes: 1 addition & 3 deletions frontend-web/src/service/http-main.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ export abstract class HttpMainService {
baseURL
})
this.instance.interceptors.request.use((config) => {
const csrfToken = document.cookie.replace(/(?:^|.*;\s*)XSRF-TOKEN\s*=\s*([^;]*).*$|^.*$/, "$1")
config.headers["X-CSRF-TOKEN"] = csrfToken
config.headers["X-CSRF-TOKEN"] = document.cookie.replace(/(?:^|.*;\s*)XSRF-TOKEN\s*=\s*([^;]*).*$|^.*$/, "$1")
return config
})
this.instance.interceptors.response.use((response) => {
Expand All @@ -23,7 +22,6 @@ export abstract class HttpMainService {
window.location.pathname = "/login"
}
}
console.log("ERROR", error)
return Promise.reject(error)
})
}
Expand Down
2 changes: 1 addition & 1 deletion frontend-web/src/utils/date-formater.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function dateParser(date: string): string {
return moment(date, "YYYY-MM-DD HH:mm:ss").fromNow(true)
}
if (messageDate.includes("seconds")) {
return "1 min"
return "now"
}
return ""
}

0 comments on commit 0d0bafc

Please sign in to comment.