run pre-commit on all

.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml

@@ -6,7 +6,7 @@ body:
   - type: checkboxes
     id: block
     attributes:
-      label: "This project doesn't accept any new feature requests for the forseeable future. There is no shortage of ideas and the next development steps are clear for years to come."
+      label: "This project doesn't accept any new feature requests for the foreseeable future. There is no shortage of ideas and the next development steps are clear for years to come."
       options:
         - label: I understand that this issue will be closed without comment.
           required: true

.pre-commit-config.yaml

@@ -0,0 +1,48 @@
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: end-of-file-fixer
+  - repo: https://github.com/psf/black
+    rev: 24.10.0
+    hooks:
+      - id: black
+        alias: python
+        files: ^backend/
+        args: ["--line-length=79"]
+  - repo: https://github.com/pycqa/isort
+    rev: 5.13.2
+    hooks:
+      - id: isort
+        name: isort (python)
+        alias: python
+        files: ^backend/
+        args: ["--profile", "black", "-l 79"]
+  - repo: https://github.com/pycqa/flake8
+    rev: 7.1.1
+    hooks:
+      - id: flake8
+        alias: python
+        files: ^backend/
+        args: [ "--max-complexity=10", "--max-line-length=79" ]
+  - repo: https://github.com/codespell-project/codespell
+    rev: v2.3.0
+    hooks:
+      - id: codespell
+        exclude: ^frontend/package-lock.json
+  # - repo: https://github.com/pre-commit/mirrors-eslint
+  #   rev: v9.17.0
+  #   hooks:
+  #     - id: eslint
+  #       name: eslint
+  #       entry: npm run --prefix ./frontend lint
+  #       pass_filenames: false
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v4.0.0-alpha.8
+    hooks:
+      - id: prettier
+        entry: npm run --prefix ./frontend prettier
+        args: ["--write", "."]
+        pass_filenames: false
+
+exclude: '.*(\.svg|/migrations/).*'

backend/requirements-dev.txt

@@ -1,9 +1,6 @@
 -r requirements.txt
-black==24.10.0
-codespell==2.3.0
-flake8==7.1.1
 ipython==8.31.0
-isort==5.13.2
+pre-commit==4.0.1
 pylint-django==2.6.1
 pylint==3.3.3
 pytest-django==4.9.0

backend/user/migrations/0001_initial.py

@@ -25,7 +25,10 @@ class Migration(migrations.Migration):
                         verbose_name="ID",
                     ),
                 ),
-                ("password", models.CharField(max_length=128, verbose_name="password")),
+                (
+                    "password",
+                    models.CharField(max_length=128, verbose_name="password"),
+                ),
                 (
                     "last_login",
                     models.DateTimeField(

frontend/package.json

@@ -6,7 +6,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "build:deploy": "vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
+    "prettier": "prettier --write .",
     "preview": "vite preview"
   },
   "dependencies": {

frontend/src/components/ChannelList.tsx

@@ -15,7 +15,6 @@ type ChannelListProps = {
 };
 
 const ChannelList = ({ channelList, refreshChannelList }: ChannelListProps) => {
-
   const { userConfig } = useUserConfigStore();
   const viewLayout = userConfig.config.view_style_channel;
 

frontend/src/components/DownloadListItem.tsx

@@ -15,7 +15,6 @@ type DownloadListItemProps = {
 };
 
 const DownloadListItem = ({ download, setRefresh }: DownloadListItemProps) => {
-
   const { userConfig } = useUserConfigStore();
   const view = userConfig.config.view_style_downloads;
   const showIgnored = userConfig.config.show_ignored_only;

frontend/src/components/Filterbar.tsx

@@ -14,15 +14,10 @@ type FilterbarProps = {
   setRefresh?: (status: boolean) => void;
 };
 
-const Filterbar = ({
+const Filterbar = ({ hideToggleText, viewStyleName, setRefresh }: FilterbarProps) => {
-  hideToggleText,
-  viewStyleName,
-  setRefresh,
-}: FilterbarProps) => {
-
   const { userConfig, setPartialConfig } = useUserConfigStore();
   const [showHidden, setShowHidden] = useState(false);
-  const isGridView = userConfig.config.view_style_home === ViewStyles.grid
+  const isGridView = userConfig.config.view_style_home === ViewStyles.grid;
 
   return (
     <div className="view-controls three">
@@ -35,7 +30,7 @@ const Filterbar = ({
             checked={userConfig.config.hide_watched}
             onChange={() => {
               setRefresh?.(true);
-              setPartialConfig({hide_watched: !userConfig.config.hide_watched})
+              setPartialConfig({ hide_watched: !userConfig.config.hide_watched });
             }}
           />
 
@@ -48,7 +43,6 @@ const Filterbar = ({
               Off
             </label>
           )}
-
         </div>
       </div>
 
@@ -62,7 +56,7 @@ const Filterbar = ({
               value={userConfig.config.sort_by}
               onChange={event => {
                 setRefresh?.(true);
-                setPartialConfig({sort_by: event.target.value as SortByType});
+                setPartialConfig({ sort_by: event.target.value as SortByType });
               }}
             >
               <option value="published">date published</option>
@@ -78,7 +72,7 @@ const Filterbar = ({
               value={userConfig.config.sort_order}
               onChange={event => {
                 setRefresh?.(true);
-                setPartialConfig({sort_order: event.target.value as SortOrderType})
+                setPartialConfig({ sort_order: event.target.value as SortOrderType });
               }}
             >
               <option value="asc">asc</option>
@@ -106,7 +100,7 @@ const Filterbar = ({
               <img
                 src={iconAdd}
                 onClick={() => {
-                  setPartialConfig({grid_items: userConfig.config.grid_items + 1});
+                  setPartialConfig({ grid_items: userConfig.config.grid_items + 1 });
                 }}
                 alt="grid plus row"
               />
@@ -115,7 +109,7 @@ const Filterbar = ({
               <img
                 src={iconSubstract}
                 onClick={() => {
-                  setPartialConfig({grid_items: userConfig.config.grid_items - 1});
+                  setPartialConfig({ grid_items: userConfig.config.grid_items - 1 });
                 }}
                 alt="grid minus row"
               />
@@ -125,14 +119,14 @@ const Filterbar = ({
         <img
           src={iconGridView}
           onClick={() => {
-            setPartialConfig({[viewStyleName]: 'grid'});
+            setPartialConfig({ [viewStyleName]: 'grid' });
           }}
           alt="grid view"
         />
         <img
           src={iconListView}
           onClick={() => {
-            setPartialConfig({[viewStyleName]: 'list'});
+            setPartialConfig({ [viewStyleName]: 'list' });
           }}
           alt="list view"
         />

frontend/src/components/Footer.tsx

@@ -5,8 +5,8 @@ import { useAuthStore } from '../stores/AuthDataStore';
 const Footer = () => {
   const currentYear = new Date().getFullYear();
   const { auth } = useAuthStore();
-  const version = auth?.version
+  const version = auth?.version;
-  const taUpdate = auth?.ta_update
+  const taUpdate = auth?.ta_update;
 
   return (
     <div className="footer">

frontend/src/components/Navigation.tsx

@@ -8,7 +8,6 @@ import logOut from '../api/actions/logOut';
 import loadIsAdmin from '../functions/getIsAdmin';
 
 const Navigation = () => {
-
   const isAdmin = loadIsAdmin();
   const navigate = useNavigate();
   const handleLogout = async (event: { preventDefault: () => void }) => {

frontend/src/components/PlaylistList.tsx

@@ -13,7 +13,6 @@ type PlaylistListProps = {
 };
 
 const PlaylistList = ({ playlistList, setRefresh }: PlaylistListProps) => {
-
   const { userConfig } = useUserConfigStore();
   const viewLayout = userConfig.config.view_style_playlist;
 

frontend/src/configuration/colours/getColours.ts

@@ -8,9 +8,8 @@ export const ColourConstant = {
 };
 
 const importColours = () => {
-
   const { userConfig } = useUserConfigStore();
-  const stylesheet = userConfig?.config.stylesheet
+  const stylesheet = userConfig?.config.stylesheet;
 
   switch (stylesheet) {
     case ColourConstant.Dark:

frontend/src/functions/getIsAdmin.ts

@@ -1,7 +1,7 @@
 import { useUserConfigStore } from '../stores/UserConfigStore';
 
 const loadIsAdmin = () => {
-  const { userConfig } = useUserConfigStore()
+  const { userConfig } = useUserConfigStore();
   const isAdmin = userConfig?.is_staff || userConfig?.is_superuser;
 
   return isAdmin;

frontend/src/pages/Base.tsx

@@ -31,7 +31,7 @@ export type OutletContextType = {
 
 const Base = () => {
   const { setAuth } = useAuthStore();
-  const { setUserConfig } = useUserConfigStore()
+  const { setUserConfig } = useUserConfigStore();
   const { userConfig, auth } = useLoaderData() as BaseLoaderData;
 
   const location = useLocation();
@@ -46,7 +46,7 @@ const Base = () => {
   useEffect(() => {
     setAuth(auth);
     setUserConfig(userConfig);
-  }, [])
+  }, []);
 
   useEffect(() => {
     if (currentPageFromUrl !== currentPage) {

frontend/src/pages/ChannelPlaylist.tsx

@@ -42,7 +42,7 @@ const ChannelPlaylist = () => {
     <>
       <title>TA | Channel: Playlists</title>
       <ScrollToTopOnNavigate />
-      <div className='boxed-content'>
+      <div className="boxed-content">
         <Notifications pageName="channel" includeReindex={true} />
 
         <div className="view-controls">
@@ -52,7 +52,7 @@ const ChannelPlaylist = () => {
               <input
                 checked={showSubedOnly}
                 onChange={() => {
-                  setPartialConfig({show_subed_only: !showSubedOnly});
+                  setPartialConfig({ show_subed_only: !showSubedOnly });
                   setRefreshPlaylists(true);
                 }}
                 type="checkbox"
@@ -73,14 +73,14 @@ const ChannelPlaylist = () => {
             <img
               src={iconGridView}
               onClick={() => {
-                setPartialConfig({view_style_playlist: 'grid'});
+                setPartialConfig({ view_style_playlist: 'grid' });
               }}
               alt="grid view"
             />
             <img
               src={iconListView}
               onClick={() => {
-                setPartialConfig({view_style_playlist: 'list'});
+                setPartialConfig({ view_style_playlist: 'list' });
               }}
               alt="list view"
             />
@@ -90,10 +90,7 @@ const ChannelPlaylist = () => {
 
       <div className={`boxed-content`}>
         <div className={`playlist-list ${view}`}>
-          <PlaylistList
+          <PlaylistList playlistList={playlistList} setRefresh={setRefreshPlaylists} />
-            playlistList={playlistList}
-            setRefresh={setRefreshPlaylists}
-          />
         </div>
       </div>
 

frontend/src/pages/ChannelVideo.tsx

@@ -1,10 +1,5 @@
 import { useEffect, useState } from 'react';
-import {
+import { Link, useOutletContext, useParams, useSearchParams } from 'react-router-dom';
-  Link,
-  useOutletContext,
-  useParams,
-  useSearchParams,
-} from 'react-router-dom';
 import { OutletContextType } from './Base';
 import VideoList from '../components/VideoList';
 import Routes from '../configuration/routes/RouteList';
@@ -54,7 +49,7 @@ const ChannelVideo = ({ videoType }: ChannelVideoProps) => {
   const hasVideos = videoResponse?.data?.length !== 0;
   const showEmbeddedVideo = videoId !== null;
 
-  const view = userConfig.config.view_style_home
+  const view = userConfig.config.view_style_home;
   const isGridView = view === ViewStyles.grid;
   const gridView = isGridView ? `boxed-${userConfig.config.grid_items}` : '';
   const gridViewGrid = isGridView ? `grid-${userConfig.config.grid_items}` : '';

frontend/src/pages/Channels.tsx

@@ -64,7 +64,10 @@ const Channels = () => {
 
   useEffect(() => {
     (async () => {
-      const channelListResponse = await loadChannelList(currentPage, userConfig.config.show_subed_only);
+      const channelListResponse = await loadChannelList(
+        currentPage,
+        userConfig.config.show_subed_only,
+      );
       setChannelListResponse(channelListResponse);
     })();
   }, [refresh, userConfig.config.show_subed_only, currentPage, pagination?.current_page]);
@@ -127,7 +130,7 @@ const Channels = () => {
               <input
                 id="show_subed_only"
                 onChange={async () => {
-                  setPartialConfig({show_subed_only: !userConfig.config.show_subed_only});
+                  setPartialConfig({ show_subed_only: !userConfig.config.show_subed_only });
                   setRefresh(true);
                 }}
                 type="checkbox"
@@ -149,7 +152,7 @@ const Channels = () => {
             <img
               src={iconGridView}
               onClick={() => {
-                setPartialConfig({view_style_channel: 'grid'});
+                setPartialConfig({ view_style_channel: 'grid' });
               }}
               data-origin="channel"
               data-value="grid"
@@ -158,7 +161,7 @@ const Channels = () => {
             <img
               src={iconListView}
               onClick={() => {
-                setPartialConfig({view_style_channel: 'list'});
+                setPartialConfig({ view_style_channel: 'list' });
               }}
               data-origin="channel"
               data-value="list"
@@ -171,9 +174,7 @@ const Channels = () => {
         <div className={`channel-list ${userConfig.config.view_style_channel}`}>
           {!hasChannels && <h2>No channels found...</h2>}
 
-          {hasChannels && (
+          {hasChannels && <ChannelList channelList={channels} refreshChannelList={setRefresh} />}
-            <ChannelList channelList={channels} refreshChannelList={setRefresh} />
-          )}
         </div>
 
         {pagination && (

frontend/src/pages/Download.tsx

@@ -206,7 +206,7 @@ const Download = () => {
               <input
                 id="showIgnored"
                 onChange={() => {
-                  setPartialConfig({show_ignored_only: !showIgnored});
+                  setPartialConfig({ show_ignored_only: !showIgnored });
                   setRefresh(true);
                 }}
                 type="checkbox"
@@ -262,7 +262,7 @@ const Download = () => {
                   <img
                     src={iconAdd}
                     onClick={() => {
-                      setPartialConfig({grid_items: gridItems + 1});
+                      setPartialConfig({ grid_items: gridItems + 1 });
                     }}
                     alt="grid plus row"
                   />
@@ -271,7 +271,7 @@ const Download = () => {
                   <img
                     src={iconSubstract}
                     onClick={() => {
-                      setPartialConfig({grid_items: gridItems - 1});
+                      setPartialConfig({ grid_items: gridItems - 1 });
                     }}
                     alt="grid minus row"
                   />
@@ -282,14 +282,14 @@ const Download = () => {
             <img
               src={iconGridView}
               onClick={() => {
-                setPartialConfig({view_style_downloads: 'grid'});
+                setPartialConfig({ view_style_downloads: 'grid' });
               }}
               alt="grid view"
             />
             <img
               src={iconListView}
               onClick={() => {
-                setPartialConfig({view_style_downloads: 'list'});
+                setPartialConfig({ view_style_downloads: 'list' });
               }}
               alt="list view"
             />
@@ -313,10 +313,7 @@ const Download = () => {
             downloadList?.map(download => {
               return (
                 <Fragment key={`${download.channel_id}_${download.timestamp}`}>
-                  <DownloadListItem
+                  <DownloadListItem download={download} setRefresh={setRefresh} />
-                    download={download}
-                    setRefresh={setRefresh}
-                  />
                 </Fragment>
               );
             })}

frontend/src/pages/ErrorPage.tsx

@@ -1,7 +1,6 @@
 import { useRouteError } from 'react-router-dom';
 import importColours from '../configuration/colours/getColours';
 
-
 // This is not always the correct response
 type ErrorType = {
   statusText: string;

frontend/src/pages/Home.tsx

@@ -160,7 +160,7 @@ const Home = () => {
     userMeConfig.sort_order,
     userMeConfig.hide_watched,
     currentPage,
-    pagination?.current_page
+    pagination?.current_page,
   ]);
 
   return (

frontend/src/pages/Playlist.tsx

@@ -1,11 +1,5 @@
 import { useEffect, useState } from 'react';
-import {
+import { Link, useNavigate, useOutletContext, useParams, useSearchParams } from 'react-router-dom';
-  Link,
-  useNavigate,
-  useOutletContext,
-  useParams,
-  useSearchParams,
-} from 'react-router-dom';
 import loadPlaylistById from '../api/loader/loadPlaylistById';
 import { OutletContextType } from './Base';
 import { ConfigType, VideoType, ViewLayoutType } from './Home';

frontend/src/pages/Playlists.tsx

@@ -143,7 +143,7 @@ const Playlists = () => {
               <input
                 checked={showSubedOnly}
                 onChange={() => {
-                  setPartialConfig({show_subed_only: !showSubedOnly});
+                  setPartialConfig({ show_subed_only: !showSubedOnly });
                 }}
                 type="checkbox"
               />
@@ -163,14 +163,14 @@ const Playlists = () => {
             <img
               src={iconGridView}
               onClick={() => {
-                setPartialConfig({view_style_playlist: 'grid'});
+                setPartialConfig({ view_style_playlist: 'grid' });
               }}
               alt="grid view"
             />
             <img
               src={iconListView}
               onClick={() => {
-                setPartialConfig({view_style_playlist: 'list'});
+                setPartialConfig({ view_style_playlist: 'list' });
               }}
               alt="list view"
             />
@@ -180,9 +180,7 @@ const Playlists = () => {
         <div className={`playlist-list ${view}`}>
           {!hasPlaylists && <h2>No playlists found...</h2>}
 
-          {hasPlaylists && (
+          {hasPlaylists && <PlaylistList playlistList={playlistList} setRefresh={setRefresh} />}
-            <PlaylistList playlistList={playlistList} setRefresh={setRefresh} />
-          )}
         </div>
       </div>
 

frontend/src/pages/Search.tsx

@@ -115,7 +115,11 @@ const Search = () => {
             <div className="multi-search-result">
               <h2>Video Results</h2>
               <div id="video-results" className={`video-list ${viewVideos} ${gridViewGrid}`}>
-                <VideoList videoList={videoList} viewLayout={viewVideos} refreshVideoList={setRefresh} />
+                <VideoList
+                  videoList={videoList}
+                  viewLayout={viewVideos}
+                  refreshVideoList={setRefresh}
+                />
               </div>
             </div>
           )}
@@ -124,10 +128,7 @@ const Search = () => {
             <div className="multi-search-result">
               <h2>Channel Results</h2>
               <div id="channel-results" className={`channel-list ${viewChannels} ${gridViewGrid}`}>
-                <ChannelList
+                <ChannelList channelList={channelList} refreshChannelList={setRefresh} />
-                  channelList={channelList}
-                  refreshChannelList={setRefresh}
-                />
               </div>
             </div>
           )}
@@ -135,11 +136,11 @@ const Search = () => {
           {hasSearchQuery && isPlaylistQuery && (
             <div className="multi-search-result">
               <h2>Playlist Results</h2>
-              <div id="playlist-results" className={`playlist-list ${viewPlaylists} ${gridViewGrid}`}>
+              <div
-                <PlaylistList
+                id="playlist-results"
-                  playlistList={playlistList}
+                className={`playlist-list ${viewPlaylists} ${gridViewGrid}`}
-                  setRefresh={setRefresh}
+              >
-                />
+                <PlaylistList playlistList={playlistList} setRefresh={setRefresh} />
               </div>
             </div>
           )}

frontend/src/pages/SettingsUser.tsx

@@ -25,19 +25,19 @@ const SettingsUser = () => {
   }, [userConfig.config.page_size, userConfig.config.stylesheet]);
 
   const handleStyleSheetChange = async (selectedStyleSheet: ColourVariants) => {
-    setPartialConfig({stylesheet: selectedStyleSheet});
+    setPartialConfig({ stylesheet: selectedStyleSheet });
     setStyleSheet(selectedStyleSheet);
     setStyleSheetRefresh(true);
-  }
+  };
 
   const handlePageSizeChange = async () => {
-    setPartialConfig({page_size: pageSize});
+    setPartialConfig({ page_size: pageSize });
-  }
+  };
 
   const handlePageRefresh = () => {
     navigate(0);
     setStyleSheetRefresh(false);
-  }
+  };
 
   return (
     <>
@@ -49,10 +49,10 @@ const SettingsUser = () => {
         <div className="title-bar">
           <h1>User Configurations</h1>
         </div>
-        <div className='info-box'>
+        <div className="info-box">
-          <div className='info-box-item'>
+          <div className="info-box-item">
             <h2>Customize user Interface</h2>
-            <div className='settings-box-wrapper'>
+            <div className="settings-box-wrapper">
               <div>
                 <p>Switch your color scheme</p>
               </div>
@@ -73,12 +73,10 @@ const SettingsUser = () => {
                     );
                   })}
                 </select>
-                {styleSheetRefresh && (
+                {styleSheetRefresh && <button onClick={handlePageRefresh}>Refresh</button>}
-                  <button onClick={handlePageRefresh}>Refresh</button>
-                )}
               </div>
             </div>
-            <div className='settings-box-wrapper'>
+            <div className="settings-box-wrapper">
               <div>
                 <p>Archive view page size</p>
               </div>
@@ -92,11 +90,13 @@ const SettingsUser = () => {
                     setPageSize(Number(event.target.value));
                   }}
                 />
-                <div className='button-box'>
+                <div className="button-box">
                   {userConfig.config.page_size !== pageSize && (
                     <>
                       <button onClick={handlePageSizeChange}>Update</button>
-                      <button onClick={() => setPageSize(userConfig.config.page_size)}>Cancel</button>
+                      <button onClick={() => setPageSize(userConfig.config.page_size)}>
+                        Cancel
+                      </button>
                     </>
                   )}
                 </div>

frontend/src/stores/AuthDataStore.ts

@@ -6,7 +6,7 @@ interface AuthState {
   setAuth: (auth: AuthenticationType) => void;
 }
 
-export const useAuthStore = create<AuthState>((set) => ({
+export const useAuthStore = create<AuthState>(set => ({
   auth: null,
-  setAuth: (auth) => set({ auth }),
+  setAuth: auth => set({ auth }),
 }));

frontend/src/stores/UserConfigStore.ts

@@ -7,8 +7,7 @@ interface UserConfigState {
   setPartialConfig: (userConfig: Partial<UserConfigType>) => void;
 }
 
-export const useUserConfigStore = create<UserConfigState>((set) => ({
+export const useUserConfigStore = create<UserConfigState>(set => ({
-
   userConfig: {
     id: 0,
     name: '',
@@ -30,15 +29,16 @@ export const useUserConfigStore = create<UserConfigState>((set) => ({
       hide_watched: false,
       show_ignored_only: false,
       show_subed_only: false,
-    }
     },
-  setUserConfig: (userConfig) => set({ userConfig }),
+  },
+  setUserConfig: userConfig => set({ userConfig }),
 
   setPartialConfig: async (userConfig: Partial<UserConfigType>) => {
     const userConfigResponse = await updateUserConfig(userConfig);
-    set((state) => ({
+    set(state => ({
-      userConfig: state.userConfig ? { ...state.userConfig, config: userConfigResponse } : state.userConfig,
+      userConfig: state.userConfig
+        ? { ...state.userConfig, config: userConfigResponse }
+        : state.userConfig,
     }));
-  }
+  },
-
+}));
-}))