Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

221 ユーザーをクリックしたらそのユーザーの情報をモーダルウィンドウ的なので表示させるます #233

Merged
Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c4de88d
modalを簡単に作れるらしいライブラリを入れた
wyoheiii May 25, 2023
808dee3
userinfo要素をクリックしたらmodalが開くようにした
wyoheiii May 25, 2023
e3ddc69
modalの外側をクリックしたら閉じるようにした
wyoheiii May 25, 2023
0b63dcf
modalのマウント先を指定しないとエラーが出るのを修正した
wyoheiii May 26, 2023
b7c3070
条件式が不要なので削除
wyoheiii May 26, 2023
c8e52fa
user情報を表示
wyoheiii May 26, 2023
6b79c63
ファイルに移した
wyoheiii May 26, 2023
01ef2bc
fmt
wyoheiii May 26, 2023
13cabbd
sb-update
wyoheiii May 26, 2023
b76699c
react-modalの型定義ファイルをinstallした
wyoheiii May 26, 2023
791188e
add stories
wyoheiii May 26, 2023
bdd48d8
pushしなおしたい
wyoheiii May 26, 2023
93e2884
Merge branch 'main' into 221-ユーザーをクリックらそのユーザーの情報をモーダルウィンドウ的なので表示させるます
wyoheiii May 26, 2023
d9e1a83
add striesの中身
wyoheiii May 26, 2023
3fba2ac
Merge branch '221-ユーザーをクリックらそのユーザーの情報をモーダルウィンドウ的なので表示させるます' of https:…
wyoheiii May 26, 2023
0211a4c
add snapshot
wyoheiii May 26, 2023
b433d3f
Merge branch 'main' into 221-ユーザーをクリックらそのユーザーの情報をモーダルウィンドウ的なので表示させるます
wyoheiii May 30, 2023
e2d2cc6
sb-update
wyoheiii May 30, 2023
96590a5
Merge branch 'main' into 221-ユーザーをクリックらそのユーザーの情報をモーダルウィンドウ的なので表示させるます
wyoheiii May 31, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
"next-auth": "^4.22.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-modal": "^3.16.1",
"socket.io-client": "^4.6.1",
"typescript": "5.0.4"
},
Expand All @@ -49,6 +50,7 @@
"@storybook/react": "^7.0.9",
"@storybook/test-runner": "^0.10.0",
"@storybook/testing-library": "^0.0.14-next.2",
"@types/react-modal": "^3.16.0",
"@typescript-eslint/eslint-plugin": "^5.59.2",
"@typescript-eslint/parser": "^5.59.2",
"concurrently": "^8.0.1",
Expand Down
Binary file modified frontend/src/app/__image_snapshots__/app-page--login.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/src/app/__image_snapshots__/app-page--select-channel.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/src/app/__image_snapshots__/app-page--send-msg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified frontend/src/app/__image_snapshots__/app-page--send-some-msg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 24 additions & 2 deletions frontend/src/features/user/components/User.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ReactNode } from 'react';
import { ReactNode, useState } from 'react';
import { useAtom } from 'jotai';
import { signIn } from 'next-auth/react';

Expand All @@ -7,13 +7,35 @@ import { userInfoAtom } from '@/App';

import { LoginForm } from './LoginForm';
import { SignUpForm } from './SignUpForm';
import { UserDetailsModal } from './UserDetailsModal';

export const User = ({ children }: { children: ReactNode }) => {
const [userInfo, setUserInfo] = useAtom(userInfoAtom);
const [modalIsOpen, setModalIsOpen] = useState(false);
const closeModal = () => {
console.log('closeModal');
setModalIsOpen(false);
};

const UserInputArea = () => {
if (userInfo) {
return <p>name : {userInfo?.nickname}</p>;
return (
<div>
<button
onClick={() => {
setModalIsOpen(true);
}}
>
botton
</button>
<p>name : {userInfo?.nickname}</p>
<UserDetailsModal
userInfo={userInfo}
modalIsOpen={modalIsOpen}
closeModal={closeModal}
/>
</div>
);
} else {
return (
<div style={{ margin: '10px auto 10px auto' }}>
Expand Down
14 changes: 14 additions & 0 deletions frontend/src/features/user/components/UserDetailsModal.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import type { Meta, StoryObj } from '@storybook/react';

import { User } from './User';

const meta = {
component: User,
tags: ['autodocs'],
} satisfies Meta<typeof User>;

export default meta;

type Story = StoryObj<typeof User>;

export const Basic: Story = {};
23 changes: 23 additions & 0 deletions frontend/src/features/user/components/UserDetailsModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
'use client';
import Modal from 'react-modal';

import { UserInfo } from '../types/UserDto';

Modal.setAppElement('body');
export const UserDetailsModal = ({
userInfo,
modalIsOpen,
closeModal,
}: {
userInfo: UserInfo;
modalIsOpen: boolean;
closeModal: () => void;
}) => {
return (
<Modal isOpen={modalIsOpen} onRequestClose={closeModal}>
<p>
id : {userInfo?.id}, name : {userInfo?.nickname}
</p>
</Modal>
);
};
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.