Merge branch 'master' into jacob/profile-menu

.github/workflows/build-and-deploy.yml

@@ -12,23 +12,29 @@ jobs:
   build_and_deploy:
     name: Build and deploy PeterPortal
     runs-on: ubuntu-latest
+    if: (github.event_name != 'pull_request' || !contains(github.event.pull_request.labels.*.name, 'no deploy'))
+    environment:
+      name: ${{ (github.event_name == 'pull_request' && format('staging-{0}', github.event.pull_request.number)) || 'production'  }}
+      url: https://${{ (github.event_name == 'pull_request' && format('staging-{0}.peterportal.org', github.event.pull_request.number)) || 'peterportal.org' }}
 
     concurrency:
-      group: build-${{ github.head_ref || github.run_id }}
+      group: build-and-deploy-${{ github.head_ref || github.run_id }}
       cancel-in-progress: true
 
     steps:
       - name: Check Out Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
           cache: 'npm'
 
       - name: Install Dependencies
         run: npm install
+        env:
+          HUSKY: 0
 
       - name: Build and deploy
         run: npx sst deploy --stage ${{ (github.event_name == 'pull_request' && format('staging-{0}', github.event.pull_request.number)) || 'prod'  }}
@@ -46,11 +52,3 @@ jobs:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           NODE_ENV: ${{ github.event_name == 'pull_request' && 'staging' || 'production' }}
-
-      - name: Comment staging URL
-        uses: marocchino/sticky-pull-request-comment@v2
-        if: ${{ github.event_name == 'pull_request' }}
-        with:
-          header: staging url
-          recreate: true
-          message: Deployed staging instance to https://staging-${{ github.event.pull_request.number }}.peterportal.org

.github/workflows/clean-up-pr.yml

@@ -7,7 +7,7 @@ on:
       - master
 
 concurrency:
-  group: deploy-${{ github.head_ref || github.run_id }}
+  group: clean-up-pr-${{ github.head_ref || github.run_id }}
 
 jobs:
   clean-up-pr:
@@ -18,16 +18,18 @@ jobs:
 
     steps:
       - name: Check Out Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
           cache: 'npm'
 
       - name: Install Dependencies
         run: npm install
+        env:
+          HUSKY: 0
 
       - name: Remove staging stack
         run: npx sst remove --stage ${{ format('staging-{0}', github.event.pull_request.number) }} backend && npx sst remove --stage ${{ format('staging-{0}', github.event.pull_request.number) }} frontend
@@ -44,3 +46,10 @@ jobs:
           PRODUCTION_DOMAIN: ${{secrets.PRODUCTION_DOMAIN}}
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+
+      - name: Deactivate deployment
+        uses: strumwolf/[email protected]
+        with:
+          environment: ${{ format('staging-{0}', github.event.pull_request.number) }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          onlyDeactivateDeployments: true

.github/workflows/lint.yml

@@ -16,16 +16,18 @@ jobs:
 
     steps:
       - name: Check Out Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: '18'
           cache: 'npm'
 
       - name: Install Dependencies
         run: npm install
+        env:
+          HUSKY: 0
 
       - name: Lint
         run: npm run lint

site/.eslintrc.cjs

@@ -14,6 +14,11 @@ module.exports = {
   rules: {
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
     'react/no-unescaped-entities': 'off',
-    'no-console': 'warn',
+    'no-console': ['warn', { allow: ['warn', 'error'] }],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
   },
 };

site/src/component/GradeDist/Pie.tsx

@@ -187,6 +187,7 @@ export default class Pie extends React.Component<PieProps> {
         <div
           style={{
             position: 'absolute',
+            pointerEvents: 'none',
             top: '50%',
             left: '50%',
             transform: 'translate(-50%, -50%)',

site/src/component/SearchHitContainer/SearchHitContainer.scss

@@ -2,3 +2,23 @@
   padding-top: 2vh;
   overflow-y: auto;
 }
+
+.no-results {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  font-size: 1.5rem;
+  padding: 2rem;
+  text-align: center;
+
+  img {
+    width: 400px;
+    max-width: 100%;
+  }
+}
+
+.search-pagination {
+  display: flex;
+  justify-content: center;
+}

site/src/component/SearchHitContainer/SearchHitContainer.tsx

@@ -4,42 +4,72 @@ import './SearchHitContainer.scss';
 import { useAppSelector } from '../../store/hooks';
 
 import { SearchIndex, CourseGQLData, ProfessorGQLData } from '../../types/types';
+import SearchPagination from '../SearchPagination/SearchPagination';
+import noResultsImg from '../../asset/no-results-crop.webp';
+import { useFirstRender } from '../../hooks/firstRenderer';
 
+// TODO: CourseHitItem and ProfessorHitem should not need index
+// investigate: see if you can refactor respective components to use course id/ucinetid for keys instead then remove index from props
 interface SearchHitContainerProps {
   index: SearchIndex;
   CourseHitItem: FC<CourseGQLData & { index: number }>;
   ProfessorHitItem?: FC<ProfessorGQLData & { index: number }>;
 }
 
+const SearchResults = ({
+  index,
+  results,
+  CourseHitItem,
+  ProfessorHitItem,
+}: Required<SearchHitContainerProps> & { results: CourseGQLData[] | ProfessorGQLData[] }) => {
+  if (index === 'courses') {
+    return (results as CourseGQLData[]).map((course, i) => <CourseHitItem key={course.id} index={i} {...course} />);
+  } else {
+    return (results as ProfessorGQLData[]).map((professor, i) => (
+      <ProfessorHitItem key={professor.ucinetid} index={i} {...professor} />
+    ));
+  }
+};
+
 const SearchHitContainer: FC<SearchHitContainerProps> = ({ index, CourseHitItem, ProfessorHitItem }) => {
-  const courseResults = useAppSelector((state) => state.search.courses.results);
-  const professorResults = useAppSelector((state) => state.search.professors.results);
+  const { names, results } = useAppSelector((state) => state.search[index]);
   const containerDivRef = useRef<HTMLDivElement>(null);
+  const isFirstRender = useFirstRender();
 
   useEffect(() => {
     containerDivRef.current!.scrollTop = 0;
-  }, [courseResults, professorResults]);
+  }, [results]);
 
   if (index == 'professors' && !ProfessorHitItem) {
     throw 'Professor Component not provided';
   }
 
+  /**
+   * if its first render, we are waiting for initial results
+   * if names is non-empty but results is empty, we are waiting for results
+   * otherwise, if results is still empty, we have no results for the search
+   */
+  const noResults = results.length === 0 && !(isFirstRender || names.length > 0);
+
   return (
     <div ref={containerDivRef} className="search-hit-container">
-      {index == 'courses' && (
-        <>
-          {courseResults.map((course, i) => {
-            return <CourseHitItem key={`course-hit-item-${i}`} index={i} {...(course as CourseGQLData)} />;
-          })}
-        </>
+      {noResults && (
+        <div className="no-results">
+          <img src={noResultsImg} alt="No results found" />
+          Sorry, we couldn't find any results for that search!
+        </div>
       )}
-      {index == 'professors' && ProfessorHitItem && (
-        <>
-          {professorResults.map((professor, i) => {
-            return <ProfessorHitItem key={`professor-hit-item-${i}`} index={i} {...(professor as ProfessorGQLData)} />;
-          })}
-        </>
+      {results.length > 0 && (
+        <SearchResults
+          index={index}
+          results={results}
+          CourseHitItem={CourseHitItem}
+          ProfessorHitItem={ProfessorHitItem!}
+        />
       )}
+      <div className="search-pagination">
+        <SearchPagination index={index} />
+      </div>
     </div>
   );
 };