organizing-imports #65

.eslintrc.json

@@ -17,25 +17,17 @@
 		"plugin:import/typescript"
 		//"airbnb-base"
 	],
-	"settings": {
-		"import/resolver": {
-		  "alias": {
-			"map": [
-			  ["@", "./src"]
-			]
-		  }
-		}
-	  },
+
 
 	"rules": {
 		// sort imports
 		"import/order": "error",
+		"import/no-named-as-default": 0,
 
 		// no let exports
 		"import/no-mutable-exports": "error",
 
 		"import/no-cycle": "error",
-		"import/no-default-export": "error",
 
 		// allow {} even though it's unsafe but comes handy
 		"@typescript-eslint/ban-types": [
@@ -47,15 +39,6 @@
 			}
 		],
 
-		"@typescript-eslint/consistent-type-imports": [
-			"error",
-			{
-				"prefer": "type-imports",
-				"fixStyle": "inline-type-imports",
-				"disallowTypeAnnotations": false
-			}
-		],
-
 		"import/no-duplicates": ["error", { "prefer-inline": true }],
 
 		// false negatives

src/App.test.tsx

@@ -1,8 +1,8 @@
-import { describe, it, expect, test, vi } from 'vitest'; // vi have a mock feature
-import { render } from '@testing-library/react';
-import App from './App';
 import React from 'react';
+import { describe, it, expect, test } from 'vitest'; // vi have a mock feature
+import { render } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import App from './App';
 
 test('demo', () => {
   expect(true).toBe(true);

src/Head.tsx

@@ -1,7 +1,6 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { Helmet } from 'react-helmet';
 import ZetonFaviconBlue from './images/icons/zeton-favicon-blue.png';
-import HelmetDispatcher from 'react-helmet-async/lib/Dispatcher';
 
 const Head = (): JSX.Element => (
   <Helmet>

src/api/useAwards.ts

@@ -1,5 +1,5 @@
-import { ENDPOINT } from '../const/endpoints.const';
 import useSWR from 'swr';
+import { ENDPOINT } from '../const/endpoints.const';
 
 type AwardObject = {
   id: number;
@@ -22,7 +22,8 @@ const fetcher = (...args: any[]) =>
   fetch(...(args as [any])).then((res) => res.json());
 
 const useAwards = (id: any): UseAwardsObjectDataResponse => {
-  const URL = process.env.VITE_REACT_APP_API_URL + ENDPOINT.prizesId.replace("{:id}", id)
+  const URL =
+    process.env.VITE_REACT_APP_API_URL + ENDPOINT.prizesId.replace('{:id}', id);
   const { data, error } = useSWR<GetPrizesByFetcher>(URL, fetcher);
 
   return {

src/api/useStudentById.ts

@@ -1,7 +1,7 @@
-import useSWR from "swr";
-import { ENDPOINT } from "../const/endpoints.const";
-import type {AxiosResponse} from "axios";
-import axiosInstance from "./axios.ts";
+import useSWR from 'swr';
+import type { AxiosResponse } from 'axios';
+import { ENDPOINT } from '../const/endpoints.const';
+import axiosInstance from './axios.ts';
 
 type StudentByIdObject = {
   pk: number;
@@ -20,15 +20,13 @@ type GetStudentsByFetcher = {
 };
 
 // adding SWR
-const fetcher = async (
-  url: string,
-): Promise<AxiosResponse<any>> =>
+const fetcher = async (url: string): Promise<AxiosResponse<any>> =>
   axiosInstance().get(url);
-  
+
 const useStudentById = (id: any): UseStudentByIdObjectDataResponse => {
   const { data, error } = useSWR<GetStudentsByFetcher>(
-    ENDPOINT.studentId.replace("{:id}", id),
-    fetcher,
+    ENDPOINT.studentId.replace('{:id}', id),
+    fetcher
   );
 
   return {

src/api/useStudents.ts

@@ -1,7 +1,7 @@
-import { ENDPOINT } from "../const/endpoints.const";
-import useSWR from "swr";
-import type {AxiosResponse} from "axios";
-import axiosInstance from "./axios.ts";
+import useSWR from 'swr';
+import type { AxiosResponse } from 'axios';
+import { ENDPOINT } from '../const/endpoints.const';
+import axiosInstance from './axios.ts';
 
 type StudentObject = {
   pk: number;
@@ -21,12 +21,13 @@ type GetStudentsByFetcher = {
 
 // adding SWR
 // const fetcher = (...args: any) => fetch(...args as [any]).then((res) => res.json());
-const fetcher = async (
-  url: string,
-): Promise<AxiosResponse<any>> =>
+const fetcher = async (url: string): Promise<AxiosResponse<any>> =>
   axiosInstance().get(url);
 const useStudents = (): UseStudentObjectDataResponse => {
-  const { data, error } = useSWR<GetStudentsByFetcher>(ENDPOINT.studentsList, fetcher);
+  const { data, error } = useSWR<GetStudentsByFetcher>(
+    ENDPOINT.studentsList,
+    fetcher
+  );
 
   return {
     students: data?.data,

src/api/useTasks.ts

@@ -1,7 +1,7 @@
-import { ENDPOINT } from '../const/endpoints.const';
 import useSWR from 'swr';
-import axiosInstance from './axios';
 import { AxiosResponse } from 'axios';
+import { ENDPOINT } from '../const/endpoints.const';
+import axiosInstance from './axios';
 
 type TaskObject = {
   id: number;
@@ -20,14 +20,15 @@ type GetTasksByFetcher = {
   data: TaskObject[];
 };
 
-const fetcher = async (
-  url: string,
-): Promise<AxiosResponse<any>> =>
+const fetcher = async (url: string): Promise<AxiosResponse<any>> =>
   axiosInstance().get(url);
 
 const useTasks = (id: any): UseTasksObjectDataResponse => {
-  const { data, error } = useSWR<GetTasksByFetcher>(ENDPOINT.tasksList.replace('{:id}', id), fetcher);
-
+  const { data, error } = useSWR<GetTasksByFetcher>(
+    ENDPOINT.tasksList.replace('{:id}', id),
+    fetcher
+  );
+
   return {
     tasks: data?.data,
     isTasksLoading: !error && (!data || !data.data),

src/api/useUser.ts

@@ -1,7 +1,7 @@
-import useSWR, { type SWRResponse } from "swr";
-import { ENDPOINT } from "../const/endpoints.const";
-import type {AxiosResponse} from "axios";
-import axiosInstance from "./axios.ts";
+import useSWR, { type SWRResponse } from 'swr';
+import type { AxiosResponse } from 'axios';
+import { ENDPOINT } from '../const/endpoints.const';
+import axiosInstance from './axios.ts';
 
 type UserObject = {
   id: number;
@@ -21,9 +21,7 @@ type GetUserByFetcher = {
 // adding SWR
 // const fetcher = (...args: [string]) =>
 //   fetch(...(args as unknown as [string])).then((res) => res.json());
-const fetcher = async (
-  url: string,
-): Promise<AxiosResponse<any>> =>
+const fetcher = async (url: string): Promise<AxiosResponse<any>> =>
   axiosInstance().get(url);
 const useUser = (): UseUserObjectDataResponse => {
   const { data, error }: SWRResponse = useSWR<GetUserByFetcher>(

src/components/atoms/Buttons/Button.ts

@@ -1,4 +1,4 @@
-import styled, { IStyledComponent } from 'styled-components';
+import styled from 'styled-components';
 import type { ThemeTypes } from '../../../theme/appTheme';
 
 interface ButtonInterface {

src/components/atoms/Buttons/CloseBarButton.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import styled from 'styled-components';
 import ARROW_ICON_SVG from '/arrow_back-24px.svg';
 import EXIT_ICON_SVG from '/exit.svg';
-import React from 'react';
 import type { ThemeTypes } from '../../../theme/appTheme';
 
 interface StyledCloseBarButtonInterface {

src/components/atoms/Lists/Lists.tsx

@@ -1,8 +1,7 @@
+import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { DeleteButton, EditButton } from '../Buttons/LightButtons';
-import type { ReactNode } from 'react';
 import type { ThemeTypes } from '../../../theme/appTheme';
-import React from 'react';
 interface ListsStyledInterface {
   theme?: ThemeTypes;
 }

src/components/atoms/Sections/Article.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { StyleSheet } from 'styled-components/dist/types';
 
 interface StyledArticleInterface {}
 

src/components/modules/ButtonBar/ButtonBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import Button from '@/components/atoms/Buttons/Button';
-import CustomArrow from '@/components/atoms/Buttons/CustomArrow';
+import Button from '../../atoms/Buttons/Button.ts';
+import CustomArrow from '../../atoms/Buttons/CustomArrow.ts';
 
 const StyledBlueArrow = styled(CustomArrow)`
   &::before {

src/components/modules/CustomSelect/CustomSelect.tsx

@@ -1,13 +1,11 @@
-import { SetStateAction, useState } from 'react';
+import React, { SetStateAction, useState } from 'react';
 import styled from 'styled-components';
-import Button from '@/components/atoms/Buttons/Button';
-import SelectHeader from '@/components/atoms/Heading/SelectHeader';
-import CustomArrow from '@/components/atoms/Buttons/CustomArrow';
-import MainBox from '@/components/atoms/Sections/MainBox';
-import { Subheading } from '@/components/atoms/Heading/Heading';
-//import  {dataa, dataa as datamock} from '@/../mockyClient';
-import React from 'react';
-import { ThemeTypes } from '@/theme/appTheme';
+import Button from '../../atoms/Buttons/Button.ts';
+import SelectHeader from '../../atoms/Heading/SelectHeader.tsx';
+import CustomArrow from '../../atoms/Buttons/CustomArrow.ts';
+import { ThemeTypes } from '../../../theme/appTheme.ts';
+import { Subheading } from '../../atoms/Heading/Heading.ts';
+import MainBox from '../../atoms/Sections/MainBox.ts';
 
 interface ListItemInterface {
   theme: ThemeTypes;

src/components/modules/From/Form.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import type { ThemeTypes } from '@/theme/appTheme';
+import { ThemeTypes } from '../../../theme/appTheme.ts';
 
 interface StyledInputInterface {
   theme: ThemeTypes;

src/components/modules/StudentCard/StudentCard.tsx

@@ -1,9 +1,9 @@
 import { Link } from 'react-router-dom';
+import React from 'react';
+import styled from 'styled-components';
 import Paragraph from '../../atoms/Paragraph/Paragraph';
 import ProfileImage from '../../atoms/ProfileImage/ProfileImage';
 import ProfileDefaultImage_SVG from '/profile-user.svg';
-import styled from 'styled-components';
-import React from 'react';
 import { ThemeTypes } from '../../../theme/appTheme';
 
 interface StyledStudentCardInterface {
@@ -39,7 +39,7 @@ type PropTypesStudentCard = {
 const StudentCard = ({ name, studentId, image }: PropTypesStudentCard) => {
   return (
     <StyledStudentCard to={`/${studentId}`}>
-      <ProfileImage src={(image) ? image.toString() : ProfileDefaultImage_SVG} />
+      <ProfileImage src={image ? image.toString() : ProfileDefaultImage_SVG} />
       <StyledName big={true}>{name}</StyledName>
     </StyledStudentCard>
   );

src/components/structures/Awards/AwardsBar.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import ReturnButton from '../../atoms/Buttons/ReturnButton';
 import {
   Subheading,
@@ -9,7 +9,6 @@ import ActionsTemplate from '../../templates/ActionsTemplate';
 import { StyledContainer } from '../../atoms/Sections/Containers';
 import CustomSelect from '../../modules/CustomSelect/CustomSelect';
 import { dataa as datamock } from '../../../mockyClient';
-import React from 'react';
 
 type AwardsBarPropTypes = {
   points: any;

src/components/structures/Awards/AwardsList.tsx

@@ -1,12 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { Heading, Subheading } from '../../atoms/Heading/Heading';
 import MainBox from '../../atoms/Sections/MainBox';
-import LiElement from '../../atoms/Lists/Lists';
-import { LiDateElem } from '../../atoms/Lists/Lists';
 import { StyledArticle } from '../../atoms/Sections/Article';
+import LiElement, {
+  StyledUl,
+  StyledDate,
+  LiDateElem,
+} from '../../atoms/Lists/Lists';
 import AddPrizeForm from './AddPrizeForm';
 import EditPrizeForm from './EditPrizeForm';
-import { StyledUl, StyledDate } from '../../atoms/Lists/Lists';
 
 const AwardsList = ({ awards, studentId }: any) => {
   const [prizes, setPrizes] = useState(awards);

src/components/structures/Awards/EditPrizeForm.tsx

@@ -1,12 +1,11 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { AddButton, DeleteButtonText } from '../../atoms/Buttons/LightButtons';
 import {
   StyledForm,
   StyledInput,
   StyledLabel,
   StyledRow,
 } from '../../atoms/Form/Form';
-import React from 'react';
 
 type PrizeTypes = {
   value: string | number | readonly string[] | undefined;

src/components/structures/Navbar/Navbar.tsx

@@ -3,14 +3,14 @@
 //import Home24PxSVG from "../../../images/icons/home-24px.svg";
 import styled from 'styled-components';
 import { useParams } from 'react-router-dom';
-import NavButton from '../../modules/NavButton/NavButton';
 // import Home24PxSVG from "/home-24px.svg";
 // import TrophySVG from "/trophy.svg";
 // import SentimentVeryDissatisfied24PxSVG from "/sentiment_very_dissatisfied-24px.svg";
 // import Person24PxSVG from "/person-24px.svg";
 // import Settings24PxSVG from "/settings-24px.svg";
 import React from 'react';
 import { JSX } from 'react/jsx-runtime';
+import NavButton from '../../modules/NavButton/NavButton';
 import { ThemeTypes } from '../../../theme/appTheme';
 import SvgHome from '../../../images/icons/dist_/Home24Px';
 import SvgTrophy from '../../../images/icons/dist_/Trophy';

src/components/structures/StudentHeader/StudentHeader.tsx

@@ -1,13 +1,10 @@
-//import {PropTypes}  from "react/prop-types"'
-//import DEFAULT_IMAGE from "../../../images/icons/dist_/ProfileUser";
-//import STAR_ICON from "../../../images/icons/dist_/Star";
-import styled, { IStyledComponent } from 'styled-components';
+import styled from 'styled-components';
+import { NavLink } from 'react-router-dom';
+import React from 'react';
 import Paragraph from '../../atoms/Paragraph/Paragraph';
 import ProfileImage from '../../atoms/ProfileImage/ProfileImage';
 import STAR_ICON_SVG from '/star.svg';
 import ReturnButton from '../../atoms/Buttons/ReturnButton';
-import { NavLink } from 'react-router-dom';
-import React from 'react';
 import ProfileImageSVG from '/profile-user.svg';
 import { ThemeTypes } from '../../../theme/appTheme';
 

src/components/structures/Tasks/EditPointsForm.tsx

@@ -1,12 +1,11 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { AddButton, DeleteButtonText } from '../../atoms/Buttons/LightButtons';
 import {
   StyledInput,
   StyledForm,
   StyledLabel,
   StyledRow,
 } from '../../atoms/Form/Form';
-import React from 'react';
 
 type PropsType = {
   setEditing: (e: boolean) => void;

src/components/structures/Tasks/PointsList.tsx

@@ -1,12 +1,11 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Heading, Subheading } from '../../atoms/Heading/Heading';
 import { StyledArticle } from '../../atoms/Sections/Article';
 import MainBox from '../../atoms/Sections/MainBox';
 
 import LiElement, { StyledUl } from '../../atoms/Lists/Lists';
 import AddPointsForm from './AddPointsForm';
 import EditPointsForm from './EditPointsForm';
-import React from 'react';
 
 const PointsList = ({ tasksList, studentId }: any) => {
   const [tasks, setTasks] = useState(tasksList);