const { id } = useParams();

const [searchParams] = useSearchParams();

const basename = searchParams.get("basename");

const [item, setItem] = useState<ItemsShowViewModel | null>(null);

const [error, setError] = useState<null | string>(null);

const [errorFrontmatterMessages, setErrorFrontmatterMessages] = useState<

null | string[]

>(null);

const [isStateOpen, setIsStateOpen] = useState(false);

const handleMobileOpen = () => {

setIsStateOpen(true);

};

const handleMobileClose = () => {

setIsStateOpen(false);

};

useHotReloadEffect(() => {

if (!id) return;

const queryParams = basename ? { basename: basename } : undefined;

const fetchURL = apiItemsShowPath(id, queryParams);

fetch(fetchURL).then((response) => {

if (!response.ok) {

if (response.status === 404) {

setError("ファイルが見つかりません");

setItem(null);

} else {

response.json().then((data) => {

setError(null);

setErrorFrontmatterMessages(data.errorMessages);

setItem(null);

});

}

} else {

response.json().then((data) => {

setItem(data);

});

}

});

}, [id, basename]);

return (

<Main>

<Sidebar>

<SidebarContents

isStateOpen={isStateOpen}

handleMobileClose={handleMobileClose}

/>

</Sidebar>

<Contents>

{id && item ? (

<>

<Header

handleMobileOpen={handleMobileOpen}

isItemPublishable={

item.modified && item.error_messages.length === 0

}

isOlderThanRemote={item.is_older_than_remote}

itemPath={item.item_path}

id={id}

basename={basename}

/>

<div css={contentsWrapperStyle}>

<div css={contentsContainerStyle}>

<ArticleInfo

secret={item.secret}

modified={item.modified}

organizationUrlName={item.organization_url_name}

published={item.published}

errorMessages={item.error_messages}

qiitaItemUrl={item.qiita_item_url}

slide={item.slide}

isOlderThanRemote={item.is_older_than_remote}

/>

<div css={articleWrapStyle}>

<Article

renderedBody={item.rendered_body}

tags={item.tags}

title={item.title}

slide={item.slide}

/>

</div>

</div>

</div>

</>

) : error ? (

<p css={errorMessageStyle}>{error}</p>

) : errorFrontmatterMessages && errorFrontmatterMessages.length > 0 ? (

<div css={errorContentsStyle}>

<p css={errorTitleStyle}>

記事の設定の入力内容に誤りがあるため、プレビューが表示できません

</p>

{errorFrontmatterMessages.map((errorMessage, index) => (

<p key={`error-message-${index}`} css={errorStyle}>

<MaterialSymbol fill={true} css={exclamationIconStyle}>

error

</MaterialSymbol>

<div>{errorMessage}</div>

</p>

))}

</div>

) : null}

</Contents>

</Main>

);