Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitc70eff3

Browse files
committed
Add splash screen on router
Add delete and save chat in MenuList chats in MenuAdd CHAT and CHAT_INDEX constantsAdd AppBoot service with loadChatsHandler and updateConfigHandler methodsAdd getChatIndex and saveChat servicesAdd deleteChat and loadChats actionsAdd DELETE_CHAT and LOAD_CHATS reducers
1 parent8f73f2f commitc70eff3

File tree

15 files changed

+208
-28
lines changed

15 files changed

+208
-28
lines changed

‎src/components/menu/index.tsx‎

Lines changed: 54 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,75 @@
1-
importReactfrom'react'
1+
import{useEffect,useRef}from'react'
22
import{useNavigate}from'react-router-dom'
33

44
importROUTESfrom'~/constants/routes'
5+
importgetChatIndexfrom'~/services/getChatIndex'
6+
importsaveChatfrom'~/services/saveChat'
7+
importStorefrom'~/services/store'
8+
import{disChats,useChats}from'~/stores/chats'
9+
import{deleteChat}from'~/stores/chats/actions'
510
importButtonfrom'~/components/button'
6-
import{ButtonsContainer,Container}from'./style'
7-
11+
import{ButtonsContainer,Chat,ChatsContainer,Container}from'./style'
812

913
exportdefaultfunctionMenu(){
1014

1115
constnavigate=useNavigate()
16+
constchats=useChats('chats')
17+
constdeletedChatRef=useRef(false)
18+
19+
functionhandleDeleteChat(){
20+
constchatIndex=getChatIndex()
21+
if(!Array.isArray(chats[chatIndex]))return
22+
constconfirmed=confirm('Are you sure you want to delete?')
23+
if(!confirmed)return
24+
deletedChatRef.current=true
25+
disChats(deleteChat(chatIndex))
26+
}
27+
28+
functionhandleSaveChat(){
29+
constchatIndex=getChatIndex()
30+
saveChat(chatIndex,chats[chatIndex])
31+
}
32+
33+
useEffect(()=>{
34+
if(!deletedChatRef.current)return
35+
deletedChatRef.current=false
36+
navigate(ROUTES.ROOT)
37+
Store.set('chats',chats)
38+
},[chats])
1239

1340
return(
1441
<Container>
42+
<ChatsContainer>
43+
{chats.map((messages,index)=>{
44+
const{ content}=messages[0]
45+
return(
46+
<Chatkey={index}to={`${ROUTES.CHAT}/${++index}`}
47+
title={content}
48+
>
49+
{content}
50+
</Chat>
51+
)
52+
})}
53+
</ChatsContainer>
1554
<ButtonsContainer>
1655
<Button
1756
style={{padding:'6px',paddingBottom:'3px'}}
1857
onClick={()=>navigate(ROUTES.CONFIG)}
1958
>
2059
<svgwidth="16px"height="16px"viewBox="0 0 32 32"fill="#fff"stroke="#fff"><gid="SVGRepo_bgCarrier"stroke-width="0"></g><gid="SVGRepo_tracerCarrier"stroke-linecap="round"stroke-linejoin="round"></g><gid="SVGRepo_iconCarrier"><title>Configurations</title><pathd="M23.265,24.381l.9-.894c4.164.136,4.228-.01,4.411-.438l1.144-2.785L29.805,20l-.093-.231c-.049-.122-.2-.486-2.8-2.965V15.5c3-2.89,2.936-3.038,2.765-3.461L28.538,9.225c-.171-.422-.236-.587-4.37-.474l-.9-.93a20.166,20.166,0,0,0-.141-4.106l-.116-.263-2.974-1.3c-.438-.2-.592-.272-3.4,2.786l-1.262-.019c-2.891-3.086-3.028-3.03-3.461-2.855L9.149,3.182c-.433.175-.586.237-.418,4.437l-.893.89c-4.162-.136-4.226.012-4.407.438L2.285,11.733,2.195,12l.094.232c.049.12.194.48,2.8,2.962l0,1.3c-3,2.89-2.935,3.038-2.763,3.462l1.138,2.817c.174.431.236.584,4.369.476l.9.935a20.243,20.243,0,0,0,.137,4.1l.116.265,2.993,1.308c.435.182.586.247,3.386-2.8l1.262.016c2.895,3.09,3.043,3.03,3.466,2.859l2.759-1.115C23.288,28.644,23.44,28.583,23.265,24.381ZM11.407,17.857a4.957,4.957,0,1,1,6.488,2.824A5.014,5.014,0,0,1,11.407,17.857Z"></path></g></svg>
2160
</Button>
61+
<Button
62+
style={{padding:'6px',paddingBottom:'3px'}}
63+
onClick={handleDeleteChat}
64+
>
65+
<svgfill="#fff"width="16px"height="16px"viewBox="0 0 24 24"><gid="SVGRepo_bgCarrier"stroke-width="0"></g><gid="SVGRepo_tracerCarrier"stroke-linecap="round"stroke-linejoin="round"></g><gid="SVGRepo_iconCarrier"><title>Delete Chat</title><pathd="M5.755,20.283,4,8H20L18.245,20.283A2,2,0,0,1,16.265,22H7.735A2,2,0,0,1,5.755,20.283ZM21,4H16V3a1,1,0,0,0-1-1H9A1,1,0,0,0,8,3V4H3A1,1,0,0,0,3,6H21a1,1,0,0,0,0-2Z"></path></g></svg>
66+
</Button>
67+
<Button
68+
style={{padding:'6px',paddingBottom:'3px'}}
69+
onClick={handleSaveChat}
70+
>
71+
<svgwidth="16px"height="16px"viewBox="0 0 32 32"fill="#fff"><gid="SVGRepo_bgCarrier"stroke-width="0"></g><gid="SVGRepo_tracerCarrier"stroke-linecap="round"stroke-linejoin="round"></g><gid="SVGRepo_iconCarrier"><title>Save Chat</title><desc>Created with Sketch Beta.</desc><defs></defs><gid="Page-1"stroke="none"stroke-width="1"fill="none"fill-rule="evenodd"><gid="Icon-Set-Filled"transform="translate(-154.000000, -517.000000)"fill="#fff"><pathd="M172,522 C172,521.447 172.448,521 173,521 C173.552,521 174,521.447 174,522 L174,526 C174,526.553 173.552,527 173,527 C172.448,527 172,526.553 172,526 L172,522 L172,522 Z M163,529 L177,529 C177.552,529 178,528.553 178,528 L178,517 L162,517 L162,528 C162,528.553 162.448,529 163,529 L163,529 Z M182,517 L180,517 L180,529 C180,530.104 179.104,531 178,531 L162,531 C160.896,531 160,530.104 160,529 L160,517 L158,517 C155.791,517 154,518.791 154,521 L154,545 C154,547.209 155.791,549 158,549 L182,549 C184.209,549 186,547.209 186,545 L186,521 C186,518.791 184.209,517 182,517 L182,517 Z"id="save-floppy"></path></g></g></g></svg>
72+
</Button>
2273
</ButtonsContainer>
2374
</Container>
2475
)

‎src/components/menu/style.ts‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,39 @@
1+
import{Link}from'react-router-dom'
12
importstyledfrom'styled-components'
23

34
exportconstButtonsContainer=styled.div`
45
display: flex;
56
height: fit-content;
6-
justify-content: flex-end;
7+
justify-content: space-between;
8+
width: 100%;
9+
`
10+
11+
exportconstChat=styled(Link)`
12+
border-radius: 4px;
13+
color: rgba(255,255,255,0.25);
14+
cursor: pointer;
15+
margin-bottom: 4px;
16+
padding: 4px;
17+
transition: 0.3s;
18+
19+
&:hover {
20+
background-color: rgba(255,255,255,0.25);
21+
box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
22+
color: #fff;
23+
}
24+
`
25+
26+
exportconstChatsContainer=styled.div`
27+
display: flex;
28+
flex-direction: column;
29+
height: 100%;
730
width: 100%;
831
`
932

1033
exportconstContainer=styled.div`
11-
align-items: flex-end;
1234
background-color: rgba(0,0,0,0.2);
1335
display: flex;
36+
flex-direction: column;
1437
height: 100%;
1538
padding: 8px;
1639
width: 20%;

‎src/constants/routes.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
exportdefault{
22
ROOT:'/',
3+
CHAT:'/chat',
4+
CHAT_INDEX:'/chat/:chat',
35
CONFIG:'/config'
46
}

‎src/index.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { RouterProvider } from 'react-router-dom'
55
import'~/index.css'
66
importrouterfrom'~/router'
77

8-
98
constroot=ReactDOM.createRoot(
109
document.getElementById('root')asHTMLElement
1110
)

‎src/pages/chat/index.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
importReact,{useEffect,useRef,useState}from'react'
2-
import{useLocation}from'react-router-dom'
32

4-
import{Message,Messages,ModelResponse}from'~/entities/messages'
3+
import{Message,ModelResponse}from'~/entities/messages'
54
importcreateAssistantMessagefrom'~/services/createAssistantMessage'
65
importcreateUserMessagefrom'~/services/createUserMessage'
6+
importgetChatIndexfrom'~/services/getChatIndex'
77
importrequesterfrom'~/services/requester'
88
importStorefrom'~/services/store'
99
import{disChats,useChats}from'~/stores/chats'
@@ -20,7 +20,6 @@ import './index.css'
2020

2121
exportdefaultfunctionChat(){
2222

23-
constlocation=useLocation()
2423
const[index,setIndex]=useState(-1)
2524
const[loading,setLoading]=useState(true)
2625
constchats=useChats('chats')
@@ -117,10 +116,7 @@ export default function Chat () {
117116
},[index])
118117

119118
useEffect(()=>{
120-
constqueryParams=newURLSearchParams(location.search)
121-
constindexParam=queryParams.get('index')
122-
constindexParsed=indexParam ?parseInt(indexParam) :null
123-
setIndex(indexParsed||0)
119+
setIndex(getChatIndex())
124120
},[])
125121

126122
return(

‎src/pages/config/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
importReact,{useEffect,useRef,useState}from'react'
1+
import{useEffect,useRef,useState}from'react'
22
import{useNavigate}from'react-router-dom'
33

44
importROUTESfrom'~/constants/routes'

‎src/pages/notFound/index.ts‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/pages/splashScreen/index.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import{useEffect,useState}from'react'
2+
3+
importAppBootfrom'~/services/appBoot'
4+
import{Container,Logo}from'./style'
5+
6+
interfaceSplashScreenProps{
7+
children :JSX.Element
8+
}
9+
10+
exportdefaultfunctionSplashScreen({ children} :SplashScreenProps){
11+
12+
const[booting,setBooting]=useState(true)
13+
14+
useEffect(()=>{
15+
AppBoot.run().then(()=>setBooting(false))
16+
},[])
17+
18+
if(booting){
19+
return(
20+
<Container>
21+
<Logosrc={`${process.env.PUBLIC_URL}/favicon.svg`}/>
22+
</Container>
23+
)
24+
}
25+
26+
returnchildren
27+
28+
}

‎src/pages/splashScreen/style.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
importstyledfrom'styled-components'
2+
3+
exportconstContainer=styled.div`
4+
align-items: center;
5+
background-color: #007aff;
6+
display: flex;
7+
height: 100%;
8+
justify-content: center;
9+
width: 100%;
10+
`
11+
12+
exportconstLogo=styled.img`
13+
height: 100%;
14+
max-height: 128px;
15+
max-width: 128px;
16+
width: 100%;
17+
`

‎src/router.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,26 @@ import { createBrowserRouter } from 'react-router-dom'
33
importROUTESfrom'~/constants/routes'
44
importChatfrom'~/pages/chat'
55
importConfigfrom'~/pages/config'
6-
importNotFoundfrom'~/pages/notFound'
7-
6+
importSplashScreenfrom'~/pages/splashScreen'
87

98
constrouter=createBrowserRouter([
109
{
1110
path:ROUTES.ROOT,
12-
errorElement:<NotFound/>,
13-
element:<Chat/>
11+
errorElement:<SplashScreen><Chat/></SplashScreen>,
12+
element:<SplashScreen><Chat/></SplashScreen>
13+
},
14+
{
15+
path:ROUTES.CHAT,
16+
element:<SplashScreen><Chat/></SplashScreen>
17+
},
18+
{
19+
path:ROUTES.CHAT_INDEX,
20+
element:<SplashScreen><Chat/></SplashScreen>
1421
},
1522
{
1623
path:ROUTES.CONFIG,
17-
element:<Config/>
24+
element:<SplashScreen><Config/></SplashScreen>
1825
}
1926
])
2027

21-
2228
exportdefaultrouter

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp