Merge pull request #75 from mrjvs/bug-fix-test

Fix multiple bugs

.dockerignore

@@ -0,0 +1,6 @@
+.git
+node_modules
+build
+.env.local
+.github
+.vscode

dockerfile

@@ -0,0 +1,13 @@
+FROM node:16.15-alpine as build
+WORKDIR /app
+ENV PATH /app/node_modules/.bin:$PATH
+COPY package*.json ./
+RUN yarn install
+COPY . ./
+RUN yarn build
+
+# production environment
+FROM nginx:stable-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

package.json

@@ -5,24 +5,15 @@
   "homepage": "https://movie.squeezebox.dev",
   "dependencies": {
     "@headlessui/react": "^1.5.0",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/crypto-js": "^4.1.1",
-    "@types/react-router": "^5.1.18",
     "crypto-js": "^4.1.1",
     "fuse.js": "^6.4.6",
     "hls.js": "^1.0.7",
     "json5": "^2.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^5.0.0",
-    "react-tracked": "^1.7.6",
-    "scheduler": "^0.20.2",
-    "unpacker": "^1.0.1",
-    "web-vitals": "^1.0.1"
+    "react-scripts": "5.0.1",
+    "unpacker": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -43,11 +34,12 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^27.4.0",
+    "@types/crypto-js": "^4.1.1",
     "@types/node": "^17.0.15",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-router": "^5.1.18",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "autoprefixer": "^10.4.2",
@@ -57,7 +49,7 @@
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.3.0",
     "postcss": "^8.4.6",
     "prettier": "^2.5.1",

src/App.tsx

@@ -8,7 +8,6 @@ import { MediaView } from "./views/MediaView";
 import { SearchView } from "./views/SearchView";
 
 function App() {
-
   return (
     <WatchedContextProvider>
       <BookmarkContextProvider>

src/components/SearchBar.tsx

@@ -7,31 +7,39 @@ import { TextInputControl } from "./text-inputs/TextInputControl";
 export interface SearchBarProps {
   buttonText?: string;
   placeholder?: string;
-  onChange: (value: MWQuery) => void;
+  onChange: (value: MWQuery, force: boolean) => void;
+  onUnFocus: () => void;
   value: MWQuery;
 }
 
 export function SearchBarInput(props: SearchBarProps) {
   const [dropdownOpen, setDropdownOpen] = useState(false);
   function setSearch(value: string) {
-    props.onChange({
-      ...props.value,
-      searchQuery: value,
-    });
+    props.onChange(
+      {
+        ...props.value,
+        searchQuery: value,
+      },
+      false
+    );
   }
   function setType(type: string) {
-    props.onChange({
-      ...props.value,
-      type: type as MWMediaType,
-    });
+    props.onChange(
+      {
+        ...props.value,
+        type: type as MWMediaType,
+      },
+      true
+    );
   }
 
   return (
-    <div className="bg-denim-300 hover:bg-denim-400 focus-within:bg-denim-400 flex flex-col items-center gap-4 rounded-[28px] px-4 py-4 transition-colors sm:flex-row sm:py-2 sm:pl-8  sm:pr-2">
+    <div className="flex flex-col items-center gap-4 rounded-[28px] bg-denim-300 px-4 py-4 transition-colors focus-within:bg-denim-400 hover:bg-denim-400 sm:flex-row sm:py-2 sm:pl-8  sm:pr-2">
       <TextInputControl
+        onUnFocus={props.onUnFocus}
         onChange={(val) => setSearch(val)}
         value={props.value.searchQuery}
-        className="placeholder-denim-700 w-full flex-1 bg-transparent text-white focus:outline-none"
+        className="w-full flex-1 bg-transparent text-white placeholder-denim-700 focus:outline-none"
         placeholder={props.placeholder}
       />
 

src/components/layout/ErrorBoundary.tsx

@@ -48,7 +48,7 @@ export class ErrorBoundary extends Component<
   }
 
   render() {
-    if (!this.state.hasError) return this.props.children;
+    if (!this.state.hasError) return this.props.children as any;
 
     return (
       <div className="flex min-h-screen w-full flex-col items-center justify-center px-4 py-12">
@@ -69,7 +69,7 @@ export class ErrorBoundary extends Component<
           </p>
         </div>
         {this.state.error ? (
-          <div className="bg-denim-300 w-4xl mt-12 max-w-full rounded px-6 py-4">
+          <div className="w-4xl mt-12 max-w-full rounded bg-denim-300 px-6 py-4">
             <p className="mb-1 break-words font-bold text-white">
               {this.state.error.name} - {this.state.error.description}
             </p>

src/components/text-inputs/TextInputControl.tsx

@@ -1,5 +1,6 @@
 export interface TextInputControlPropsNoLabel {
   onChange?: (data: string) => void;
+  onUnFocus?: () => void;
   value?: string;
   placeholder?: string;
   className?: string;
@@ -11,6 +12,7 @@ export interface TextInputControlProps extends TextInputControlPropsNoLabel {
 
 export function TextInputControl({
   onChange,
+  onUnFocus,
   value,
   label,
   className,
@@ -23,6 +25,7 @@ export function TextInputControl({
       placeholder={placeholder}
       onChange={(e) => onChange && onChange(e.target.value)}
       value={value}
+      onBlur={() => onUnFocus && onUnFocus()}
     />
   );
 

src/hooks/usePortableMedia.ts

@@ -1,6 +1,6 @@
 import { MWPortableMedia } from "providers";
 import { useEffect, useState } from "react";
-import { useParams } from "react-router";
+import { useParams } from "react-router-dom";
 
 export function deserializePortableMedia(media: string): MWPortableMedia {
   return JSON.parse(atob(decodeURIComponent(media)));

src/hooks/useSearchQuery.ts

@@ -1,19 +1,25 @@
 import { MWMediaType, MWQuery } from "providers";
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { generatePath, useHistory, useRouteMatch } from "react-router-dom";
 
-export function useSearchQuery(): [MWQuery, (inp: Partial<MWQuery>) => void] {
+export function useSearchQuery(): [
+  MWQuery,
+  (inp: Partial<MWQuery>, force: boolean) => void,
+  () => void
+] {
   const history = useHistory();
+  const isFirstRender = useRef(true);
   const { path, params } = useRouteMatch<{ type: string; query: string }>();
   const [search, setSearch] = useState<MWQuery>({
     searchQuery: "",
     type: MWMediaType.MOVIE,
   });
 
-  const updateParams = (inp: Partial<MWQuery>) => {
+  const updateParams = (inp: Partial<MWQuery>, force: boolean) => {
     const copySearch: MWQuery = { ...search };
     Object.assign(copySearch, inp);
     setSearch(copySearch);
+    if (!force) return;
     history.replace(
       generatePath(path, {
         query:
@@ -23,13 +29,27 @@ export function useSearchQuery(): [MWQuery, (inp: Partial<MWQuery>) => void] {
     );
   };
 
+  const onUnFocus = () => {
+    history.replace(
+      generatePath(path, {
+        query: search.searchQuery.length === 0 ? undefined : search.searchQuery,
+        type: search.type,
+      })
+    );
+  };
+
+  // only run on first load of the page
   React.useEffect(() => {
+    if (isFirstRender.current === false) {
+      return;
+    }
+    isFirstRender.current = false;
     const type =
       Object.values(MWMediaType).find((v) => params.type === v) ||
       MWMediaType.MOVIE;
     const searchQuery = params.query || "";
     setSearch({ type, searchQuery });
-  }, [params, setSearch]);
+  }, [setSearch, params, isFirstRender]);
 
-  return [search, updateParams];
+  return [search, updateParams, onUnFocus];
 }

src/providers/methods/search.ts

@@ -73,7 +73,11 @@ function sortResults(
   providerResults: MWMassProviderOutput
 ): MWMassProviderOutput {
   const results: MWMassProviderOutput = { ...providerResults };
-  const fuse = new Fuse(results.results, { threshold: 0.3, keys: ["title"] });
+  const fuse = new Fuse(results.results, {
+    threshold: 0.3,
+    keys: ["title"],
+    fieldNormWeight: 0.5,
+  });
   results.results = fuse.search(query.searchQuery).map((v) => v.item);
   return results;
 }

src/views/SearchView.tsx

@@ -165,7 +165,7 @@ function ExtraItems() {
 export function SearchView() {
   const [searching, setSearching] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
-  const [search, setSearch] = useSearchQuery();
+  const [search, setSearch, setSearchUnFocus] = useSearchQuery();
 
   const debouncedSearch = useDebounce<MWQuery>(search, 2000);
   useEffect(() => {
@@ -182,7 +182,7 @@ export function SearchView() {
       return (
         <SearchResultsView
           searchQuery={debouncedSearch}
-          clear={() => setSearch({ searchQuery: "" })}
+          clear={() => setSearch({ searchQuery: "" }, true)}
         />
       );
     return <ExtraItems />;
@@ -201,6 +201,7 @@ export function SearchView() {
           <SearchBarInput
             onChange={setSearch}
             value={search}
+            onUnFocus={setSearchUnFocus}
             placeholder="What movie do you want to watch?"
           />
         </div>