reports.vueをreactのReports.jsxに書き換えた #6236
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,24 +6,37 @@ import LoadingListPlaceholder from './LoadingListPlaceholder' | |
| import Report from './Report' | ||
| import Pagination from './Pagination' | ||
| import PracticeFilterDropdown from './PracticeFilterDropdown' | ||
| import UnconfirmedLink from './UnconfirmedLink' | ||
|
|
||
| export default function Reports({ all = false, userId = '', practices = false, unchecked = false, displayUserIcon = true, companyId = '', practiceId = '' }) { | ||
|
Comment on lines
-10
to
+11
There was a problem hiding this comment. 変数の増加が気になります 👀 There was a problem hiding this comment. おそらくmono-nobeさんが仰っていることは、 export default function Reports (props) {
// 中の処理
}このように https://discord.com/channels/715806612824260640/959777673612251146/1070993776899784704 AntiSatoriさんにこちらのDiscordで教えていただいたのですが、今のReactでは
ことが推奨されているようです！ そのため、ちょっとコードが長くなっていますが、このような形でコードを書きました。 ※引数がもっと増えてきたら、引数ごとに改行を入れることが多いです。今回は引数の数がそこまで多くないので、１行で書きました。 There was a problem hiding this comment.
そうです！
参考URLありがとうございます！！！
そうだったのですね 😳 |
||
| const per = 20 | ||
| const neighbours = 4 | ||
| const defaultPage = parseInt(queryString.parse(location.search).page) || 1 | ||
| const [page, setPage] = useState(defaultPage) | ||
| const [userPracticeId, setUserPracticeId] = useState('') | ||
|
There was a problem hiding this comment. 📝プラクティスそのものの日報一覧と、特定のユーザー日報一覧で表示形式が違うため、処理が異なります。そのため、変数名が被らないように書き換えています。 There was a problem hiding this comment.
There was a problem hiding this comment.
理由としては、これに近いです。 11行目で これと同じ変数名が、こちらで最近追加されたPull Requestで使われてしまっていました。 そのため、もしこの16行目が （そのままの状態だと、11行目の変数定義と16行目の変数定義がバッティングして、エラーが出てReactが表示されなくなってしまいます💧） 削除をしているわけではなく、変数名を変更してかぶらないようにすることで、既存の処理を壊すことなく実装することができます。 なので、
という２つの理由からおこなっているものです。 この変更に伴い、この直下の22行目や23行目など、影響範囲のあるところも修正しております。 There was a problem hiding this comment.
なるほどです！ |
||
|
|
||
| useEffect(() => { | ||
| setPage(page) | ||
| }, [page]) | ||
|
|
||
| useEffect(() => { | ||
| setUserPracticeId(userPracticeId) | ||
| }, [userPracticeId]) | ||
|
|
||
| const { data, error } = useSWR( | ||
| practices | ||
| ? `/api/reports.json?user_id=${userId}&page=${page}&practice_id=${userPracticeId}` | ||
| : unchecked | ||
| ? `/api/reports/unchecked.json?page=${page}&user_id=${userId}` | ||
| : userId !== '' | ||
| ? `/api/reports.json?page=${page}&user_id=${userId}` | ||
| : practiceId !== '' | ||
| ? `/api/reports.json?page=${page}&practice_id=${practiceId}` | ||
| : companyId !== '' | ||
| ? `/api/reports.json?page=${page}&company_id=${companyId}` | ||
| : all === true | ||
| ? `/api/reports.json?page=${page}&practice_id=${userPracticeId}` | ||
| : console.log('data_fetched!'), | ||
|
There was a problem hiding this comment. 📝Reactへ渡される引数によって、fetch先を変えています。 There was a problem hiding this comment. 複数の条件に合う引数が渡されることはありますか？ There was a problem hiding this comment.
複数の条件に合う引数が渡されることはありません。 slimを見て頂けると分かりやすいと思うのですが、例えば「全ての日報のデータをfetchしたい場合」と、「個人の日報のデータをfetchしてくる場合」で渡す引数が違うからです。 優先度も考えて三項演算子で処理致しました！ なので、問題ないと思います。 There was a problem hiding this comment.
ありがとうございます！ |
||
| fetcher | ||
| ) | ||
|
|
||
|
|
@@ -39,22 +52,26 @@ export default function Reports({ user, currentUser, practices }) { | |
| return ( | ||
| <> | ||
| {data.totalPages === 0 && ( | ||
| <div> | ||
| {practices && ( | ||
|
There was a problem hiding this comment. 📝 |
||
| <PracticeFilterDropdown | ||
| practices={practices} | ||
| setPracticeId={setUserPracticeId} | ||
| practiceId={userPracticeId} | ||
| /> | ||
| )} | ||
| <NoReports unchecked={unchecked} /> | ||
| </div> | ||
| )} | ||
| {data.totalPages > 0 && ( | ||
| <div> | ||
| {practices && ( | ||
| <PracticeFilterDropdown | ||
| practices={practices} | ||
| setPracticeId={setUserPracticeId} | ||
| practiceId={userPracticeId} | ||
| /> | ||
| )} | ||
| <div className="page-content reports"> | ||
| {data.totalPages > 1 && ( | ||
| <Pagination | ||
|
|
@@ -72,12 +89,16 @@ export default function Reports({ user, currentUser, practices }) { | |
| <Report | ||
| key={report.id} | ||
| report={report} | ||
| currentUserId={report.currentUserId} | ||
| displayUserIcon={displayUserIcon} | ||
| /> | ||
| ) | ||
| })} | ||
| </div> | ||
| </ul> | ||
| {unchecked && ( | ||
| <UnconfirmedLink label={'未チェックの日報を一括で開く'} /> | ||
| )} | ||
| {data.totalPages > 1 && ( | ||
| <Pagination | ||
| sum={data.totalPages * per} | ||
|
|
@@ -94,12 +115,14 @@ export default function Reports({ user, currentUser, practices }) { | |
| ) | ||
| } | ||
|
|
||
| const NoReports = ({ unchecked }) => { | ||
| return ( | ||
| <div className="o-empty-message"> | ||
| <div className="o-empty-message__icon"> | ||
| {unchecked | ||
| ? <><i className="fa-regular fa-smile" /><p className="o-empty-message__text">未チェックの日報はありません</p></> | ||
| : <><i className="fa-regular fa-sad-tear" /><p className="o-empty-message__text">'日報はまだありません。'</p></> | ||
| } | ||
|
There was a problem hiding this comment. 📝 |
||
| </div> | ||
| </div> | ||
| ) | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -6,4 +6,4 @@ | |
|
|
||
| .page-body | ||
| .container.is-md | ||
| = react_component('Reports', practiceId: @practice.id) | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,4 +11,4 @@ header.page-header | |
|
|
||
| .page-body | ||
| .container.is-md | ||
| = react_component('Reports', unchecked: true) | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
📝displayUserIconがある場合のみ、カッコ内の処理が行われます。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
この部分を別コンポーネントにするとわかりやすいかな〜と思いました。
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
別コンポーネントを作成致しました！
差分はこちらになります。→ 34062a1