Fix deepsource errors

.deepsource.toml

@@ -2,4 +2,7 @@ version = 1
 
 [[analyzers]]
 name = "javascript"
-enabled = true
+enabled = true
+
+  [analyzers.meta]
+  plugins = ["react"]

src/components/Dropdown/index.js

@@ -1,6 +1,7 @@
+import Button from "../DropdownButton";
 import { Listbox } from "@headlessui/react";
+import React from "react";
 import { SelectorIcon } from "@heroicons/react/solid";
-import Button from "../DropdownButton";
 
 const Dropdown = ({ name, disabled, value, setValue }) => {
   const data = [

src/components/DropdownButton/index.js

@@ -1,5 +1,6 @@
-import classNames from "classnames";
 import { CheckIcon } from "@heroicons/react/solid";
+import React from "react";
+import classNames from "classnames";
 
 const Button = ({ text, active, selected }) => {
   return (

src/components/Layout/Dialogue.js

@@ -1,8 +1,9 @@
-import { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import SlackIcon from "../../assets/images/slack_icon.png";
-import GitHubIcon from "../../assets/images/github_icon.png";
+
 import DocumentationIcon from "../../assets/images/documentation_icon.png";
+import { Fragment } from "react";
+import GitHubIcon from "../../assets/images/github_icon.png";
+import SlackIcon from "../../assets/images/slack_icon.png";
 import { XIcon } from "@heroicons/react/outline";
 
 const HelpDialog = ({ isOpen, setIsOpen }) => {

src/components/Layout/Navbar.js

@@ -1,11 +1,12 @@
-import { Fragment, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { LogoutIcon, MenuAlt2Icon } from "@heroicons/react/outline";
+
 import Dialogue from "./Dialogue";
+import Logo from "../../assets/images/Group 295.svg";
 import { QuestionMarkCircleIcon } from "@heroicons/react/outline";
-import { LogoutIcon, MenuAlt2Icon } from "@heroicons/react/outline";
 import StreamIcon from "../../assets/images/Icon awesome-stream (1).svg";
 import UserIcon from "../../assets/images/Icon feather-user.svg";
-import Logo from "../../assets/images/Group 295.svg";
+import { useNavigate } from "react-router-dom";
+import { useState } from "react";
 
 const Navbar = ({setSidebarOpen}) => {
   const navigate = useNavigate();

src/components/Layout/Sidebar.js

@@ -1,9 +1,10 @@
-import { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
-import { Disclosure } from "@headlessui/react";
+
 import { ChevronDownIcon } from "@heroicons/react/outline";
+import { Disclosure } from "@headlessui/react";
+import { Fragment } from "react";
 import Logo from "../../assets/images/Group 295.svg";
+import { XIcon } from "@heroicons/react/outline";
 
 const Sidebar = ({ setSidebarOpen, sidebarOpen, labels }) => {
   function classNames(...classes) {

src/components/Layout/index.js

@@ -1,6 +1,6 @@
-import { useState } from "react";
 import Navbar from "./Navbar";
 import Sidebar from "./Sidebar";
+import { useState } from "react";
 
 export default function Layout({ children, labels }) {
   const [sidebarOpen, setSidebarOpen] = useState(false);

src/components/MultiSelectDropdown/index.js

@@ -1,6 +1,6 @@
-import { Listbox } from "@headlessui/react";
-import { ChevronDownIcon } from "@heroicons/react/outline";
 import Button from "../DropdownButton";
+import { ChevronDownIcon } from "@heroicons/react/outline";
+import { Listbox } from "@headlessui/react";
 import Pill from "../Pill";
 
 const MultipleSelectDropdown = ({

src/components/Pill/index.js

@@ -1,6 +1,7 @@
+import React from "react";
 import { XCircleIcon } from "@heroicons/react/solid";
 
-const Pill = ({ text, closable, onClose }) => {
+const Pill = ({ text, onClose }) => {
   return (
     <span className="relative block w-min py-1 pl-2 pr-6 truncate mr-1 bg-secondary-200 text-xs text-gray-800 font-semibold leading-3 rounded-md">
       {text}

src/components/SearchableDropdown/index.js

@@ -1,12 +1,11 @@
-import { memo, useState } from "react";
+import React, { memo, useState } from "react";
+
 import { Combobox } from "@headlessui/react";
-import { SelectorIcon } from "@heroicons/react/solid";
 import DropdownButton from "../DropdownButton";
+import { SelectorIcon } from "@heroicons/react/solid";
 
 const SearchableDropdown = ({ data, setValue, value, label }) => {
   const [query, setQuery] = useState("");
-  // TODO: Throw error on no name
-  // TODO: Remove value from prop
 
   const filteredData =
     query === ""
@@ -26,9 +25,9 @@ const SearchableDropdown = ({ data, setValue, value, label }) => {
             name="stream"
             className={"input"}
             onChange={(event) => setQuery(event.target.value)}
-            displayValue={(value) =>
-              data.length && value ? value.name : "No data found"
-            }
+            displayValue={(val) => {
+              return data.length && val ? val.name : "No data found";
+            }}
           />
           <Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
             <SelectorIcon
@@ -41,12 +40,12 @@ const SearchableDropdown = ({ data, setValue, value, label }) => {
               "absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-gray-50 py-1 border border-1 border-gray-500"
             }
           >
-            {!!filteredData ? (
-              filteredData.map((data) => (
-                <Combobox.Option key={data.name} value={data}>
+            {filteredData?.map ? (
+              filteredData.map((obj) => (
+                <Combobox.Option key={obj.name} value={obj}>
                   {({ active, selected }) => (
                     <DropdownButton
-                      text={data.name}
+                      text={obj.name}
                       active={active}
                       selected={selected}
                     />

src/components/SideDialog/index.js

@@ -1,5 +1,6 @@
-import { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+
+import { Fragment } from "react";
 import { XIcon } from "@heroicons/react/outline";
 import moment from "moment";
 

src/page/Dashboard/DatePicker.js

@@ -1,16 +1,20 @@
-import moment from "moment";
-import React, { useState, forwardRef } from "react";
-import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "./DatePicker.css";
+
+import React, { forwardRef, useState } from "react";
+
 import { CalendarIcon } from "@heroicons/react/outline";
+import DatePicker from "react-datepicker";
+import moment from "moment";
+
 const FORMAT = "DD-MM-YYYY HH:mm";
 
 const Calendar = ({ setStartDate, setEndDate, start, end }) => {
   const [dateRange, setDateRange] = useState([
-    moment(start).toDate(),
-    moment(end).toDate(),
+    moment(start, FORMAT).toDate(),
+    moment(end, FORMAT).toDate(),
   ]);
+
   const [startDate, endDate] = dateRange;
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <button onClick={onClick} ref={ref}>
@@ -20,7 +24,6 @@ const Calendar = ({ setStartDate, setEndDate, start, end }) => {
       />
     </button>
   ));
-  console.log({startDate,endDate})
   return (
     <DatePicker
       selectsRange={true}
@@ -34,7 +37,7 @@ const Calendar = ({ setStartDate, setEndDate, start, end }) => {
         setEndDate(
           moment(update[update[1] ? 1 : 0])
             .endOf("day")
-            .format(FORMAT),
+            .format(FORMAT)
         );
       }}
       dayClassName={(date) => {

src/page/Dashboard/DateRangeSeletor.js

@@ -1,7 +1,8 @@
-import moment from "moment";
-import { useState, useEffect, useRef } from "react";
-import DatePicker from "./DatePicker";
+import { useEffect, useRef, useState } from "react";
+
 import { ClockIcon } from "@heroicons/react/outline";
+import DatePicker from "./DatePicker";
+import moment from "moment";
 
 const FORMAT = "DD-MM-YYYY HH:mm";
 
@@ -31,10 +32,10 @@ const DateRangeSelector = ({
   const [isOpen, setIsOpen] = useState(false);
 
   const [fromInput, setFromInput] = useState(
-    moment().subtract(10, "minutes").format(FORMAT)
+    moment(fromDate).format(FORMAT)
   );
 
-  const [toInput, setToInput] = useState(moment().format(FORMAT));
+  const [toInput, setToInput] = useState(moment(toDate).format(FORMAT));
 
   const toDateRef = useRef(null);
 

src/page/Dashboard/DateSearchField.js

@@ -1,5 +1,6 @@
-import { Combobox } from "@headlessui/react";
 import Calendar from "./DateRangeSeletor";
+import { Combobox } from "@headlessui/react";
+import React from "react";
 import { SearchIcon } from "@heroicons/react/solid";
 
 const DateSearchField = ({

src/page/Dashboard/DateTimeRangePicker.js

@@ -1,8 +1,9 @@
-import React from "react";
+import "./DateTimeRangePicker.css";
+
+import { CalendarIcon } from "@heroicons/react/outline";
 import DateTimeRangeContainer from "react-advanced-datetimerange-picker";
+import React from "react";
 import moment from "moment";
-import { CalendarIcon } from "@heroicons/react/outline";
-import "./DateTimeRangePicker.css";
 
 let local = {
   format: "DD-MM-YYYY HH:mm",

src/page/Dashboard/RefreshInterval.js

@@ -1,4 +1,5 @@
 import Dropdown from "../../components/Dropdown";
+import React from "react";
 
 const RefreshInterval = ({ range, interval, setInterval }) => {
   const refreshIntervalArray = [

src/page/Dashboard/Table.js

@@ -1,4 +1,5 @@
 import BeatLoader from "react-spinners/BeatLoader";
+import React from "react";
 
 function hasSubArray(master, sub) {
   master.sort();
@@ -73,7 +74,6 @@ const Table = ({
                           .includes(searchQuery.toLowerCase())) && (
                         <tr
                           onClick={() => {
-                            console.log(JSON.stringify(data));
                             setOpen(true);
                             setClickedRow(data);
                           }}

src/page/Dashboard/TagFilters.js

@@ -1,4 +1,5 @@
 import MultiSelectDropdown from "../../components/MultiSelectDropdown";
+import React from "react";
 
 const TagFilters = ({
   selectedTags,

src/page/Dashboard/index.js

@@ -1,19 +1,21 @@
-import moment from "moment";
-import { useState, useEffect } from "react";
-import Layout from "../../components/Layout";
-import SideDialog from "../../components/SideDialog";
-import Table from "./Table";
+import "./index.css";
+
+import React, { useEffect, useState } from "react";
 import {
   useGetLogStream,
   useGetLogStreamSchema,
   useQueryLogs,
 } from "../../utils/api";
-import "./index.css";
+
+import DateSearchField from "./DateSearchField";
 import Field from "./FieldBox";
-import TagFilters from "./TagFilters";
+import Layout from "../../components/Layout";
 import RefreshInterval from "./RefreshInterval";
-import DateSearchField from "./DateSearchField";
 import SearchableDropdown from "../../components/SearchableDropdown";
+import SideDialog from "../../components/SideDialog";
+import Table from "./Table";
+import TagFilters from "./TagFilters";
+import moment from "moment";
 
 const Dashboard = () => {
   const getCurrentTime = () => {
@@ -69,8 +71,6 @@ const Dashboard = () => {
   const [selectedTags, setSelectedTags] = useState([]);
   const [startTime, setStartTime] = useState(
     getCurrentTime().subtract(10, "minutes")
-    // .utcOffset("+00:00")
-    // .format("YYYY-MM-DDThh:mm:ss),
   );
 
   const addAvailableTags = (label) => {
@@ -188,7 +188,9 @@ const Dashboard = () => {
             <div className="flex-1 px-4 flex justify-center">
               <SearchableDropdown
                 label={"Streams"}
-                data={!!logStream?.data?.data ? logStream?.data?.data : []}
+                data={
+                  logStream?.data?.data != null ? logStream?.data?.data : []
+                }
                 setValue={setSelectedLogStream}
                 value={selectedLogStream}
               />

src/utils/api/index.js

@@ -4,15 +4,15 @@ export const getServerURL = () => {
   return "/";
 };
 
-export const get = async (url) => {
+export const get = (url) => {
   return axios.get(getServerURL() + url, {
     headers: {
       Authorization: "Basic " + localStorage.getItem("auth"),
     },
   });
 };
 
-export const post = async (url, data, signal) => {
+export const post = (url, data, signal) => {
   return axios.post(
     getServerURL() + url,
     data,
@@ -25,11 +25,11 @@ export const post = async (url, data, signal) => {
   );
 };
 
-export const getLogStream = async () => {
+export const getLogStream = () => {
   return get("api/v1/logstream");
 };
 
-export const queryLogs = async (streamName, startTime, endTime) => {
+export const queryLogs = (streamName, startTime, endTime) => {
   return post("api/v1/query", {
     query: `select * from ${streamName}`,
     startTime: startTime,

src/utils/api/logstreams.js

@@ -5,15 +5,15 @@ import {
   LOG_STREAMS_URL,
 } from "./constants";
 
-const getLogStream = async () => {
+const getLogStream = () => {
   return get(LOG_STREAMS_URL);
 };
 
 export const useGetLogStream = (option = {}) =>
   useQuery([LOG_STREAMS], getLogStream, {...option});
 
 
-const getLogStreamSchema = async (streamName) => {
+const getLogStreamSchema = (streamName) => {
   return get(`${LOG_STREAMS_URL}/${streamName}/schema`);
 };
 

src/utils/api/query.js

@@ -2,7 +2,7 @@ import { useInfiniteQuery } from "@tanstack/react-query";
 import { post } from "./index";
 import { QUERY_URL, QUERY } from "./constants";
 
-const queryLogs = async (
+const queryLogs = (
   streamName,
   startTime,
   endTime,
@@ -21,7 +21,7 @@ const queryLogs = async (
     }
   }
 
-  return await post(
+  return post(
     QUERY_URL,
     {
       query: `select * from ${streamName} ${
@@ -46,7 +46,7 @@ export const useQueryLogs = (
     [QUERY, streamName, logSchema, startTime, endTime],
     async ({ signal, pageParam = 1 }) => {
       await fn();
-      return await queryLogs(
+      return queryLogs(
         streamName,
         startTime,
         endTime,