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 && ( - - - - )} + + + )