Merge branch 'master' of https://github.com/shaubby/usaco-guide into shaubby-master

thecodingwizard · thecodingwizard · commit fce3fb828043 · 2023-02-28T01:15:26.000-05:00
diff --git a/src/components/markdown/FocusProblem.tsx b/src/components/markdown/FocusProblem.tsx
@@ -1,7 +1,10 @@
 import { ExternalLinkIcon } from '@heroicons/react/solid';
 import * as React from 'react';
+import { Instance } from 'tippy.js';
+import { useDarkMode } from '../../context/DarkModeContext';
 import { useMarkdownProblemLists } from '../../context/MarkdownProblemListsContext';
 import { getProblemURL, ProblemInfo } from '../../models/problem';
+import ProblemsListItemDropdown from './ProblemsList/ProblemsListItemDropdown';
 import ProblemStatusCheckbox from './ProblemsList/ProblemStatusCheckbox';
 
 export default function FocusProblem({
@@ -22,9 +25,13 @@ export default function FocusProblem({
       `The focus problem list ${problemID} should have exactly one problem.`
     );
   }
+  const darkMode = useDarkMode();
 
   const problem: ProblemInfo = problemList.problems[0];
 
+  const tippyRef = React.useRef<Instance>();
+  const [isDropdownShown, setIsDropdownShown] = React.useState(false);
+
   // transform must go in the isHovered condition
   // See https://github.com/thecodingwizard/usaco-guide/issues/198
   // transform creates a new stacking context :(
@@ -65,6 +72,17 @@ export default function FocusProblem({
             </div>
           </div>
           <div className="flex-shrink-0 flex items-center justify-center mt-1 sm:mr-2 ml-2">
+            <div className="mr-2">
+              <ProblemsListItemDropdown
+                onShowSolutionSketch={(problem: ProblemInfo) => {
+                  return problem;
+                }}
+                problem={problem}
+                showTags={true}
+                showDifficulty={true}
+                isFocusProblem={true}
+              />
+            </div>
             <ProblemStatusCheckbox problem={problem} size="large" />
           </div>
         </div>
diff --git a/src/components/markdown/ProblemsList/ProblemsListItem.tsx b/src/components/markdown/ProblemsList/ProblemsListItem.tsx
@@ -1,5 +1,3 @@
-import Tippy from '@tippyjs/react';
-import { navigate } from 'gatsby';
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 import { Instance } from 'tippy.js';
@@ -167,52 +165,6 @@ export default function ProblemsListItem(
   const tippyRef = React.useRef<Instance>();
   const [isDropdownShown, setIsDropdownShown] = React.useState(false);
 
-  const more = (
-    <div>
-      <Tippy
-        onCreate={tippy => (tippyRef.current = tippy)}
-        content={
-          isDropdownShown ? (
-            <ProblemsListItemDropdown
-              {...props}
-              onViewProblemSolutions={() => {
-                tippyRef.current.hide();
-                navigate('/problem-solutions/', {
-                  state: {
-                    problem,
-                  },
-                });
-              }}
-            />
-          ) : (
-            ''
-          )
-        }
-        theme={darkMode ? 'dark' : 'light'}
-        placement="bottom-end"
-        arrow={true}
-        animation="fade"
-        trigger="click"
-        interactive={true}
-        onShow={() => setIsDropdownShown(true)}
-        onHidden={() => setIsDropdownShown(false)}
-      >
-        <button className="focus:outline-none w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 dark:hover:text-gray-300">
-          {/* Heroicon name: solid/dots-vertical */}
-          <svg
-            className="w-5 h-5"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 20 20"
-            fill="currentColor"
-            aria-hidden="true"
-          >
-            <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
-          </svg>
-        </button>
-      </Tippy>
-    </div>
-  );
-
   return (
     <StyledProblemRow id={id} isActive={isActive}>
       {statusCol}
@@ -252,7 +204,9 @@ export default function ProblemsListItem(
           )}
         </td>
       )}
-      <td className="text-center pr-2 md:pr-3">{more}</td>
+      <td className="text-center pr-2 md:pr-3">
+        <ProblemsListItemDropdown {...props} isFocusProblem={false} />
+      </td>
     </StyledProblemRow>
   );
 }
diff --git a/src/components/markdown/ProblemsList/ProblemsListItemDropdown.tsx b/src/components/markdown/ProblemsList/ProblemsListItemDropdown.tsx
@@ -1,22 +1,30 @@
+import Tippy from '@tippyjs/react';
+import { navigate } from 'gatsby';
 import React from 'react';
+import { Instance } from 'tippy.js';
+import { useDarkMode } from '../../../context/DarkModeContext';
 import useUserSolutionsForProblem from '../../../hooks/useUserSolutionsForProblem';
 import { isUsaco } from '../../../models/problem';
 import TextTooltip from '../../Tooltip/TextTooltip';
 import ProblemListItemSolution from './ProblemListItemSolution';
 import { ProblemsListItemProps } from './ProblemsListItem';
 
 export default function ProblemsListItemDropdown(
-  props: ProblemsListItemProps & { onViewProblemSolutions: () => void }
+  props: ProblemsListItemProps & { isFocusProblem: boolean }
 ) {
   const [copied, setCopied] = React.useState(false);
 
   const problem = props.problem;
+  const isFocusProblem = props.isFocusProblem;
+  console.log(isFocusProblem);
   const { solutions, currentUserSolutions } =
     useUserSolutionsForProblem(problem);
 
   let viewSolutionsContent = (
     <>View User Solutions ({solutions?.length ?? '...'})</>
   );
+
+  const darkMode = useDarkMode();
   if (currentUserSolutions?.length) {
     viewSolutionsContent = (
       <>
@@ -40,47 +48,99 @@ export default function ProblemsListItemDropdown(
       </>
     );
   }
+  let solutionContent = <></>;
+  if (!isFocusProblem) {
+    solutionContent = (
+      <ProblemListItemSolution
+        problem={props.problem}
+        onShowSolutionSketch={props.onShowSolutionSketch}
+      />
+    );
+  }
+
+  const tippyRef = React.useRef<Instance>();
+  const [isDropdownShown, setIsDropdownShown] = React.useState(false);
+
+  const onViewProblemSolutions = () => {
+    tippyRef.current.hide();
+    navigate('/problem-solutions/', {
+      state: {
+        problem,
+      },
+    });
+  };
+
   return (
     <div className="-mx-2 text-left">
       <div>
-        <ProblemListItemSolution
-          problem={props.problem}
-          onShowSolutionSketch={props.onShowSolutionSketch}
-        />
-        <button
-          type="button"
-          className="focus:outline-none block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900"
-          onClick={props.onViewProblemSolutions}
-        >
-          {viewSolutionsContent}
-        </button>
-        <button
-          type="button"
-          className="focus:outline-none block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900"
-          onClick={e => {
-            e.preventDefault();
-            setCopied(true);
-            navigator.clipboard.writeText(
-              window.location.href.split(/[?#]/)[0] +
-                '#problem-' +
-                problem.uniqueId
-            );
-          }}
+        <Tippy
+          onCreate={tippy => (tippyRef.current = tippy)}
+          content={
+            isDropdownShown ? (
+              <div>
+                {solutionContent}
+
+                <button
+                  type="button"
+                  className="focus:outline-none block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900"
+                  onClick={onViewProblemSolutions}
+                >
+                  {viewSolutionsContent}
+                </button>
+                <button
+                  type="button"
+                  className="focus:outline-none block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900"
+                  onClick={e => {
+                    e.preventDefault();
+                    setCopied(true);
+                    navigator.clipboard.writeText(
+                      window.location.href.split(/[?#]/)[0] +
+                        '#problem-' +
+                        problem.uniqueId
+                    );
+                  }}
+                >
+                  {copied ? 'Copied!' : 'Copy Permalink'}
+                </button>
+                {isUsaco(problem.source) && (
+                  <a
+                    className="!font-normal focus:outline-none block w-full text-left px-4 py-2 text-sm !text-gray-700 dark:!text-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800 hover:!text-gray-900"
+                    href={`https://ide.usaco.guide/usaco/${problem.uniqueId.substring(
+                      problem.uniqueId.indexOf('-') + 1
+                    )}`}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    Open in IDE
+                  </a>
+                )}
+              </div>
+            ) : (
+              ''
+            )
+          }
+          theme={darkMode ? 'dark' : 'light'}
+          placement="bottom-end"
+          arrow={true}
+          animation="fade"
+          trigger="click"
+          interactive={true}
+          onShow={() => setIsDropdownShown(true)}
+          onHidden={() => setIsDropdownShown(false)}
         >
-          {copied ? 'Copied!' : 'Copy Permalink'}
-        </button>
-        {isUsaco(problem.source) && (
-          <a
-            className="!font-normal focus:outline-none block w-full text-left px-4 py-2 text-sm !text-gray-700 dark:!text-gray-300 hover:!bg-gray-100 dark:hover:!bg-gray-800 hover:!text-gray-900"
-            href={`https://ide.usaco.guide/usaco/${problem.uniqueId.substring(
-              problem.uniqueId.indexOf('-') + 1
-            )}`}
-            target="_blank"
-            rel="noreferrer"
-          >
-            Open in IDE
-          </a>
-        )}
+          <button className="focus:outline-none w-8 h-8 inline-flex items-center justify-center text-gray-400 rounded-full bg-transparent hover:text-gray-500 dark:hover:text-gray-300">
+            {/* Heroicon name: solid/dots-vertical */}
+            <svg
+              className="w-5 h-5"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+            </svg>
+          </button>
+        </Tippy>
       </div>
     </div>
   );
