create-more-look-button

PRTIMES · Aug 29, 2024 · ae78333 · ae78333
1 parent 41857b9
commit ae78333
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 8 deletions.
diff --git a/frontend/src/pages/customize/company/industry.tsx b/frontend/src/pages/customize/company/industry.tsx
@@ -18,6 +18,7 @@ export default function CompanyList() {
   const [selectedCompanies, setSelectedCompanies] = useState([])
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState(false)
+  const [itemsToShow, setItemsToShow] = useState(15) // 表示するアイテム数の初期値を15に設定
 
   useEffect(() => {
     const fetchCompanyData = async () => {
@@ -63,6 +64,10 @@ export default function CompanyList() {
     setSelectedCompanies(newChecked)
   }
 
+  const handleLoadMore = () => {
+    setItemsToShow(itemsToShow + 15) // さらに15件を表示
+  }
+
   const handleSubmit = async () => {
     try {
       const response = await fetch('http://localhost:8000/test', {
@@ -106,13 +111,9 @@ export default function CompanyList() {
       </Typography>
       <Container maxWidth="md">
         <List
-          sx={{
-            width: '100%',
-            bgcolor: 'background.paper',
-            overflow: 'auto',
-          }}
+          sx={{ width: '100%', bgcolor: 'background.paper', overflow: 'auto' }}
         >
-          {companyData.map((company) => (
+          {companyData.slice(0, itemsToShow).map((company) => (
             <Card key={company.id} sx={{ mb: 4, p: 2 }}>
               <CardContent>
                 <ListItem disablePadding>
@@ -138,6 +139,17 @@ export default function CompanyList() {
             </Card>
           ))}
         </List>
+        {itemsToShow < companyData.length && (
+          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleLoadMore}
+            >
+              もっと見る
+            </Button>
+          </Box>
+        )}
         <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
           <Button variant="contained" color="primary" onClick={handleSubmit}>
             提出

diff --git a/frontend/src/pages/home.tsx b/frontend/src/pages/home.tsx
@@ -1,4 +1,4 @@
-import { Box, Container, Typography } from '@mui/material'
+import { Box, Container, Typography, Button } from '@mui/material'
 import type { NextPage } from 'next'
 import { useState, useEffect } from 'react'
 import ArticleCard from '@/components/ArticleCard'
@@ -16,6 +16,7 @@ const Index: NextPage = () => {
   const [articles, setArticles] = useState<ArticleProps[]>([])
   const [loading, setLoading] = useState<boolean>(true)
   const [error, setError] = useState<boolean>(false)
+  const [itemsToShow, setItemsToShow] = useState<number>(30)
 
   useEffect(() => {
     fetch('https://jsonplaceholder.typicode.com/photos')
@@ -36,6 +37,10 @@ const Index: NextPage = () => {
       })
   }, [])
 
+  const handleLoadMore = () => {
+    setItemsToShow(itemsToShow + 30)
+  }
+
   if (loading) return <Loading />
   if (error) return <Error />
 
@@ -56,11 +61,18 @@ const Index: NextPage = () => {
         あなたが気になる記事を選ぼう
       </Typography>
       <Container maxWidth="md">
-        {articles.map((article) => (
+        {articles.slice(0, itemsToShow).map((article) => (
           <Box key={article.id} sx={{ mb: 4, bgcolor: 'white' }}>
             <ArticleCard {...article} />
           </Box>
         ))}
+        {itemsToShow < articles.length && (
+          <Box sx={{ textAlign: 'center', mt: 4 }}>
+            <Button variant="contained" onClick={handleLoadMore}>
+              もっと見る
+            </Button>
+          </Box>
+        )}
       </Container>
     </Box>
   )