refactor: constant/index file refactored (#1561)

Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>

src/common/footer/ExtendedFooter.jsx

@@ -1,5 +1,5 @@
 import { useSearchContext } from 'common/search/search-context';
-import { CREATE_PLAY_DOC_LINK } from 'constants';
+import { PLAY_DOC_LINK } from 'constants';
 import LogoLight from 'images/img-logo-light.svg';
 import { BsGithub } from 'react-icons/bs';
 import { FaDiscord, FaLinkedin, FaMeetup } from 'react-icons/fa';
@@ -105,7 +105,7 @@ const ExtendedFooter = () => {
           <div className="my-4 py-4 mx-auto">
             <a
               className="btn-primary mr-2 mb-2"
-              href={CREATE_PLAY_DOC_LINK}
+              href={PLAY_DOC_LINK}
               rel="noopener noreferrer"
               target="_blank"
             >

src/common/header/HeaderNav.jsx

@@ -10,7 +10,7 @@ import SocialShare from 'common/components/SocialShare';
 import { GoX } from 'react-icons/go';
 import { Modal, Box, Typography, Menu } from '@mui/material';
 import { useSearchContext } from 'common/search/search-context';
-import { CREATE_PLAY_DOC_LINK, UMAMI_EVENTS } from 'constants';
+import { PLAY_DOC_LINK, UMAMI_EVENTS } from 'constants';
 
 const HeaderNav = ({ showBrowse }) => {
   const { showShareModal, setShowShareModal } = useSearchContext();
@@ -173,7 +173,7 @@ const HeaderNav = ({ showBrowse }) => {
                 className="app-header-btn app-header-btn--primary"
                 data-testid="create-btn"
                 data-umami-event={UMAMI_EVENTS.CREATE_PLAY_BUTTON}
-                href={CREATE_PLAY_DOC_LINK}
+                href={PLAY_DOC_LINK}
                 rel="noopener noreferrer"
                 target="_blank"
               >

src/common/playcreated/PlayCreated.jsx

@@ -4,7 +4,7 @@ import { toKebabCase } from 'common/services/string';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import './play-created.scss';
-import { CREATE_PLAY_DOC_LINK } from 'constants';
+import { PLAY_DOC_LINK } from 'constants';
 
 const PlayCreated = () => {
   const { playid } = useParams();
@@ -95,7 +95,7 @@ const PlayCreated = () => {
             Refer{' '}
             <a
               className="play-create-anchor"
-              href={CREATE_PLAY_DOC_LINK}
+              href={PLAY_DOC_LINK}
               rel="noopener noreferrer"
               target="_blank"
             >

src/common/playideas/PlayIdeas.jsx

@@ -4,7 +4,7 @@ import { IoAddSharp } from 'react-icons/io5';
 import { RiChatNewLine } from 'react-icons/ri';
 import LevelBadge from 'common/components/LevelBadge';
 import './playIdeas.css';
-import { CREATE_PLAY_DOC_LINK } from 'constants';
+import { PLAY_DOC_LINK } from 'constants';
 
 const PlayIdeas = () => {
   const [ideas, setIdeas] = useState([]);
@@ -145,7 +145,7 @@ const PlayIdeas = () => {
                   ) : (
                     <a
                       className="btn-primary action-btn"
-                      href={CREATE_PLAY_DOC_LINK}
+                      href={PLAY_DOC_LINK}
                       rel="noopener noreferrer"
                       target="_blank"
                     >

src/common/playlists/PlayList.jsx

@@ -4,7 +4,7 @@ import React, { Fragment, useEffect, useState } from 'react';
 import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
 import Loader from 'common/spinner/spinner';
 import * as all_plays from 'plays';
-import { SORT_BY } from 'constants';
+import { SORT_OPTIONS } from 'constants';
 import './playlist.css';
 import { toSanitized } from 'common/services/string';
 import DynamicBanner from './DynamicBanner';
@@ -110,7 +110,7 @@ const PlayList = () => {
       <div className="sort-by-plays-wrapper">
         Sort By :
         <select id="sort-by-plays" name="sort-by-plays" value={sortBy} onChange={onChange}>
-          {SORT_BY.map((name, i) => (
+          {SORT_OPTIONS.map((name, i) => (
             <option key={i} value={name}>
               {name}
             </option>

src/constants/index.js

@@ -1,7 +1,11 @@
-export const CREATE_PLAY_DOC_LINK = 'https://docs.reactplay.io/How-To-Guides/how-to-create-play';
-export const UMAMI_EVENTS = {
-  GITHUB_BUTTON: 'github-button',
-  CREATE_PLAY_BUTTON: 'create-play-button'
-};
+// URLs
+export const PLAY_DOC_LINK = 'https://docs.reactplay.io/How-To-Guides/how-to-create-play';
 
-export const SORT_BY = ['Newest', 'Oldest', 'Most Liked', 'Random'];
+// Event Types for Umami Analytics
+export const UMAMI_EVENTS = Object.freeze({
+  GITHUB_BUTTON_CLICK: 'github-button',
+  CREATE_PLAY_BUTTON_CLICK: 'create-play-button'
+});
+
+// Sorting Options for Plays
+export const SORT_OPTIONS = Object.freeze(['Newest', 'Oldest', 'Most Liked', 'Random']);

src/plays/navbar/Backgrounds.js

@@ -3,7 +3,7 @@ import ideas from './backgroundImages/bg_ideas.png';
 import join from './backgroundImages/bg_join.png';
 import create from './backgroundImages/bg_create.png';
 import search from './backgroundImages/bg_search.png';
-import { CREATE_PLAY_DOC_LINK } from 'constants';
+import { PLAY_DOC_LINK } from 'constants';
 const Backgrounds = [
   {
     id: 1,
@@ -40,7 +40,7 @@ const Backgrounds = [
     discription: 'Ready to create a new play? It is super easy, click down below to get started.',
     statement: 'Create Now',
     image: create,
-    url: CREATE_PLAY_DOC_LINK
+    url: PLAY_DOC_LINK
   },
   {
     id: 5,