Merge pull request #30 from thebishaldeb/master

#29: migration from js to ts.

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "awesome-typescript-loader": "^5.2.1",
     "axios": "^0.19.0",
     "bootstrap": "^4.3.1",
     "paginate-array": "^2.1.0",
@@ -12,7 +13,9 @@
     "react-infinite-scroller": "^1.2.4",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.2.0",
-    "reactstrap": "^8.1.1"
+    "reactstrap": "^8.1.1",
+    "source-map-loader": "^0.2.4",
+    "typescript": "^3.6.4"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -21,6 +24,8 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "@types/react-infinite-scroller": "^1.2.1",
+    "@types/reactstrap": "^8.0.5",
     "axios-mock-adapter": "^1.17.0",
     "eslint-plugin-jest": "^22.19.0",
     "eslint-plugin-react": "^7.16.0"

src/components/CustomLoader.js → src/components/CustomLoader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import ContentLoader from "react-content-loader"
 import { Card } from 'reactstrap';
 
-const CustomLoader = props => (
+const CustomLoader = (props: any) => (
   <Card>
     <ContentLoader
       height={95}

src/components/Item.tsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from "react";
+import Story from "./Story";
+import Job from "./Job";
+import { getItem } from "../utils/Api";
+import CustomLoader from "./CustomLoader";
+
+const Item = (props: any) => {
+  const [item, setItem]: any = useState(null);
+
+  useEffect(() => {
+    const fetchAndSetItem = async () => {
+      const result = await getItem(props.id);
+      if (result.resolved) {
+        setItem(result.data);
+      }
+    };
+    fetchAndSetItem();
+  }, [props.id]);
+
+  if (!item) {
+    return <CustomLoader />;
+  }
+  if (item!.type === "story") {
+    return <Story item={item} />;
+  }
+  if (item!.type === "job") {
+    return <Job item={item} />;
+  }
+  return <div>Rendering of {item!.type} is not currently supported :(</div>;
+};
+
+export default Item;

src/components/Job.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Card, CardBody, CardTitle } from "reactstrap";
+import { handleClick } from "../utils/helper";
+
+const Job = ({ item }: any) => {
+  return (
+    <Card onClick={() => (item.url ? window.open(item.url, "_blank") : null)}>
+      <CardBody>
+        <CardTitle>{item.title}</CardTitle>
+        <p className="card-text">
+          {item.score} points by{" "}
+          <u onClick={event => handleClick(event, "user", item.by)}>
+            {item.by}
+          </u>{" "}
+          |{" "}
+          <u onClick={event => handleClick(event, "item", item.id)}>
+            view full description
+          </u>
+        </p>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default Job;

src/components/Stories.tsx

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react";
+import Item from "./Item";
+import { getList } from "../utils/Api";
+import InfiniteScroll from "react-infinite-scroller";
+import paginate from "paginate-array";
+
+const Stories = (props: any) => {
+  const [stories, setStories] = useState(null);
+  const [renderlist, setrenderlist] = useState(Array());
+  const [hasMoreItems, sethasMoreItems] = useState(true);
+  const [initialLoad, setinitialLoad] = useState(true);
+
+  useEffect(() => {
+    const fetchAndSetStories = async () => {
+      const result = await getList(props.storytype);
+      if (result.resolved) {
+        setStories(result.data);
+      }
+    };
+    fetchAndSetStories();
+  }, [props.storytype]);
+
+  const loadItems = (pageNumber: any) => {
+    const pageItems = paginate(stories, pageNumber, 10); //10 items per page
+    setrenderlist([...renderlist, ...pageItems.data]);
+    setinitialLoad(false);
+    sethasMoreItems(pageItems.currentPage !== pageItems.totalPages);
+  };
+
+  if (!stories) {
+    return null;
+  }
+  const loader = <div className="loader">Loading ...</div>;
+
+  return (
+    <InfiniteScroll
+      pageStart={0}
+      loadMore={loadItems}
+      hasMore={hasMoreItems}
+      initialLoad={initialLoad}
+      loader={loader}
+    >
+      <div className="stories">
+        {renderlist.map(id => (
+          <Item key={id} id={id} />
+        ))}
+      </div>
+    </InfiniteScroll>
+  );
+};
+
+export default Stories;

src/components/Story.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Card, CardBody, CardTitle } from "reactstrap";
+import { handleClick } from "../utils/helper";
+
+const Story = ({ item }: any) => {
+  return (
+    <Card onClick={() => (item.url ? window.open(item.url, "_blank") : null)}>
+      <CardBody>
+        <CardTitle>{item.title}</CardTitle>
+        <p className="card-text">
+          {item.score} points by{" "}
+          <u onClick={event => handleClick(event, "user", item.by)}>
+            {item.by}
+          </u>{" "}
+          |{" "}
+          <u onClick={event => handleClick(event, "item", item.id)}>
+            {item.kids ? item.kids.length : 0} comments
+          </u>
+        </p>
+      </CardBody>
+    </Card>
+  );
+};
+
+export default Story;

src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/utils/Api.ts

@@ -0,0 +1,20 @@
+import axios from "axios";
+import { API_URL } from "./constants";
+
+export async function getItem(id: any) {
+  try {
+    const itemResonse = await axios.get(`${API_URL}/item/${id}.json`);
+    return { resolved: true, data: itemResonse.data };
+  } catch (error) {
+    return { resolved: false, data: error };
+  }
+}
+
+export async function getList(name: any) {
+  try {
+    const itemResonse = await axios.get(`${API_URL}/${name}.json`);
+    return { resolved: true, data: itemResonse.data };
+  } catch (error) {
+    return { resolved: false, data: error };
+  }
+}

src/utils/helper.js → src/utils/helper.tsx

@@ -1,4 +1,4 @@
-export const handleClick = (event, type, id) => {
+export const handleClick = (event: any, type: any, id: any) => {
   window.open(`https://news.ycombinator.com/${type}?id=${id}`, "_blank")
   event.preventDefault()
   event.stopPropagation()

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "outDir": "./built",
+    "allowJs": true,
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "noImplicitAny": false
+  },
+  "include": [
+    "./src/**/*"
+  ]
+}