github.com/christoph-karpowicz/db_mediator@v0.0.0-20210207102849-61a28a1071d8/web/src/componenets/nav/Navigation.tsx (about)

     1  import React, { useState } from 'react';
     2  import '../../css/Navigation.css';
     3  import { Link } from "react-router-dom";
     4  import WS from '../../ws/ws';
     5  import WSRequest from '../../ws/request';
     6  import { ReactComponent as DashboardIcon } from '../../assets/dashboard.svg';
     7  import { ReactComponent as WatchersIcon } from '../../assets/watchers.svg';
     8  
     9  function Navigation(props: any) {
    10    function onSynchsClick(): void {
    11      const req = new WSRequest("getSynchsList", {});
    12      
    13      WS.getSocket().then((ws) => {
    14        ws.emitAndAwaitResponse(req)
    15          .then((res: any) => {
    16            try {
    17              const synchs = JSON.parse(res.Data.Payload);
    18              props.setSynchs(synchs);
    19              props.toggleSubNavigationActive();
    20            } catch(e) {
    21              console.error(e);
    22            }
    23            console.log(res);
    24          })
    25          .catch((err: any) => {
    26            console.error(err);
    27          });
    28      });
    29    }
    30    
    31    return (
    32      <nav className={props.isSubNavigationActive ? "" : "bordered"}>
    33          <ul>
    34              <li>
    35                  <Link to="/"><DashboardIcon /></Link>
    36              </li>
    37              <li>
    38                  <WatchersIcon onClick={onSynchsClick} />
    39              </li>
    40          </ul>
    41      </nav>
    42    );
    43  }
    44  
    45  export default Navigation;