diff --git a/frontend/src/components/ArticleCard.tsx b/frontend/src/components/ArticleCard.tsx
index f0dd77d..ac3a1ca 100644
--- a/frontend/src/components/ArticleCard.tsx
+++ b/frontend/src/components/ArticleCard.tsx
@@ -1,9 +1,9 @@
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
}
@@ -11,13 +11,6 @@ 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 (
{
mx: 'auto',
}}
>
-
-
- {omit(props.title)(45)('...')}
-
-
- {props.content}
-
-
+
+
+
+ {omit(props.title)(45)('...')}
+
+
+ {props.summary}
+
+
+ {props.company_name}
+
+
+
)
}
diff --git a/frontend/src/pages/api/hello.ts b/frontend/src/pages/api/hello.ts
deleted file mode 100644
index 144711b..0000000
--- a/frontend/src/pages/api/hello.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-type Data = {
- name: string
-}
-
-export default function handler(
- req: NextApiRequest,
- res: NextApiResponse,
-) {
- res.status(200).json({ name: 'John Doe' })
-}
diff --git a/frontend/src/pages/customize/company.tsx b/frontend/src/pages/customize/company.tsx
index 6263ca2..0de21c2 100644
--- a/frontend/src/pages/customize/company.tsx
+++ b/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([])
const [selectedCompanies, setSelectedCompanies] = useState([])
const [itemsToShow, setItemsToShow] = useState(15) // 表示するアイテム数の初期値を15に設定
+ const [resultUrl, setResultUrl] = useState('')
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 (
- もっと見る
+ 他の会社もみる
)}
-
diff --git a/frontend/src/pages/customize/result.tsx b/frontend/src/pages/customize/result.tsx
new file mode 100644
index 0000000..c45abdb
--- /dev/null
+++ b/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([])
+ const [loading, setLoading] = useState(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
+
+ return (
+
+
+ 選択した企業のピックアッププレスリリース
+
+
+ あなたが気になる記事を選ぼう
+
+
+ {articles.map((article, id) => (
+
+
+
+ ))}
+
+
+ 業種・会社から探し直す
+
+
+ カスタマイズされたプレスリリースを見る
+
+
+
+
+ )
+}
+
+export default Index
diff --git a/frontend/src/pages/home.tsx b/frontend/src/pages/home.tsx
index c0d7faa..ecf59af 100644
--- a/frontend/src/pages/home.tsx
+++ b/frontend/src/pages/home.tsx
@@ -1,48 +1,43 @@
-import { Box, Container, Typography, Button } from '@mui/material'
+import { Box, Container, Typography } from '@mui/material'
+import Button from '@mui/material/Button'
import type { NextPage } from 'next'
+import Link from 'next/link'
import { useState, useEffect } from 'react'
import ArticleCard from '@/components/ArticleCard'
-import Error from '@/components/Error'
import Loading from '@/components/Loading'
+import { ky } from '@/libs/ky'
type ArticleProps = {
- id: number
title: string
- content: string
+ summary: string
+ company_name: string
url: string
}
const Index: NextPage = () => {
const [articles, setArticles] = useState([])
const [loading, setLoading] = useState(true)
- const [error, setError] = useState(false)
- const [itemsToShow, setItemsToShow] = useState(30)
+ const [readMoreDisabled, setReadMoreDisabled] = useState(false)
useEffect(() => {
- fetch('https://jsonplaceholder.typicode.com/photos')
- .then((response) => {
- if (!response.ok) {
- return
- }
- return response.json()
+ ky.get('./api/press-release/recommend')
+ .then((v) => {
+ return v.json<
+ {
+ title: string
+ summary: string
+ company_name: string
+ url: string
+ }[]
+ >()
})
- .then((data) => {
- setArticles(data)
- setLoading(false)
- })
- .catch((error) => {
- console.error('Error fetching data:', error)
- setError(true)
+ .then((value) => {
setLoading(false)
+ setArticles(value)
})
}, [])
- const handleLoadMore = () => {
- setItemsToShow(itemsToShow + 30)
- }
-
if (loading) return
- if (error) return
return (
@@ -51,28 +46,48 @@ const Index: NextPage = () => {
component="h1"
sx={{ textAlign: 'center', mb: 2, color: 'text.primary' }}
>
- オススメ記事
+ カスタマイズされたプレスリリースを見る
- あなたが気になる記事を選ぼう
+ あなたが気になる記事を見よう
- {articles.slice(0, itemsToShow).map((article) => (
-
+ {articles.map((article, id) => (
+
))}
- {itemsToShow < articles.length && (
-
-
- もっと見る
-
-
- )}
+
+ {
+ setReadMoreDisabled(true)
+ ky.get('./api/press-release/recommend')
+ .then((v) => {
+ return v.json<
+ {
+ title: string
+ summary: string
+ company_name: string
+ url: string
+ }[]
+ >()
+ })
+ .then((v) => {
+ setArticles((prevState) => [...prevState, ...v])
+ setReadMoreDisabled(false)
+ })
+ }}
+ >
+ もっと見る
+
+
)