Merge branch 'main' into dsa

rupali-codes · Aug 10, 2023 · b8f9756 · b8f9756
2 parents 2a390cd + 940533e
commit b8f9756
Show file tree

Hide file tree

Showing 18 changed files with 266 additions and 69 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -6,9 +6,11 @@ import { GlobalContext } from 'context/GlobalContext'
 import { ThemeToggler } from '../ThemeToggler/themeToggler'
 import { TopBar } from '../TopBar/TopBar'
 import { SocialMediaIconsList } from 'components/SocialMedia/SocialMediaIconsList'
+import { useResults } from 'hooks/ResultsContext'
 
 export const Header: FC = () => {
   const { toggleNav } = useContext(GlobalContext)
+  const { results } = useResults()
 
   return (
     <header className="fixed top-0 left-0 z-30 row-start-1 row-end-2 flex h-[76px] w-screen items-center justify-between bg-light-primary dark:bg-dark">
@@ -18,7 +20,10 @@ export const Header: FC = () => {
         </Link>
       </div>
       <div className="bg-light-primary relative h-full grow px-8 dark:bg-dark lg:dark:bg-dark-primary">
-        <TopBar className="absolute left-8 hidden h-full md:flex" />
+        <TopBar
+          className="absolute left-8 hidden h-full md:flex"
+          results={results}
+        />
         <div className="absolute right-8 flex h-full gap-4">
           <SocialMediaIconsList className="hidden lg:flex" />
           <ThemeToggler />

diff --git a/components/TopBar/TopBar.tsx b/components/TopBar/TopBar.tsx
@@ -1,19 +1,38 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { FaSlackHash, FaInfoCircle } from 'react-icons/fa'
 import PopupDesc from 'components/popup/popupCategoryDesc'
 import { ICategoryData } from 'types'
 import categoryDescriptions from './CategoryDescriptions'
+import { useResults } from 'hooks/ResultsContext'
 import { Tooltip } from 'react-tooltip'
 
-export const TopBar: FC<{ className?: string | undefined }> = (props) => {
-  const { className } = props
+interface TopBarProps {
+  className?: string
+  results: number
+}
+
+export const TopBar: FC<TopBarProps> = ({ className }) => {
+  const { results } = useResults()
+  const [isSearchFound, setIsSearchFound] = useState(false)
   const [currentCategory, setCurrentCategory] = useState<ICategoryData | null>(
     null
   )
   const router = useRouter()
   const category = router.asPath.replace('/', '')
   const categoryName = category.split('-').join(' ')
+  const regEx = /[ `!@#$%^&*()_+\=\[\]{};':"\\|,.<>\/?~]/g
+   const cleanedCategory = category
+    .replaceAll(regEx, ' ')
+    .replaceAll('search query ', '')
+
+  useEffect(() => {
+    if (results > 0) {
+      setIsSearchFound(true)
+    } else if (results === 0) {
+      setIsSearchFound(false)
+    }
+  }, [results])
 
   if (router.pathname.length === 1) {
     return null
@@ -33,28 +52,78 @@ export const TopBar: FC<{ className?: string | undefined }> = (props) => {
   }
 
   return (
-    <div
-      className={`flex items-center text-xl dark:text-gray-300 ${className}`}
-    >
-      <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
-      <span className="text-gray-900 dark:text-gray-100 uppercase">
-        {category.split('-').join(' ')}
-      </span>
-      <button
-          data-tooltip-id="info-tooltip"
-          data-tooltip-content="Description"
-          data-tooltip-place="bottom"
+    <>
+      {regEx.test(category) ? (
+        <div
+          className={`flex items-center text-xl dark:text-gray-300 ${className}`}
+        >
+          <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
+          <span className="flex uppercase text-gray-900 dark:text-gray-100">
+            {isSearchFound
+              ? `${cleanedCategory}`
+              : `No Results Found`}
+          </span>
+          <button
+            data-tooltip-id="info-tooltip"
+            data-tooltip-content="Description"
+            data-tooltip-place="bottom"
+          >
+            <FaInfoCircle
+              className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
+              onClick={handleCardClick}
+            />
+          </button>
+          <Tooltip
+            id="info-tooltip"
+            style={{
+              backgroundColor: '#8b5cf6',
+              fontSize: '13px',
+              paddingLeft: '6px',
+              paddingRight: '6px',
+              paddingTop: '2px',
+              paddingBottom: '2px',
+            }}
+          />
+            <PopupDesc
+              currentCategory={currentCategory}
+              onClose={removeCurrentCard}
+            />
+        </div>
+      ) : (
+        <div
+          className={`flex items-center text-xl dark:text-gray-300 ${className}`}
         >
-          <FaInfoCircle
-            className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
-            onClick={handleCardClick}
+          <FaSlackHash className="mr-2 text-gray-600 dark:text-gray-300" />
+          <span className="flex uppercase text-gray-900 dark:text-gray-100">
+            {category.split('-').join(' ')}
+          </span>
+            <button
+            data-tooltip-id="info-tooltip"
+            data-tooltip-content="Description"
+            data-tooltip-place="bottom"
+          >
+            <FaInfoCircle
+              className="ml-4 mt-2 text-sm cursor-pointer hover:text-theme-primary"
+              onClick={handleCardClick}
+            />
+          </button>
+          <Tooltip
+            id="info-tooltip"
+            style={{
+              backgroundColor: '#8b5cf6',
+              fontSize: '13px',
+              paddingLeft: '6px',
+              paddingRight: '6px',
+              paddingTop: '2px',
+              paddingBottom: '2px',
+            }}
           />
-        </button>
-        <Tooltip id="info-tooltip" style={{ backgroundColor: '#8b5cf6', fontSize: '13px', paddingLeft: '6px', paddingRight: '6px', paddingTop: '2px', paddingBottom: '2px' }} />
-        <PopupDesc
-          currentCategory={currentCategory}
-          onClose={removeCurrentCard}
-        />
-    </div>
+            <PopupDesc
+              currentCategory={currentCategory}
+              onClose={removeCurrentCard}
+            />         
+        </div>
+      )}
+    </>
   )
 }
diff --git a/components/popup/popupInfo.tsx b/components/popup/popupInfo.tsx
@@ -55,7 +55,7 @@ export const PopupInfo: React.FC<{
             </div>
             <p className="">{currentCard?.description}</p>
           </div>
-          <div className="card-actions justify-end">
+          <div className="card-actions justify-end mt-auto">
             <a
               onClick={(e) => e.stopPropagation()}
               href={currentCard?.url}
@@ -66,6 +66,16 @@ export const PopupInfo: React.FC<{
               Visit site
             </a>
           </div>
+
+          {/* Close Text */}
+          <div className="flex justify-center items-center">
+            <p
+              onClick={onClose}
+              className="cursor-pointer text-sm text-text-primary -mt-3 hover:text-theme-primary hover:underline"
+            >
+              Close
+            </p>
+          </div>
         </div>,
         overlayRoot
       )}

diff --git a/database/cloud_computing_platforms/azure.json b/database/cloud_computing_platforms/azure.json
@@ -5,5 +5,12 @@
         "url": "https://learn.microsoft.com/en-us/azure/?product=popular",
         "category": "cloud computing",
         "subcategory": "azure"
+    },
+    {
+        "name": "Microsoft Learn & Certified",
+        "description": "Microsoft has certification paths for many technical job roles. Each of these certifications consists of passing a series of exams to earn them. ",
+        "url": "https://learn.microsoft.com/en-us/certifications/",
+        "category": "cloud computing",
+        "subcategory": "azure"
     }
 ]
diff --git a/database/competitive_programming/platforms.json b/database/competitive_programming/platforms.json
@@ -0,0 +1,16 @@
+[
+  {
+    "name": "LeetCode",
+    "description": "This site offers competitive coding challenges and interview preparation resources for software engineers and developers.",
+    "url": "https://leetcode.com/",
+    "category": "competitive_programming",
+    "subcategory": "platforms"
+  },
+  {
+    "name": "HackerRank",
+    "description": "This resource provides developers with competitive programming challenges to improve their skills in multiple languages. It also allows tech recruiters to assess developers on their problem-solving skills.",
+    "url": "https://www.hackerrank.com/",
+    "category": "competitive_programming",
+    "subcategory": "platforms"
+  }
+]
diff --git a/database/data.ts b/database/data.ts
@@ -260,4 +260,10 @@ export const sidebarData: ISidebar[] = [
       { name: 'communities', url: '/communities', resources: DB.communities },
     ],
   },
+  {
+    category: 'competitive_programming',
+    subcategory: [
+      { name: 'platforms', url: '/platforms', resources: DB.platforms },
+    ],
+  },
 ]
diff --git a/database/frontend/online-code-editors.json b/database/frontend/online-code-editors.json
@@ -83,20 +83,6 @@
     "category": "frontend",
     "subcategory": "online-code-editors"
   },
-  {
-    "name": "HackerRank",
-    "description": "An online IDE to practice your competitive programming skills. It allows you to code in multiple languages.",
-    "url": "https://www.hackerrank.com/",
-    "category": "frontend",
-    "subcategory": "online-code-editors"
-  },
-  {
-    "name": "LeetCode",
-    "description": "LeetCode is the best platform to help you enhance your programming skills, and expand your knowledge.",
-    "url": "https://leetcode.com/",
-    "category": "frontend",
-    "subcategory": "online-code-editors"
-  },
   {
     "name": "Programiz",
     "description": "Learn to program with our beginner-friendly tutorials and examples. Read tutorials, try examples, write code, and learn to program.",

diff --git a/database/index.ts b/database/index.ts
@@ -89,3 +89,5 @@ export { default as devtools } from './other/devtools.json'
 export { default as podcasts } from './other/podcasts.json'
 export { default as otherResources } from './other/other-resources.json'
 export { default as communities } from './other/communities.json'
+// competitive programming
+export {default as platforms } from './competitive_programming/platforms.json'
diff --git a/database/other/podcasts.json b/database/other/podcasts.json
@@ -12,5 +12,13 @@
     "url": "https://www.codenewbie.org/podcast",
     "category": "other",
     "subcategory": "podcasts"
+  },
+  {
+    "name": "Stackoverflow Podcast",
+    "description": " In Stack Overflow Podcast,  hosts Ben Popper, Cassidy Williams, and Ceora Ford explore what it means to work in software and how code is reshaping our world.",
+    "url": "https://stackoverflow.blog/podcast/",
+    "category": "other",
+    "subcategory": "podcasts"
   }
+
 ]
diff --git a/database/resources/e-book.json b/database/resources/e-book.json
@@ -46,5 +46,13 @@
     "category": "resource",
     "subcategory": "e-book",
     "language": "english"
+  },
+  {
+    "name": "Book Yard",
+    "description": "'The Library to the World', in which books, education materials, information, reference materials, documents, and content will be provided freely",
+    "url": "www.bookyards.com",
+    "category": "resource",
+    "subcategory": "e-book",
+    "language": "english"
   }
 ]
diff --git a/database/resources/official-docs.json b/database/resources/official-docs.json
@@ -79,10 +79,24 @@
     {
     "name": "Express",
     "description": "Express is a fast, unopinionated, and minimalist web framework for Node.js",
-    "url": "https://svelte.dev/docs/introduction",
+    "url": "https://expressjs.com",
+    "category": "resources",
+    "subcategory": "officialdocs"
+  } , 
+      {
+    "name": "Laravel",
+    "description": "Laravel is a web application framework with the expressive, elegant syntax",
+    "url": "https://laravel.com/",
+    "category": "resources",
+    "subcategory": "officialdocs"
+  },
+ {
+    "name": "Ember.js",
+    "description": "Ember.js is a productive, battle-tested JavaScript framework used for building modern web applications",
+    "url": "https://guides.emberjs.com/release/",
     "category": "resources",
     "subcategory": "officialdocs"
-  }
+  } 
 
 
 ]
diff --git a/database/youtube/data-structures.json b/database/youtube/data-structures.json
@@ -26,6 +26,7 @@
   {
     "name": "Kunal Kushwaha",
     "description": "This channel provides free Java-specific DSA course with interview preparation.",
+    "description": "This channel provides a free Java-specific DSA course with interview preparation.",
     "url": "https://youtube.com/playlist?list=PL9gnSGHSqcnr_DxHsP7AW9ftq0AtAyYqJ",
     "category": "youtube",
     "subcategory": "data-structures",
@@ -121,16 +122,20 @@
   },
   {
     "name": "CODING NINJAS",
+
     "description": "This channel provides a DSA and Python course from beginner to advanced.",
+
+    "description": "This channel provides a DSA course about Python from beginner to advanced.",
+
     "url": "https://youtube.com/playlist?list=PLrk5tgtnMN6TYBW0-U4YhIRyYEVpqVEnJ",
     "category": "youtube",
     "subcategory": "data-structures",
     "language": "english"
   },
   {
-    "name": "CampusX",
-    "description": "Since Python is a widely used language in the tech industry, a playlist that focuses on various aspects of this programming language would be a valuable addition to this website.",
-    "url": "https://www.youtube.com/watch?v=f9Aje_cN_CY&list=RDCMUCCWi3hpnq_Pe03nGxuS7isg&start_radio=1&rv=f9Aje_cN_CY&t=41378",
+    "name": "Data Structures - Full Course Using C and C++",
+    "description": "Learn about DSAs and how they are implemented in C or C++ in this comprehensive course by FreeCodeCamp. ",
+    "url": "https://www.youtube.com/watch?v=B31LgI4Y4DQ",
     "category": "youtube",
     "subcategory": "data-structures",
     "language": "english"

diff --git a/database/youtube/web-development.json b/database/youtube/web-development.json
@@ -302,5 +302,13 @@
     "category": "youtube",
     "subcategory": "web-development",
     "language": "english"
+  },
+  {
+    "name": "The Coder Coder",
+    "description": "This site provides practical tips for beginner web developers.",
+    "url": "https://www.youtube.com/c/TheCoderCoder",
+    "category": "youtube",
+    "subcategory": "web-development",
+    "language": "english"
   }
 ]
diff --git a/hooks/ResultsContext.tsx b/hooks/ResultsContext.tsx
@@ -0,0 +1,28 @@
+import React, { createContext, useContext, useState, ReactNode } from 'react'
+
+interface ResultsContextValue {
+  results: number
+  setResults: React.Dispatch<React.SetStateAction<number>>
+}
+
+const ResultsContext = createContext<ResultsContextValue | null>(null)
+
+export const ResultsProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [results, setResults] = useState<number>(-1)
+
+  return (
+    <ResultsContext.Provider value={{ results, setResults }}>
+      {children}
+    </ResultsContext.Provider>
+  )
+}
+
+export const useResults = () => {
+  const context = useContext(ResultsContext)
+  if (!context) {
+    throw new Error('useResults must be used within a ResultsProvider')
+  }
+  return context
+}