Skip to content

Commit

Permalink
Refactor server domain variable names to use uppercase convention
Browse files Browse the repository at this point in the history
  • Loading branch information
@tako0614
tako0614 committed Jun 16, 2024
1 parent fa6ddaf commit cbf25e1
Show file tree
Hide file tree
Showing 18 changed files with 220 additions and 149 deletions.
2 changes: 1 addition & 1 deletion .env.example
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ SERVER_DOMAIN=localhost:8000
REDIS_URL=redis://localhost:6379
PRIORITY_PROTOCOL=http
REDIS_CH=takos
MAX_MESSAGE=100
MAX_MESSAGE_LENGTH=100
14 changes: 12 additions & 2 deletions components/Chats/ChatSendMessage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@ const ChatSendMessage = ({ message, time, isRead, isPrimary }) => {
</div>
<div class="c-talk-chat-right">
<div class="c-talk-chat-msg">
<p>
{message}
<p class="">
{convertLineBreak(message)}
</p>
</div>
</div>
Expand All @@ -31,3 +31,13 @@ function convertTime(time) {
const zeroPaddingMinutes = String(minutes).padStart(2, "0")
return `${ampm} ${zeroPaddingHour}:${zeroPaddingMinutes}`
}
//preactで動作する改行を反映させるために、改行コードをbrタグに変換する関数
function convertLineBreak(message) {
if (message === null || message === undefined) return
return message.split("\n").map((line, index) => (
<span key={index}>
{line}
<br />
</span>
))
}
8 changes: 7 additions & 1 deletion components/Chats/ChatUserList.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
export default function User(
{ userName, latestMessage, icon, onClick, userName2, isNewMessage },
) {
let resultLatestMessage
if (latestMessage.length > 17) {
resultLatestMessage = latestMessage.substr(0, 17) + "..."
} else {
resultLatestMessage = latestMessage
}
return (
<>
<li class="c-talk-rooms" onClick={isOnClickUndefind(onClick)}>
Expand All @@ -17,7 +23,7 @@ export default function User(
</p>
</div>
<div class="c-talk-rooms-msg">
<p>{latestMessage}</p>
<p>{resultLatestMessage}</p>
</div>
</div>
</div>
Expand Down
138 changes: 120 additions & 18 deletions islands/Chats/Chat.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { useSignal } from "@preact/signals"
import { useEffect, useState } from "preact/hooks"
import ChatHeader from "./ChatHeader.tsx"
import ChatList from "./ChatList.jsx"
import ChatTalk from "./ChatTalk.tsx"
import Profile from "../Settings/Friends.tsx"
import Friends from "../Settings/Profile.tsx"
import SettingList from "../SettingList.tsx"
import GetAddFriendKey from "./getAddFriendKey.tsx"
import FriendRequest from "./FriendRequest.tsx"
import User from "./AddFriend.tsx"
import RequestFriendById from "./RequestFriendById.tsx"
import messages from "../../models/messages.ts"
type TalkDataItem = {
type: string
message: string
Expand All @@ -30,6 +28,7 @@ interface FriendList {
export default function Home(
props: any,
) {
const [Message, setMessage] = useState("")
const [page, setPage] = useState(props.page)
const [isChoiceUser, setIsChoiceUser] = useState(
props.roomid !== undefined && props.roomid !== "",
Expand Down Expand Up @@ -136,7 +135,7 @@ export default function Home(
console.log(data)
setTalkData((prev) => {
return prev.map((item) => {
if (data.messageids.includes(item?.messageid)) {
if (data.messageids.includes(item?.message)) {
return {
...item,
isRead: true,
Expand Down Expand Up @@ -230,20 +229,123 @@ export default function Home(
</>
)
: null}
<ChatTalk
isSelectUser={isChoiceUser}
roomid={roomid}
setFriendList={setFriendList}
setIsChoiceUser={setIsChoiceUser}
setRoomid={setRoomid}
ws={ws}
sessionid={sessionid}
setSessionid={setSessionid}
userName={props.userName}
userNickName={props.userNickName}
roomName={roomName}
talkData={talkData}
/>
<div class="p-talk-chat">
<div class="p-talk-chat-container">
<ChatTalk
isSelectUser={isChoiceUser}
roomid={roomid}
setFriendList={setFriendList}
setIsChoiceUser={setIsChoiceUser}
setRoomid={setRoomid}
ws={ws}
sessionid={sessionid}
setSessionid={setSessionid}
userName={props.userName}
userNickName={props.userNickName}
roomName={roomName}
talkData={talkData}
/>
{isChoiceUser && (<>
<div class="p-talk-chat-send">
<form class="p-talk-chat-send__form">
<div class="p-talk-chat-send__msg">
<div
class="p-talk-chat-send__dummy"
aria-hidden="true"
>
</div>
<label>
<textarea
class="p-talk-chat-send__textarea"
placeholder="メッセージを入力"
value={Message}
onChange={(e) => {
if (e.target) {
setMessage(
(e.target as HTMLTextAreaElement)
.value,
)
}
}}
>
</textarea>
</label>
</div>
<div
class="p-talk-chat-send__file"
onClick={() => {
if (Message) {
if (messages.length > 100) {

return
}
const data = {
type: "message",
message: Message,
roomid: roomid,
sessionid: sessionid,
messageType: "text",
}
ws?.send(JSON.stringify(data))
setMessage("")
// deno-lint-ignore no-explicit-any
setFriendList((prev: any) => {
// deno-lint-ignore prefer-const
let temp = prev
// deno-lint-ignore no-explicit-any
temp.map((data: any) => {
if (
data.roomid ==
roomid
) {
data.lastMessage =
Message
data.latestMessageTime =
new Date()
.toString()
data.isNewMessage =
false
}
})
temp.sort(
(
a: {
latestMessageTime:
number
},
b: {
latestMessageTime:
number
},
) => {
if (
a.latestMessageTime <
b.latestMessageTime
) {
return 1
}
if (
a.latestMessageTime >
b.latestMessageTime
) {
return -1
}
return 0
},
)
return temp
})
}
}}
>
<img src="/ei-send.svg" alt="file" />
</div>
</form>
</div>

</>)}
</div>
</div>
</main>
</div>
</>
Expand Down
126 changes: 18 additions & 108 deletions islands/Chats/ChatTalk.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,126 +1,38 @@
import ChatDate from "../../components/Chats/ChatDate.tsx"
import ChatSendMessage from "../../components/Chats/ChatSendMessage.jsx"
import ChatOtherMessage from "../../components/Chats/ChatOtherMessage.jsx"
import { useEffect, useState } from "preact/hooks"
export default function ChatTalk(props: any) {
const [Message, setMessage] = useState("")
if (props.isSelectUser) {
return (
<>
<div class="p-talk-chat">
<div class="p-talk-chat-container">
<TalkArea
roomid={props.roomid}
ws={props.ws}
isSelectUser={props.isSelectUser}
userName={props.userName}
setWs={props.setWs}
setSessionid={props.setSessionid}
setIsChoiceUser={props.setIsChoiceUser}
setRoomid={props.setRoomid}
roomName={props.roomName}
talkData={props.talkData}
sessionid={props.sessionid}
/>
<div class="p-talk-chat-send">
<form class="p-talk-chat-send__form">
<div class="p-talk-chat-send__msg">
<div
class="p-talk-chat-send__dummy"
aria-hidden="true"
>
</div>
<label>
<textarea
class="p-talk-chat-send__textarea"
placeholder="メッセージを入力"
value={Message}
onChange={(e) => {
if (e.target) {
setMessage(
(e.target as HTMLTextAreaElement)
.value,
)
}
}}
>
</textarea>
</label>
</div>
<div
class="p-talk-chat-send__file"
onClick={() => {
if (Message) {
const data = {
type: "message",
message: Message,
roomid: props.roomid,
sessionid: props.sessionid,
messageType: "text",
}
props.ws.send(JSON.stringify(data))
setMessage("")
props.setFriendList((prev: any) => {
let temp = prev
temp.map((data: any) => {
if (
data.roomid ==
props.roomid
) {
data.lastMessage =
Message
data.latestMessageTime =
new Date()
.toString()
data.isNewMessage =
false
}
})
temp.sort((a, b) => {
if (
a.latestMessageTime <
b.latestMessageTime
) {
return 1
}
if (
a.latestMessageTime >
b.latestMessageTime
) {
return -1
}
return 0
})
return temp
})
}
}}
>
<img src="/ei-send.svg" alt="file" />
</div>
</form>
</div>
</div>
</div>
<TalkArea
roomid={props.roomid}
ws={props.ws}
isSelectUser={props.isSelectUser}
userName={props.userName}
setWs={props.setWs}
setSessionid={props.setSessionid}
setIsChoiceUser={props.setIsChoiceUser}
setRoomid={props.setRoomid}
roomName={props.roomName}
talkData={props.talkData}
sessionid={props.sessionid}
/>
</>
)
}
return (
<>
<div class="p-talk-chat">
<div class="p-talk-chat-container">
<div class="text-center">
トークを始めましょう！！
</div>
</div>
<div class="text-center">
トークを始めましょう！！
</div>
</>
)
}
function TalkArea(props: any) {
let SendPrimary = true
let OtherPrimary = true
let DateState: Date
let DateState: any
return (
<>
<div class="p-talk-chat-title">
Expand Down Expand Up @@ -161,10 +73,8 @@ function TalkArea(props: any) {
<div class="p-talk-chat-main" id="chat-area">
<ul class="p-talk-chat-main__ul">
{props.talkData.map((data: any) => {
//Date型での比較
const isEncodeDate =
DateState != data.time.split("T")[0]
DateState = data.time.split("T")[0]
const isEncodeDate = new Date(DateState).toLocaleDateString() !== new Date(data.time).toLocaleDateString();
DateState = data.time;
if (data.type == "message") {
if (data.sender == props.userName) {
if (SendPrimary) {
Expand Down
5 changes: 5 additions & 0 deletions routes/_middleware.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,14 @@ import csrfToken from "../models/csrftoken.ts"
import users from "../models/users.ts"
import sessionID from "../models/sessionid.ts"
import { load } from "$std/dotenv/mod.ts"
const env = await load()

export async function handler(req: Request, ctx: MiddlewareHandlerContext) {
const cookies = getCookies(req.headers)
const sessionid = cookies.sessionid
ctx.state.settings = {
maxMessageLength: env["MAX_MESSAGE_LENGTH"],
}
if (sessionid === undefined) {
ctx.state.data = { loggedIn: false }
const resp = await ctx.next()
Expand Down
Loading

0 comments on commit cbf25e1

Please sign in to comment.