refactor: port to typescript

1 files changed, 169 insertions, 0 deletions

diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx
new file mode 100644
index 0000000..b8f0087
--- /dev/null
+++ b/frontend/src/components/Summary.tsx
@@ -0,0 +1,169 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+
+import { MapSummary } from '../types/Map';
+import "../css/Maps.css"
+
+interface SummaryProps {
+  selectedRun: number
+  setSelectedRun: (x: number) => void;
+  data: MapSummary;
+}
+
+const Summary: React.FC<SummaryProps> = ({ selectedRun, setSelectedRun, data }) => {
+
+  const [selectedCategory, setSelectedCategory] = React.useState<number>(1);
+  const [historySelected, setHistorySelected] = React.useState<boolean>(false);
+
+  function _select_run(x: number, y: number) {
+    let r = document.querySelectorAll("button.record");
+    r.forEach(e => (e as HTMLElement).style.backgroundColor = "#2b2e46");
+    (r[x] as HTMLElement).style.backgroundColor = "#161723"
+
+
+    if (data && data.summary.routes.length !== 0 && data.summary.routes.length !== 0) {
+      if (y === 2) { x += data.summary.routes.filter(e => e.category.id < 2).length }
+      if (y === 3) { x += data.summary.routes.filter(e => e.category.id < 3).length }
+      if (y === 4) { x += data.summary.routes.filter(e => e.category.id < 4).length }
+      setSelectedRun(x);
+    }
+  }
+
+  function _get_youtube_id(url: string): string {
+    const urlArray = url.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
+    return (urlArray[2] !== undefined) ? urlArray[2].split(/[^0-9a-z_]/i)[0] : urlArray[0];
+  };
+
+  function _category_change() {
+    const btn = document.querySelectorAll("#section3 #category span button");
+    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    (btn[selectedCategory - 1] as HTMLElement).style.backgroundColor = "#202232";
+  };
+
+  function _history_change() {
+    const btn = document.querySelectorAll("#section3 #history span button");
+    btn.forEach((e) => { (e as HTMLElement).style.backgroundColor = "#2b2e46" });
+    (historySelected ? btn[1] as HTMLElement : btn[0] as HTMLElement).style.backgroundColor = "#202232";
+  };
+
+  React.useEffect(() => {
+   _history_change();
+  }, [historySelected]);
+
+  React.useEffect(() => {
+    _category_change();
+  }, [selectedCategory]);
+
+  React.useEffect(() => {
+    _select_run(0, selectedCategory);
+  }, []);
+
+  return (
+    <>
+      <section id='section3' className='summary1'>
+        <div id='category'
+          style={data.map.image === "" ? { backgroundColor: "#202232" } : {}}>
+          <img src={data.map.image} alt="" id='category-image'></img>
+          <p><span className='portal-count'>{data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].history.score_count}</span>
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].history.score_count === 1 ? ` portal` : ` portals`}</p>
+          <span>
+            <button onClick={() => setSelectedCategory(1)}>CM</button>
+            <button onClick={() => setSelectedCategory(2)}>NoSLA</button>
+            {data.map.is_coop ? <button onClick={() => setSelectedCategory(3)}>SLA</button>
+              : <button onClick={() => setSelectedCategory(3)}>Inbounds SLA</button>}
+            <button onClick={() => setSelectedCategory(4)}>Any%</button>
+          </span>
+
+        </div>
+
+        <div id='history'>
+
+          <div style={{ display: historySelected ? "none" : "block" }}>
+            {data.summary.routes.filter(e => e.category.id === selectedCategory).length === 0 ? <h5>There are no records for this map.</h5> :
+              <>
+                <div className='record-top'>
+                  <span>Date</span>
+                  <span>Record</span>
+                  <span>First completion</span>
+                </div>
+                <hr />
+                <div id='records'>
+
+                  {data.summary.routes
+                    .sort((a, b) => a.history.score_count - b.history.score_count)
+                    .filter(e => e.category.id === selectedCategory)
+                    .map((r, index) => (
+                      <button className='record' key={index} onClick={() => {
+                        _select_run(index, r.category.id);
+                      }}>
+                        <span>{new Date(r.history.date).toLocaleDateString(
+                          "en-US", { month: 'long', day: 'numeric', year: 'numeric' }
+                        )}</span>
+                        <span>{r.history.score_count}</span>
+                        <span>{r.history.runner_name}</span>
+                      </button>
+                    ))}
+                </div>
+              </>
+            }
+          </div>
+
+          <div style={{ display: historySelected ? "block" : "none" }}>
+            {data.summary.routes.filter(e => e.category.id === selectedCategory).length === 0 ? <h5>There are no records for this map.</h5> :
+              <div id='graph'>
+                {/* <div>{graph(1)}</div>
+                <div>{graph(2)}</div>
+                <div>{graph(3)}</div> */}
+              </div>
+            }
+          </div>
+          <span>
+            <button onClick={() => setHistorySelected(false)}>List</button>
+            <button onClick={() => setHistorySelected(true)}>Graph</button>
+          </span>
+        </div>
+
+
+      </section>
+      <section id='section4' className='summary1'>
+        <div id='difficulty'>
+          <span>Difficulty</span>
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 0 ? (<span>N/A</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 1 ? (<span style={{ color: "lime" }}>Very easy</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 2 ? (<span style={{ color: "green" }}>Easy</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 3 ? (<span style={{ color: "yellow" }}>Medium</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 4 ? (<span style={{ color: "orange" }}>Hard</span>) : null}
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 5 ? (<span style={{ color: "red" }}>Very hard</span>) : null}
+          <div>
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 1 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 3 ? (<div className='difficulty-rating' style={{ backgroundColor: "yellow" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "orange" }}></div>) : (<div className='difficulty-rating'></div>)}
+            {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].rating === 5 ? (<div className='difficulty-rating' style={{ backgroundColor: "red" }}></div>) : (<div className='difficulty-rating'></div>)}
+          </div>
+        </div>
+        <div id='count'>
+          <span>Completion count</span>
+          <div>{selectedCategory === 1 ? data.summary.routes[selectedRun].completion_count : "N/A"}</div>
+        </div>
+      </section>
+
+      <section id='section5' className='summary1'>
+        <div id='description'>
+          {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].showcase !== "" ?
+            <iframe title='Showcase video' src={"https://www.youtube.com/embed/" + _get_youtube_id(data.summary.routes[selectedRun].showcase)}> </iframe>
+            : ""}
+          <h3>Route description</h3>
+          <span id='description-text'>
+            <ReactMarkdown>
+              {data.summary.routes.sort((a, b) => a.category.id - b.category.id)[selectedRun].description}
+            </ReactMarkdown>
+          </span>
+        </div>
+      </section>
+
+    </>
+  );
+};
+
+export default Summary;