All files / src/routes/pages IndividualItem.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { FC } from 'react';
import { Link, useParams } from 'react-router-dom';
import {
  DeleteItem,
  ErrorResult,
  ImageItem,
  IndividualItemResult,
  Loading,
  RentRental,
  ReplaceRental,
  TransferItem,
  UpdateRental,
} from '../../components';
import { IndividualItemResponse } from '../../models/individualItemResponse';
import { Pending } from '../../models/pending';
import { ErrorResponse } from '../../models/errorResponse';
import { useFetchIndividualItem } from '../../hooks/useFetchIndividualItem';
 
const IndividualItem: FC = () => {
  const { id } = useParams<{ id: string }>();
  // get individual item result
  const result: IndividualItemResponse | ErrorResponse | Pending = useFetchIndividualItem(id);
  //早期リターン
  if (typeof id === 'undefined') {
    // 発生しないはず
    return <h2>Unexpected Error</h2>;
  }
  return (
    <>
      {result === 'pending' ? (
        // 処理中
        <Loading />
      ) : 'code' in result && 'message' in result ? (
        // fetchに失敗
        <ErrorResult result={result} />
      ) : (
        // fetch成功
        <>
          <IndividualItemResult result={result} />
          {/*Update*/}
          {result.is_rent ? (
            <Link to={``}>貸出中の物品は編集できません。</Link>
          ) : (
            <Link to={`/item/${id}/update`}>更新リンク</Link>
          )}
          <br />
          {/*Image*/}
          <ImageItem id={id} isHidden={result.is_rent ? true : false} />
          {/*Rental*/}
          <>
            <UpdateRental
              id={id}
              isHidden={result.id === 1 || !result.is_rent ? true : false}
              rentalPageFlag={'individualItem'}
            />
            <ReplaceRental
              id={id}
              isHidden={result.id === 1 || !result.is_rent ? true : false}
              rentalPageFlag={'individualItem'}
            />
          </>
          <RentRental id={id} isHidden={result.id === 1 || result.is_rent ? true : false} />
          <br />
          {/*Transfer*/}
          <TransferItem id={id} isHidden={result.id === 1 || result.is_rent ? true : false} />
          <br />
          {/*Delete*/}
          <DeleteItem id={id} isHidden={result.id === 1 || result.is_rent ? true : false} />
        </>
      )}
    </>
  );
};
 
export default IndividualItem;