{"version":3,"file":"static/chunks/pages/topic-9d587425f8e4f07b.js","mappings":"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","sources":["webpack://_N_E/?3275","webpack://_N_E/./pages/topic/index.js","webpack://_N_E/<anon>"],"sourcesContent":["\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/topic\",\n      function () {\n        return require(\"private-next-pages/topic/index.js\");\n      }\n    ]);\n    if(module.hot) {\n      module.hot.dispose(function () {\n        window.__NEXT_P.push([\"/topic\"])\n      });\n    }\n  ","import {\n  Container,\n  Typography,\n  Box,\n  Card,\n  CardMedia,\n  CardContent,\n  CardActionArea,\n  Button,\n} from \"@mui/material\";\nimport moment from \"moment-timezone\";\nimport { useEffect, useState, useCallback } from \"react\";\nimport Page from \"../../component/Page\";\nimport { getContentFromHtml } from \"../../component/Utils/utils\";\n\nconst maxToshow = 3;\n\nconst fadeInStyle = {\n  animation: \"fadeIn .5s ease-in\",\n  \"@keyframes fadeIn\": {\n    from: { opacity: 0 },\n    to: { opacity: 1 },\n  },\n};\n\nconst LatestCard = ({ data }) => {\n  const imgs = data?.images;\n  const imglink = imgs && imgs.length > 0 ? imgs[0]?.url : \"/KCC-Logo.webp\";\n\n  return (\n    <Card elevation={2}>\n      <CardActionArea href={`/topic/${data.id}`}>\n        <CardMedia\n          component=\"img\"\n          image={imglink}\n          sx={{ objectFit: \"cover\", height: 500 }}\n        />\n        <CardContent sx={{ p: 3 }}>\n          <Typography component=\"div\" variant=\"h5\">\n            {data.title}\n          </Typography>\n          <Typography variant=\"subtitle1\">{data?.author?.displayName}</Typography>\n          <Typography\n            variant=\"subtitle2\"\n            color=\"text.secondary\"\n            component=\"div\"\n          >\n            {moment(data.published).fromNow()}\n          </Typography>\n          <Typography variant=\"body\" color=\"text.secondary\" component=\"div\">\n            {getContentFromHtml(data?.content)}\n          </Typography>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n};\n\nconst PostCard = ({ data, sx }) => {\n  const imgs = data?.images;\n  const imglink = imgs && imgs.length > 0 ? imgs[0]?.url : \"/KCC-Logo.webp\";\n\n  return (\n    <Card sx={{ ...sx, ...fadeInStyle }} elevation={2}>\n      <CardActionArea href={`/topic/${data.id}`} sx={{ display: \"flex\" }}>\n        <CardMedia\n          component=\"img\"\n          sx={{ flex: 1, height: 250, width: 200, objectFit: imgs ? \"cover\" : \"contain\" }}\n          image={imglink}\n        />\n        <CardContent sx={{ flex: 2 }}>\n          <Typography component=\"div\" variant=\"h5\">\n            {data.title}\n          </Typography>\n          <Typography variant=\"subtitle1\">By {data?.author?.displayName}</Typography>\n          <Typography\n            variant=\"subtitle2\"\n            color=\"text.secondary\"\n            component=\"div\"\n          >\n            {moment(data.published).fromNow()}\n          </Typography>\n          <Box\n            sx={{\n              width: \"35vw\",\n              textOverflow: \"ellipsis\",\n              overflow: \"hidden\",\n            }}\n          >\n            <Typography variant=\"body\" color=\"text.secondary\" noWrap>\n              {getContentFromHtml(data?.content)}\n            </Typography>\n          </Box>\n        </CardContent>\n      </CardActionArea>\n    </Card>\n  );\n};\n\nexport default function Articles() {\n  const [articleWithoutLatest, setArticleWithoutLatest] = useState([]);\n  const [articleToShow, setArticleToShow] = useState([]);\n  const [currentArticleShown, setCurrentArticleShown] = useState(maxToshow);\n  const [latestPost, setLatestPost] = useState(null);\n\n  useEffect(() => {\n    fetch(\"../api/getBlogPosts\")\n      .then((res) => res.json())\n      .then((json) => {\n        let thisPosts = [...json];\n        for (let i = 0; i < thisPosts.length; i++) {\n          const post = thisPosts[i];\n          const imgs = post?.images;\n          if (imgs && imgs.length > 0) {\n            setLatestPost(post);\n            thisPosts.splice(i, 1);\n            setArticleWithoutLatest(thisPosts);\n            break;\n          }\n        }\n        setArticleToShow(thisPosts.slice(0, maxToshow));\n      });\n  }, []);\n\n  const loadMore = useCallback(() => {\n    const newLimit = currentArticleShown + maxToshow;\n    setArticleToShow(articleWithoutLatest.slice(0, newLimit));\n    setCurrentArticleShown(newLimit);\n  }, [currentArticleShown, articleWithoutLatest]);\n\n  useEffect(() => {\n    const handleScroll = () => {\n      const { scrollTop, scrollHeight, clientHeight } = document.documentElement;\n      if (scrollHeight - scrollTop <= clientHeight + 50) {\n        loadMore();\n      }\n    };\n\n    window.addEventListener(\"scroll\", handleScroll);\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, [loadMore]);\n\n  if (!latestPost || articleToShow.length === 0) {\n    return null;\n  }\n\n  return (\n    <Page>\n      <Container sx={{ py: 10 }}>\n        <Typography variant=\"h2\">Latest Topic</Typography>\n        <LatestCard data={latestPost}></LatestCard>\n        <Typography variant=\"h2\" sx={{ pt: 3 }}>\n          Topics\n        </Typography>\n        <Box sx={{ mb: 5 }}>\n          {articleToShow.map((post, idx) => (\n            <PostCard data={post} key={\"post\" + idx} sx={{ my: 2 }} />\n          ))}\n        </Box>\n        {articleWithoutLatest.length > currentArticleShown && (\n          <Button onClick={loadMore}>Load More</Button>\n        )}\n      </Container>\n    </Page>\n  );\n}\n","(self[\"webpackChunk_N_E\"] = self[\"webpackChunk_N_E\"] || []).push([[4425],{\n\n/***/ 5906:\n/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) {\n\n\n    (window.__NEXT_P = window.__NEXT_P || []).push([\n      \"/topic\",\n      function () {\n        return __webpack_require__(5763);\n      }\n    ]);\n    if(false) {}\n  \n\n/***/ }),\n\n/***/ 5763:\n/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\n__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": function() { return /* binding */ Articles; }\n/* harmony export */ });\n/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5893);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4278);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(5285);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(2213);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9677);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1138);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(1953);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(4288);\n/* harmony import */ var _mui_material__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(6798);\n/* harmony import */ var moment_timezone__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(8);\n/* harmony import */ var moment_timezone__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(moment_timezone__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7294);\n/* harmony import */ var _component_Page__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(4374);\n/* harmony import */ var _component_Utils_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(7209);\n\n\n\n\n\n\nconst maxToshow = 3;\nconst fadeInStyle = {\n    animation: \"fadeIn .5s ease-in\",\n    \"@keyframes fadeIn\": {\n        from: {\n            opacity: 0\n        },\n        to: {\n            opacity: 1\n        }\n    }\n};\nconst LatestCard = (param)=>{\n    let { data  } = param;\n    var _imgs_, _data_author;\n    const imgs = data === null || data === void 0 ? void 0 : data.images;\n    const imglink = imgs && imgs.length > 0 ? (_imgs_ = imgs[0]) === null || _imgs_ === void 0 ? void 0 : _imgs_.url : \"/KCC-Logo.webp\";\n    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_5__/* [\"default\"] */ .Z, {\n        elevation: 2,\n        children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_6__/* [\"default\"] */ .Z, {\n            href: \"/topic/\".concat(data.id),\n            children: [\n                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_7__/* [\"default\"] */ .Z, {\n                    component: \"img\",\n                    image: imglink,\n                    sx: {\n                        objectFit: \"cover\",\n                        height: 500\n                    }\n                }),\n                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_8__/* [\"default\"] */ .Z, {\n                    sx: {\n                        p: 3\n                    },\n                    children: [\n                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                            component: \"div\",\n                            variant: \"h5\",\n                            children: data.title\n                        }),\n                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                            variant: \"subtitle1\",\n                            children: data === null || data === void 0 ? void 0 : (_data_author = data.author) === null || _data_author === void 0 ? void 0 : _data_author.displayName\n                        }),\n                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                            variant: \"subtitle2\",\n                            color: \"text.secondary\",\n                            component: \"div\",\n                            children: moment_timezone__WEBPACK_IMPORTED_MODULE_1___default()(data.published).fromNow()\n                        }),\n                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                            variant: \"body\",\n                            color: \"text.secondary\",\n                            component: \"div\",\n                            children: (0,_component_Utils_utils__WEBPACK_IMPORTED_MODULE_4__/* .getContentFromHtml */ .jE)(data === null || data === void 0 ? void 0 : data.content)\n                        })\n                    ]\n                })\n            ]\n        })\n    });\n};\nconst PostCard = (param)=>{\n    let { data , sx  } = param;\n    var _imgs_, _data_author;\n    const imgs = data === null || data === void 0 ? void 0 : data.images;\n    const imglink = imgs && imgs.length > 0 ? (_imgs_ = imgs[0]) === null || _imgs_ === void 0 ? void 0 : _imgs_.url : \"/KCC-Logo.webp\";\n    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_5__/* [\"default\"] */ .Z, {\n        sx: {\n            ...sx,\n            ...fadeInStyle\n        },\n        elevation: 2,\n        children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_6__/* [\"default\"] */ .Z, {\n            href: \"/topic/\".concat(data.id),\n            sx: {\n                display: \"flex\"\n            },\n            children: [\n                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_7__/* [\"default\"] */ .Z, {\n                    component: \"img\",\n                    sx: {\n                        flex: 1,\n                        height: 250,\n                        width: 200,\n                        objectFit: imgs ? \"cover\" : \"contain\"\n                    },\n                    image: imglink\n                }),\n                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_8__/* [\"default\"] */ .Z, {\n                    sx: {\n                        flex: 2\n                    },\n                    children: [\n                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                            component: \"div\",\n                            variant: \"h5\",\n                            children: data.title\n                        }),\n                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                            variant: \"subtitle1\",\n                            children: [\n                                \"By \",\n                                data === null || data === void 0 ? void 0 : (_data_author = data.author) === null || _data_author === void 0 ? void 0 : _data_author.displayName\n                            ]\n                        }),\n                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                            variant: \"subtitle2\",\n                            color: \"text.secondary\",\n                            component: \"div\",\n                            children: moment_timezone__WEBPACK_IMPORTED_MODULE_1___default()(data.published).fromNow()\n                        }),\n                        /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_10__/* [\"default\"] */ .Z, {\n                            sx: {\n                                width: \"35vw\",\n                                textOverflow: \"ellipsis\",\n                                overflow: \"hidden\"\n                            },\n                            children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                                variant: \"body\",\n                                color: \"text.secondary\",\n                                noWrap: true,\n                                children: (0,_component_Utils_utils__WEBPACK_IMPORTED_MODULE_4__/* .getContentFromHtml */ .jE)(data === null || data === void 0 ? void 0 : data.content)\n                            })\n                        })\n                    ]\n                })\n            ]\n        })\n    });\n};\nfunction Articles() {\n    const [articleWithoutLatest, setArticleWithoutLatest] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)([]);\n    const [articleToShow, setArticleToShow] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)([]);\n    const [currentArticleShown, setCurrentArticleShown] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(maxToshow);\n    const [latestPost, setLatestPost] = (0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(null);\n    (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(()=>{\n        fetch(\"../api/getBlogPosts\").then((res)=>res.json()).then((json)=>{\n            let thisPosts = [\n                ...json\n            ];\n            for(let i = 0; i < thisPosts.length; i++){\n                const post = thisPosts[i];\n                const imgs = post === null || post === void 0 ? void 0 : post.images;\n                if (imgs && imgs.length > 0) {\n                    setLatestPost(post);\n                    thisPosts.splice(i, 1);\n                    setArticleWithoutLatest(thisPosts);\n                    break;\n                }\n            }\n            setArticleToShow(thisPosts.slice(0, maxToshow));\n        });\n    }, []);\n    const loadMore = (0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)(()=>{\n        const newLimit = currentArticleShown + maxToshow;\n        setArticleToShow(articleWithoutLatest.slice(0, newLimit));\n        setCurrentArticleShown(newLimit);\n    }, [\n        currentArticleShown,\n        articleWithoutLatest\n    ]);\n    (0,react__WEBPACK_IMPORTED_MODULE_2__.useEffect)(()=>{\n        const handleScroll = ()=>{\n            const { scrollTop , scrollHeight , clientHeight  } = document.documentElement;\n            if (scrollHeight - scrollTop <= clientHeight + 50) {\n                loadMore();\n            }\n        };\n        window.addEventListener(\"scroll\", handleScroll);\n        return ()=>window.removeEventListener(\"scroll\", handleScroll);\n    }, [\n        loadMore\n    ]);\n    if (!latestPost || articleToShow.length === 0) {\n        return null;\n    }\n    return /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_component_Page__WEBPACK_IMPORTED_MODULE_3__/* [\"default\"] */ .Z, {\n        children: /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_mui_material__WEBPACK_IMPORTED_MODULE_11__/* [\"default\"] */ .Z, {\n            sx: {\n                py: 10\n            },\n            children: [\n                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                    variant: \"h2\",\n                    children: \"Latest Topic\"\n                }),\n                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(LatestCard, {\n                    data: latestPost\n                }),\n                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_9__/* [\"default\"] */ .Z, {\n                    variant: \"h2\",\n                    sx: {\n                        pt: 3\n                    },\n                    children: \"Topics\"\n                }),\n                /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_10__/* [\"default\"] */ .Z, {\n                    sx: {\n                        mb: 5\n                    },\n                    children: articleToShow.map((post, idx)=>/*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(PostCard, {\n                            data: post,\n                            sx: {\n                                my: 2\n                            }\n                        }, \"post\" + idx))\n                }),\n                articleWithoutLatest.length > currentArticleShown && /*#__PURE__*/ (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_mui_material__WEBPACK_IMPORTED_MODULE_12__/* [\"default\"] */ .Z, {\n                    onClick: loadMore,\n                    children: \"Load More\"\n                })\n            ]\n        })\n    });\n}\n\n\n/***/ })\n\n},\n/******/ function(__webpack_require__) { // webpackRuntimeModules\n/******/ var __webpack_exec__ = function(moduleId) { return __webpack_require__(__webpack_require__.s = moduleId); }\n/******/ __webpack_require__.O(0, [2678,4885,6770,9412,5446,4374,9774,2888,179], function() { return __webpack_exec__(5906); });\n/******/ var __webpack_exports__ = __webpack_require__.O();\n/******/ _N_E = __webpack_exports__;\n/******/ }\n]);"],"names":["self","push","__unused_webpack_module","__unused_webpack_exports","__webpack_require__","window","__NEXT_P","__webpack_exports__","r","d","Articles","react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__","_mui_material__WEBPACK_IMPORTED_MODULE_5__","_mui_material__WEBPACK_IMPORTED_MODULE_6__","_mui_material__WEBPACK_IMPORTED_MODULE_7__","_mui_material__WEBPACK_IMPORTED_MODULE_8__","_mui_material__WEBPACK_IMPORTED_MODULE_9__","_mui_material__WEBPACK_IMPORTED_MODULE_10__","_mui_material__WEBPACK_IMPORTED_MODULE_11__","_mui_material__WEBPACK_IMPORTED_MODULE_12__","moment_timezone__WEBPACK_IMPORTED_MODULE_1__","moment_timezone__WEBPACK_IMPORTED_MODULE_1___default","n","react__WEBPACK_IMPORTED_MODULE_2__","_component_Page__WEBPACK_IMPORTED_MODULE_3__","_component_Utils_utils__WEBPACK_IMPORTED_MODULE_4__","fadeInStyle","animation","from","opacity","to","LatestCard","_imgs_","_data_author","data","param","imgs","images","imglink","length","url","jsx","Z","elevation","children","jsxs","href","concat","id","component","image","sx","objectFit","height","p","variant","title","author","displayName","color","published","fromNow","jE","content","PostCard","display","flex","width","textOverflow","overflow","noWrap","articleWithoutLatest","setArticleWithoutLatest","useState","articleToShow","setArticleToShow","currentArticleShown","setCurrentArticleShown","latestPost","setLatestPost","useEffect","fetch","then","res","json","thisPosts","i","post","splice","slice","loadMore","useCallback","newLimit","handleScroll","scrollTop","scrollHeight","clientHeight","document","documentElement","addEventListener","removeEventListener","py","pt","mb","map","idx","my","onClick","O","s","_N_E"],"sourceRoot":""}