Merge pull request #33 from PRTIMES/feature/combine-front-and-back

フロントエンド改修（その1）

frontend/src/components/ArticleCard.tsx

@@ -1,23 +1,16 @@
 import { Card, CardContent, Typography } from '@mui/material'
-import { useRouter } from 'next/router'
 
 type ArticleCardProps = {
   title: string
-  content: string
+  summary: string
+  company_name: string
   url: string
 }
 
 const omit = (text: string) => (len: number) => (ellipsis: string) =>
   text.length >= len ? text.slice(0, len - ellipsis.length) + ellipsis : text
 
 const ArticleCard = (props: ArticleCardProps) => {
-  const router = useRouter()
-
-  // タイトルクリックでルーティング
-  const handleClick = () => {
-    router.push(props.url)
-  }
-
   return (
     <Card
       sx={{
@@ -28,31 +21,39 @@ const ArticleCard = (props: ArticleCardProps) => {
         mx: 'auto',
       }}
     >
-      <CardContent>
-        <Typography
-          variant="h6"
-          component="div"
-          onClick={handleClick}
-          sx={{
-            mb: 2,
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            color: 'inherit',
-            '&:hover': {
-              textDecoration: 'underline',
-            },
-          }}
-        >
-          {omit(props.title)(45)('...')}
-        </Typography>
-        <Typography
-          sx={{
-            fontSize: 14,
-          }}
-        >
-          {props.content}
-        </Typography>
-      </CardContent>
+      <a href={props.url} target="_blank" rel="noopener noreferrer">
+        <CardContent>
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{
+              mb: 2,
+              fontWeight: 'bold',
+              cursor: 'pointer',
+              color: 'inherit',
+              '&:hover': {
+                textDecoration: 'underline',
+              },
+            }}
+          >
+            {omit(props.title)(45)('...')}
+          </Typography>
+          <Typography
+            sx={{
+              fontSize: 14,
+            }}
+          >
+            {props.summary}
+          </Typography>
+          <Typography
+            sx={{
+              fontSize: 12,
+            }}
+          >
+            {props.company_name}
+          </Typography>
+        </CardContent>
+      </a>
     </Card>
   )
 }

frontend/src/pages/customize/company.tsx

@@ -9,6 +9,7 @@ import ListItem from '@mui/material/ListItem'
 import ListItemButton from '@mui/material/ListItemButton'
 import ListItemText from '@mui/material/ListItemText'
 import Typography from '@mui/material/Typography'
+import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState, useEffect } from 'react'
 import { ky } from '@/libs/ky'
@@ -22,10 +23,13 @@ export default function CompanyList() {
   const [companyData, setCompanyData] = useState<Company[]>([])
   const [selectedCompanies, setSelectedCompanies] = useState<number[]>([])
   const [itemsToShow, setItemsToShow] = useState(15) // 表示するアイテム数の初期値を15に設定
+  const [resultUrl, setResultUrl] = useState<string>('')
 
   const router = useRouter()
 
   useEffect(() => {
+    if (!router.isReady) return;
+
     const raw_industry_id = router.query['industry-id']
     if (!raw_industry_id) {
       router.push('/customize/industry').then()
@@ -57,6 +61,15 @@ export default function CompanyList() {
       })
   }, [router, router.query])
 
+  useEffect(() => {
+    const searchParams = new URLSearchParams()
+    selectedCompanies.forEach((selectedCompany) => {
+      searchParams.append('company_ids', String(selectedCompany))
+    })
+
+    setResultUrl('/customize/result?' + searchParams.toString())
+  }, [selectedCompanies])
+
   const handleToggle = (value: number) => {
     const currentIndex = selectedCompanies.indexOf(value)
     const newChecked = [...selectedCompanies]
@@ -74,31 +87,6 @@ export default function CompanyList() {
     setItemsToShow(itemsToShow + 15) // さらに15件を表示
   }
 
-  const handleSubmit = async () => {
-    try {
-      const response = await fetch('http://localhost:8000/test', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          selectedCompanies,
-        }),
-      })
-
-      if (!response.ok) {
-        return
-      }
-
-      const data = await response.json()
-      console.log(data)
-      alert('Submission successful')
-    } catch (error) {
-      console.error('Failed to submit companies:', error)
-      alert('Failed to submit')
-    }
-  }
-
   return (
     <Box sx={{ backgroundColor: 'white', minHeight: '100vh', p: 4 }}>
       <Typography
@@ -152,13 +140,18 @@ export default function CompanyList() {
               color="primary"
               onClick={handleLoadMore}
             >
-              もっと見る
+              他の会社もみる
             </Button>
           </Box>
         )}
         <Box sx={{ display: 'flex', justifyContent: 'center', mt: 4 }}>
-          <Button variant="contained" color="primary" onClick={handleSubmit}>
-            提出
+          <Button
+            component={Link}
+            href={resultUrl}
+            variant="contained"
+            color="primary"
+          >
+            プレスリリースを見る
           </Button>
         </Box>
       </Container>

frontend/src/pages/customize/result.tsx

@@ -0,0 +1,110 @@
+import { Box, Container, Typography, Button } from '@mui/material'
+import type { NextPage } from 'next'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useState, useEffect } from 'react'
+import ArticleCard from '@/components/ArticleCard'
+import Loading from '@/components/Loading'
+import { ky } from '@/libs/ky'
+
+type ArticleProps = {
+  title: string
+  summary: string
+  company_name: string
+  url: string
+}
+
+const Index: NextPage = () => {
+  const [articles, setArticles] = useState<ArticleProps[]>([])
+  const [loading, setLoading] = useState<boolean>(true)
+
+  const router = useRouter()
+
+  useEffect(() => {
+    setLoading(true)
+  }, [])
+
+  useEffect(() => {
+    if (!router.isReady) return
+
+    const raw_company_id = router.query['company_ids']
+    if (!raw_company_id) {
+      router.push('/customize/industry').then()
+      return
+    }
+
+    const company_ids = Array.isArray(raw_company_id)
+      ? raw_company_id
+      : [raw_company_id]
+
+    const searchParams = new URLSearchParams()
+    company_ids.forEach((company_id) => {
+      searchParams.append('company_ids[]', company_id)
+    })
+
+    ky.get('./api/press-release/company', {
+      searchParams,
+    })
+      .then((v) => {
+        return v.json<
+          {
+            title: string
+            summary: string
+            company_name: string
+            url: string
+          }[]
+        >()
+      })
+      .then((value) => {
+        setLoading(false)
+        setArticles(value)
+      })
+  }, [router, router.query])
+
+  if (loading) return <Loading />
+
+  return (
+    <Box sx={{ backgroundColor: 'white', minHeight: '100vh', p: 4 }}>
+      <Typography
+        variant="h3"
+        component="h1"
+        sx={{ textAlign: 'center', mb: 2, color: 'text.primary' }}
+      >
+        選択した企業のピックアッププレスリリース
+      </Typography>
+      <Typography
+        variant="body1"
+        component="p"
+        sx={{ textAlign: 'center', mb: 4, color: 'text.primary' }}
+      >
+        あなたが気になる記事を選ぼう
+      </Typography>
+      <Container maxWidth="md">
+        {articles.map((article, id) => (
+          <Box key={id} sx={{ mb: 4, bgcolor: 'white' }}>
+            <ArticleCard {...article} />
+          </Box>
+        ))}
+        <Box sx={{ textAlign: 'center', mt: 4 }}>
+          <Button
+            component={Link}
+            href="/customize/industry"
+            variant="contained"
+          >
+            業種・会社から探し直す
+          </Button>
+          <Button
+            component={Link}
+            href="/home"
+            variant="contained"
+            sx={{ ml: 2 }}
+          >
+            カスタマイズされたプレスリリースを見る
+          </Button>
+        </Box>
+      </Container>
+    </Box>
+  )
+}
+
+export default Index