Re-organise imports and variables across the app

src/app/app/page.tsx

@@ -5,12 +5,12 @@ import Player from "@/components/Player"
 import Toast from "@/components/Toast.tsx"
 import { getLanguageName } from "@/helpers/getLanguageName"
 import { useFetchArticle } from "@/helpers/handleArticle/useFetchArticle"
+import { isLocalStorageSupported } from "@/helpers/isLocalStorageSupported"
+import { useChooseBestVoice } from "@/helpers/setUpWebSpeech/useChooseBestVoice"
 import { useArticleStore } from "@/stores/useArticleStore"
 import { useGenericStore } from "@/stores/useGenericStore"
-import { useEffect } from "react"
-import { useChooseBestVoice } from "@/helpers/setUpWebSpeech/useChooseBestVoice"
-import { isLocalStorageSupported } from "@/helpers/isLocalStorageSupported"
 import { usePlayerStore } from "@/stores/usePlayerStore"
+import { useEffect } from "react"
 
 export type ToastType = "language-detected" | "fetch-message"
 

src/app/layout.tsx

@@ -1,16 +1,16 @@
 "use client"
 
-import { Figtree } from "next/font/google"
-import 'material-icons/iconfont/filled.css'
-import "animate.css";
-import "./globals.css"
-import Head from "@/components/Head"
+import Head from "@/components/Head";
 import { useIsPwaInstallable } from "@/helpers/handlePwaLifeCycle/useIsPwaInstallable";
 import { usePopulateVoices } from "@/helpers/setUpWebSpeech/usePopulateVoices";
-import { useIsMobileOrTabletOnClient } from "@/helpers/useIsMobileOrTabletOnClient";
-import { useEffect } from "react";
 import { shouldCaptureAnalytics } from "@/helpers/shouldCaptureAnalytics";
+import { useIsMobileOrTabletOnClient } from "@/helpers/useIsMobileOrTabletOnClient";
+import "animate.css";
+import 'material-icons/iconfont/filled.css';
+import { Figtree } from "next/font/google";
 import Script from "next/script";
+import { useEffect } from "react";
+import "./globals.css";
 
 const figtree = Figtree({ subsets: ["latin"] })
 

src/app/page.tsx

@@ -39,7 +39,7 @@ export default function Home() {
                 Listen now
               </Button>
             </Link>
-            <a href={GITHUB_INTEGRATE_ON_YOUR_BLOG_LINK} target="_blank" referrerPolicy="same-origin" >
+            <a href={GITHUB_INTEGRATE_ON_YOUR_BLOG_LINK} target="_blank">
               <Button
                 type="secondary"
                 className="text-lg font-bold px-6 py-2 mb-4"
@@ -48,8 +48,8 @@ export default function Home() {
               </Button>
             </a>
           </div>
-          {/* ELEMENT FOR DESKTOP */}
 
+          {/* ELEMENT FOR DESKTOP */}
           <div className="hidden lg:block ">
             <HomePageBranding />
           </div>
@@ -67,8 +67,6 @@ export default function Home() {
           </div>
         </div>
 
-
-
         {/* ELEMENT FOR PAGE BOTTOM POSITIONING ON MOBILE AND TABLET*/}
         <div className="block lg:hidden order-4">
           <HomePageBranding />

src/components/ArticleForm/PasteTab.tsx

@@ -4,10 +4,11 @@ import Button from "../Button";
 import TextArea from "../TextArea";
 
 export default function PasteTab() {
+    const isPlayerOpen = useGenericStore((state) => state.isPlayerOpen)
+
     const pastedArticle = useArticleStore((state) => state.pastedArticle)
     const setArticleStoreStringItem = useArticleStore((state) => state.setArticleStoreStringItem)
 
-    const isPlayerOpen = useGenericStore((state) => state.isPlayerOpen)
 
     return (
         <div className="relative flex-grow animate__animated animate__fadeIn">

src/components/ArticleForm/index.tsx

@@ -1,4 +1,5 @@
 import { DEFAULT_PASTED_ARTICLE } from "@/constants/appConstants"
+import { useSplitArticleToSentences } from "@/helpers/handleArticle/useSplitArticleToSentences"
 import { useDetectAndUpdateLanguage } from "@/helpers/useDetectAndUpdateLanguage"
 import { useArticleStore } from "@/stores/useArticleStore"
 import { useGenericStore } from "@/stores/useGenericStore"
@@ -7,26 +8,22 @@ import { useEffect, useState } from "react"
 import Button from "../Button"
 import FetchTab from "./FetchTab"
 import PasteTab from "./PasteTab"
-import { useSplitArticleToSentences } from "@/helpers/handleArticle/useSplitArticleToSentences"
-import { usePlayerStore } from "@/stores/usePlayerStore"
 
 
 export default function ArticleForm() {
     const isPlayerOpen = useGenericStore((state) => state.isPlayerOpen)
     const setShowToast = useGenericStore((state) => state.setShowToast)
     const setToastType = useGenericStore((state) => state.setToastType)
-
     const tab = useGenericStore((state) => state.tab)
     const setTab = useGenericStore((state) => state.setTab)
+
     const fetchedArticle = useArticleStore((state) => state.fetchedArticle)
     const pastedArticle = useArticleStore((state) => state.pastedArticle)
     const articleToSpeak = useArticleStore((state) => state.articleToSpeak)
     const languageCodeOfArticleToSpeak = useArticleStore((state) => state.languageCodeOfArticleToSpeak)
     const setIsPlayerOpen = useGenericStore((state) => state.setIsPlayerOpen)
     const setArticleStoreStringItem = useArticleStore((state) => state.setArticleStoreStringItem)
 
-    const setPlayerState = usePlayerStore((state) => state.setPlayerState)
-
     const [showPlayButton, setShowPlayButton] = useState(false)
 
 

src/components/ImageWrapper/index.tsx

@@ -4,8 +4,8 @@ type ImageWrapperProps = {
     alt: string
 }
 
-// SSR warning to think about:
-// Warning: Prop `src` did not match. Server: "/github.svg" Client: "undefined/github.svg"
+// ImageWrapper component needed to selectively prefix URLs between development and production
+// TODO: Fix warning: Prop `src` did not match. Server: "/github.svg" Client: "undefined/github.svg"
 
 export default function ImageWrapper({ src, className, alt }: ImageWrapperProps) {
     return (

src/components/Input/index.tsx

@@ -17,7 +17,6 @@ export default function Input({ className, placeholder, defaultValue, value, isD
             defaultValue={defaultValue}
             value={value}
             disabled={isDisabled}
-            // title={isDisabled ? disabledTitle : ``}
             onChange={onChange}
         />
     )

src/components/Phone/index.tsx

@@ -1,6 +1,6 @@
-import Rectangle from "./Rectangle"
-import styles from "./Phone.module.css"
 import AnimatedSoundBars from "../AnimatedSoundBars"
+import styles from "./Phone.module.css"
+import Rectangle from "./Rectangle"
 
 type PhoneProps = {
     content: "reading" | "listening"

src/components/Player/BackgroundMusicThroughVideo.tsx

@@ -4,8 +4,10 @@ import { MutableRefObject, useEffect, useRef } from "react";
 
 export default function BackgroundMusicThroughVideo() {
     const isMobileOrTablet = useGenericStore((state) => state.isMobileOrTablet)
+
     const playerState = usePlayerStore((state) => state.playerState)
     const bgMusicVol = usePlayerStore((state) => state.bgMusicVol)
+
     const videoRef = useRef() as MutableRefObject<HTMLVideoElement>
 
     useEffect(() => {
@@ -50,6 +52,7 @@ export default function BackgroundMusicThroughVideo() {
 
     return (
         // Fixed position tiny invisible video
+        // TODO: process.env.NEXT_PUBLIC_LINK_PREFIX evaluates to undefined in development. Need to figure out why (already tried a lot).
         <video ref={videoRef} loop className="fixed top-0 left-0 -z-50 h-2 w-1 pointer-events-none opacity-0">
             <source src={`${process.env.NEXT_PUBLIC_LINK_PREFIX}/the-beat-of-nature-122841.mp4`} type="video/mp4" />
             Your browser does not support video playback.

src/components/Player/PlayerControls.tsx

@@ -1,11 +1,11 @@
+import { getIframeStatus } from "@/helpers/getIframeStatus";
 import { useArticleStore } from "@/stores/useArticleStore";
+import { useGenericStore } from "@/stores/useGenericStore";
+import { usePlayerStore } from "@/stores/usePlayerStore";
+import { MutableRefObject, useEffect, useRef } from "react";
 import AnimatedSoundBars from "../AnimatedSoundBars";
 import Button from "../Button";
-import { MutableRefObject, useEffect, useRef } from "react";
-import { usePlayerStore } from "@/stores/usePlayerStore";
 import BackgroundMusicThroughVideo from "./BackgroundMusicThroughVideo";
-import { useGenericStore } from "@/stores/useGenericStore";
-import { getIframeStatus } from "@/helpers/getIframeStatus";
 
 type SpeechEndReasonRef = "sentence-complete" | "pause" | "forward" | "rewind"
 
@@ -16,6 +16,7 @@ export default function PlayerControls() {
     const setIsPlayerOpen = useGenericStore((state) => state.setIsPlayerOpen)
 
     const sentences = useArticleStore((state) => state.sentences)
+
     const playerState = usePlayerStore((state) => state.playerState)
     const setPlayerState = usePlayerStore((state) => state.setPlayerState)
     const speakingSentenceIndex = usePlayerStore((state) => state.speakingSentenceIndex)
@@ -24,7 +25,6 @@ export default function PlayerControls() {
     const rate = usePlayerStore((state) => state.rate)
     const pitch = usePlayerStore((state) => state.pitch)
 
-
     // Get reference to the raw voice
     const rawVoiceToSpeakWith: SpeechSynthesisVoice | undefined = getRawVoiceToSpeakWith()
 

src/components/Player/PlayerHeader.tsx

@@ -1,24 +1,24 @@
+import { APP_APP_LINK, APP_HOME_LINK, GITHUB_INTEGRATE_ON_YOUR_BLOG_LINK, GITHUB_ISSUES_LINK, GITHUB_MORE_HELP_LINK } from "@/constants/appConstants";
 import { getSpeakingTimeText } from "@/helpers/getSpeakingTimeText";
 import { fireInstallPrompt } from "@/helpers/handlePwaLifeCycle/fireInstallPrompt";
 import { useArticleStore } from "@/stores/useArticleStore";
 import { useGenericStore } from "@/stores/useGenericStore";
 import { usePwaStore } from "@/stores/usePwaStore";
-import Button from "../Button";
 import { useState } from "react";
+import Button from "../Button";
 import Menu from "../Menu";
-import { APP_APP_LINK, APP_HOME_LINK, GITHUB_INTEGRATE_ON_YOUR_BLOG_LINK, GITHUB_ISSUES_LINK, GITHUB_MORE_HELP_LINK } from "@/constants/appConstants";
 
 
 export default function PlayerHeader() {
-    const isPwaInstallable = usePwaStore((state) => state.isPwaInstallable)
     const isMobileOrTablet = useGenericStore((state) => state.isMobileOrTablet)
     const tab = useGenericStore((state) => state.tab)
+    const setIsPlayerOpen = useGenericStore((state) => state.setIsPlayerOpen)
+
+    const isPwaInstallable = usePwaStore((state) => state.isPwaInstallable)
 
     const articleToSpeak = useArticleStore((state) => state.articleToSpeak)
     const articleLink = useArticleStore((state) => state.articleLink)
 
-    const setIsPlayerOpen = useGenericStore((state) => state.setIsPlayerOpen)
-
     const [isHelpOpen, setIsHelpOpen] = useState(false)
 
 

src/components/Player/SpeechSettings.tsx

@@ -1,16 +1,12 @@
-import { MutableRefObject, useEffect, useRef, useState } from "react";
-import Button from "../Button";
-import { VoicesDropdown } from "./VoicesDropdown";
-import StepInput from "./StepInput";
-import { usePlayerStore } from "@/stores/usePlayerStore";
 import { isLocalStorageSupported } from "@/helpers/isLocalStorageSupported";
-import { useGenericStore } from "@/stores/useGenericStore";
+import { usePlayerStore } from "@/stores/usePlayerStore";
+import { useEffect, useState } from "react";
+import Button from "../Button";
 import Menu from "../Menu";
+import StepInput from "./StepInput";
+import { VoicesDropdown } from "./VoicesDropdown";
 
 export default function SpeechSettings() {
-    const setShowToast = useGenericStore((state) => state.setShowToast)
-    const setToastType = useGenericStore((state) => state.setToastType)
-
     const rate = usePlayerStore((state) => state.rate)
     const pitch = usePlayerStore((state) => state.pitch)
     const bgMusicVol = usePlayerStore((state) => state.bgMusicVol)

src/components/Player/StepInput.tsx

@@ -1,6 +1,6 @@
-import Button from "../Button"
-import { Item, usePlayerStore } from "@/stores/usePlayerStore"
 import { SpeechSettingDefaultValues } from "@/constants/appConstants"
+import { Item, usePlayerStore } from "@/stores/usePlayerStore"
+import Button from "../Button"
 
 type StepInputProps = {
     label: string,

src/components/Player/index.tsx

@@ -1,10 +1,10 @@
+import { useIsFrequentListener } from "@/helpers/useIsFrequentListener"
+import { useGenericStore } from "@/stores/useGenericStore"
+import { usePlayerStore } from "@/stores/usePlayerStore"
+import { useEffect } from "react"
 import PlayerControls from "./PlayerControls"
 import PlayerHeader from "./PlayerHeader"
 import SpeechSettings from "./SpeechSettings"
-import { useEffect } from "react"
-import { useGenericStore } from "@/stores/useGenericStore"
-import { usePlayerStore } from "@/stores/usePlayerStore"
-import { useIsFrequentListener } from "@/helpers/useIsFrequentListener"
 
 // https://dev.to/jankapunkt/cross-browser-speech-synthesis-the-hard-way-and-the-easy-way-353
 

src/helpers/handleArticle/useSplitArticleToSentences.ts

@@ -1,7 +1,7 @@
 import { maxSentenceLength } from "@/constants/appConstants";
 import { useArticleStore } from "@/stores/useArticleStore";
-import { useEffect } from "react";
 import { useGenericStore } from "@/stores/useGenericStore";
+import { useEffect } from "react";
 
 export function useSplitArticleToSentences() {
     const isMobileOrTablet = useGenericStore((state) => state.isMobileOrTablet)

src/helpers/setUpWebSpeech/useChooseBestVoice.ts

@@ -12,6 +12,7 @@ import { isLocalStorageSupported } from "../isLocalStorageSupported";
 
 export function useChooseBestVoice() {
     const languageCodeOfArticleToSpeak = useArticleStore((state) => state.languageCodeOfArticleToSpeak)
+
     const voices = usePlayerStore((state) => state.voices)
     const setVoiceToSpeakWith = usePlayerStore((state) => state.setVoiceToSpeakWith)
 

src/helpers/useIsFrequentListener.ts

@@ -1,12 +1,13 @@
+import { FREQUENT_LISTENER_THRESHOLD } from "@/constants/appConstants";
+import { useGenericStore } from "@/stores/useGenericStore";
 import { useEffect } from "react";
 import { isLocalStorageSupported } from "./isLocalStorageSupported";
-import { useGenericStore } from "@/stores/useGenericStore";
-import { FREQUENT_LISTENER_THRESHOLD } from "@/constants/appConstants";
 
 // custom hook that increments count on every mount
 // Determine current frequent listener status and updates store variable
 export function useIsFrequentListener() {
     const setIsFrequentListener = useGenericStore((state) => state.setIsFrequentListener)
+
     useEffect(() => {
         if (isLocalStorageSupported()) {
             const data = window.localStorage.getItem("listenCount")
@@ -18,7 +19,7 @@ export function useIsFrequentListener() {
                     setIsFrequentListener(true)
             }
             else
-                window.localStorage.setItem("listenCount", `1`)
+                window.localStorage.setItem("listenCount", "1")
         }
     }, [])
 }

src/stores/useArticleStore.ts

@@ -46,5 +46,4 @@ export const useArticleStore = create<ArticleStoreState>(
         sentences: [],
         setSentences: (newValue: string[]) => set({ sentences: newValue }),
         setArticleStoreStringItem: (item, newValue) => set({ [item]: newValue }),
-
     }))

src/stores/usePlayerStore.ts

@@ -56,4 +56,5 @@ export const usePlayerStore = create<PlayerStoreState>(
         setPlayerState: (newValue: PlayerState) => set({ playerState: newValue }),
         speakingSentenceIndex: 0,
         setSpeakingSentenceIndex: (newValue: number) => set({ speakingSentenceIndex: newValue })
-    }))
+    })
+)

src/stores/usePwaStore.ts

@@ -9,4 +9,5 @@ export const usePwaStore = create<PwaStoreState>(
     (set) => ({
         isPwaInstallable: false,
         setIsPwaInstallable: (newValue) => set({ isPwaInstallable: newValue })
-    }))
+    })
+)