[ADD] getDuration function in contentTabItem components

Create function to generate a video's duration

src/components/ContentTabItem/ContentTabChild.js

@@ -22,17 +22,38 @@ const ContentTabChild = ({
   videoName,
   duration,
   sectionName
-}) => (
-  <Container
-    onClick={() => changeVideo(`${sectionName} | ${videoName}`, videoFile)}
-  >
-    <Typography style={{ paddingLeft: "0.5rem" }}>
-      {number}. {videoName} |{" "}
-      <span style={{ fontSize: "0.75em" }}>{duration} seconds</span>
-    </Typography>
-  </Container>
-);
+}) => {
+  const getDuration = duration => {
+    if (!duration) return "";
 
+    let result = "";
+
+    // set detik
+    let temp = duration;
+    if (temp % 60) result = `${temp % 60} detik`;
+    if (temp < 60) return result;
+
+    // set menit
+    temp = Math.floor(temp / 60);
+    if (temp % 60) result = `${temp % 60} menit ${result}`;
+    if (temp < 60) return result;
+
+    // set jam
+    temp = Math.floor(temp / 60);
+    result = `${temp % 60} jam ${result}`;
+    return result;
+  };
+  return (
+    <Container
+      onClick={() => changeVideo(`${sectionName} | ${videoName}`, videoFile)}
+    >
+      <Typography style={{ paddingLeft: "0.5rem" }}>
+        {number}. {videoName} |{" "}
+        <span style={{ fontSize: "0.75em" }}>{getDuration(duration)}</span>
+      </Typography>
+    </Container>
+  );
+};
 ContentTabChild.propTypes = {
   name: PropTypes.string
 };