fix(types): resolve TS errors in Sidebar, Repositories and UserList

Author: fabiovincenzi

src/types/images.d.ts

@@ -0,0 +1,4 @@
+declare module '*.png' {
+  const url: string;
+  export default url;
+}

src/ui/components/Navbars/DashboardNavbarLinks.tsx

@@ -52,7 +52,7 @@ const DashboardNavbarLinks: React.FC = () => {
   const logout = async () => {
     try {
       const response = await axios.post(
-        `${import.meta.env.VITE_API_URI || 'http://localhost:3000'}/api/auth/logout`,
+        `${process.env.VITE_API_URI || 'http://localhost:3000'}/api/auth/logout`,
         {},
         {
           withCredentials: true,

src/ui/components/Sidebar/Sidebar.tsx

@@ -23,14 +23,18 @@ interface SidebarProps {
   open: boolean;
 }
 
-const Sidebar: React.FC<SidebarProps> = (props) => {
+const Sidebar: React.FC<SidebarProps> = ({
+  color,
+  logo,
+  routes,
+  background,
+  rtlActive,
+  open,
+  handleDrawerToggle,
+}) => {
   const classes = useStyles();
 
-  const activeRoute = (routeName: string): boolean => {
-    return window.location.href.indexOf(routeName) > -1;
-  };
-
-  const { color, logo, routes, background, rtlActive, open, handleDrawerToggle } = props;
+  const activeRoute = (routeName: string) => window.location.href.includes(routeName);
 
   const links = (
     <List className={classes.list}>
@@ -39,14 +43,13 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
         const listItemClasses = classNames({
           [` ${classes[color]}`]: activeRoute(prop.layout + prop.path),
         });
-
         const whiteFontClasses = classNames({
           [` ${classes.whiteFont}`]: activeRoute(prop.layout + prop.path),
         });
 
-        if (!prop.visible) {
-          return <div key={key}></div>;
-        }
+        if (!prop.visible) return <div key={key} />;
+
+        const IconComponent = prop.icon as React.ElementType;
 
         return (
           <NavLink
@@ -65,7 +68,7 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
                   {prop.icon}
                 </Icon>
               ) : (
-                <prop.icon
+                <IconComponent
                   className={classNames(classes.itemIcon, whiteFontClasses, {
                     [classes.itemIconRTL]: rtlActive,
                   })}
@@ -90,10 +93,10 @@ const Sidebar: React.FC<SidebarProps> = (props) => {
       <a style={{ textDecoration: 'none' }} href='/dashboard/repo'>
         <div style={{ textAlign: 'center' }}>
           <img
-            style={{ verticalAlign: 'middle', filter: 'brightness(0) invert(1)' }}
-            width={'105px'}
             src={logo}
             alt='logo'
+            width={105}
+            style={{ verticalAlign: 'middle', filter: 'brightness(0) invert(1)' }}
           />
         </div>
       </a>

src/ui/views/Login/Login.tsx

@@ -21,7 +21,7 @@ interface LoginResponse {
   password: string;
 }
 
-const loginUrl = `${import.meta.env.VITE_API_URI}/api/auth/login`;
+const loginUrl = `${process.env.VITE_API_URI}/api/auth/login`;
 
 const Login: React.FC = () => {
   const navigate = useNavigate();
@@ -41,7 +41,7 @@ const Login: React.FC = () => {
   }
 
   function handleOIDCLogin(): void {
-    window.location.href = `${import.meta.env.VITE_API_URI}/api/auth/oidc`;
+    window.location.href = `${process.env.VITE_API_URI}/api/auth/oidc`;
   }
 
   function handleSubmit(event: FormEvent): void {

src/ui/views/PushDetails/components/AttestationView.tsx

@@ -11,6 +11,7 @@ import Checkbox from '@material-ui/core/Checkbox';
 import { withStyles } from '@material-ui/core/styles';
 import { green } from '@material-ui/core/colors';
 import { getURLShortener } from '../../../services/config';
+import { AttestationViewProps } from '../attestation.types';
 
 const StyledFormControlLabel = withStyles({
   root: {

src/ui/views/RepoList/Components/RepoOverview.tsx

@@ -32,17 +32,17 @@ const Repositories: React.FC<RepositoriesProps> = (props) => {
 
   useEffect(() => {
     getGitHubRepository();
-  }, [props.data.project, props.data.name]);
+  }, [props.data?.project, props.data?.name]);
 
   const getGitHubRepository = async () => {
     await axios
-      .get(`https://api.github.com/repos/${props.data.project}/${props.data.name}`)
+      .get(`https://api.github.com/repos/${props.data?.project}/${props.data?.name}`)
       .then((res) => {
         setGitHub(res.data);
       })
       .catch((error) => {
         setErrorMessage(
-          `Error fetching GitHub repository ${props.data.project}/${props.data.name}: ${error}`,
+          `Error fetching GitHub repository ${props.data?.project}/${props.data?.name}: ${error}`,
         );
         setSnackbarOpen(true);
       });
@@ -55,9 +55,9 @@ const Repositories: React.FC<RepositoriesProps> = (props) => {
     <TableRow>
       <TableCell>
         <div style={{ padding: '15px' }}>
-          <a href={`/dashboard/repo/${props.data.name}`}>
+          <a href={`/dashboard/repo/${props.data?.name}`}>
             <span style={{ fontSize: '17px' }}>
-              {props.data.project}/{props.data.name}
+              {props.data?.project}/{props.data?.name}
             </span>
           </a>
           {github.parent && (
@@ -105,12 +105,12 @@ const Repositories: React.FC<RepositoriesProps> = (props) => {
             )}
             <GridItem>
               <PeopleIcon size='small' />{' '}
-              <span style={{ marginLeft: '5px' }}>{props.data.users?.canPush?.length || 0}</span>
+              <span style={{ marginLeft: '5px' }}>{props.data?.users?.canPush?.length || 0}</span>
             </GridItem>
             <GridItem>
               <CodeReviewIcon size='small' />{' '}
               <span style={{ marginLeft: '5px' }}>
-                {props.data.users?.canAuthorise?.length || 0}
+                {props.data?.users?.canAuthorise?.length || 0}
               </span>
             </GridItem>
             {(github.created_at || github.updated_at || github.pushed_at) && (

src/ui/views/RepoList/repositories.types.ts

@@ -1,5 +1,5 @@
 export interface RepositoriesProps {
-  data: {
+  data?: {
     project: string;
     name: string;
     proxyURL: string;

src/ui/views/UserList/Components/UserList.tsx

@@ -16,15 +16,7 @@ import { getUsers } from '../../../services/user';
 import Pagination from '../../../components/Pagination/Pagination';
 import { CloseRounded, Check, KeyboardArrowRight } from '@material-ui/icons';
 import Search from '../../../components/Search/Search';
-
-interface User {
-  username: string;
-  displayName?: string;
-  title?: string;
-  email?: string;
-  gitAccount?: string;
-  admin?: boolean;
-}
+import { UserData } from '../../../../types/models';
 
 interface UserListProps {
   [key: string]: any;
@@ -34,7 +26,7 @@ const useStyles = makeStyles(styles as any);
 
 const UserList: React.FC<UserListProps> = (props) => {
   const classes = useStyles();
-  const [data, setData] = useState<User[]>([]);
+  const [data, setData] = useState<UserData[]>([]);
   const [, setAuth] = useState<boolean>(true);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [isError, setIsError] = useState<boolean>(false);