Merge pull request #565 from StampyAI/sundry-fixes

show feedback form

app/components/Article/FeedbackForm/feedbackForm.css

@@ -42,18 +42,16 @@
 .action-feedback-text {
   display: none;
   position: absolute;
-  left: 180px;
-  text-wrap: nowrap;
-  top: 13px;
+  transform: translate(-1vw, var(--spacing-56));
 }
 .action-feedback-text.show {
   display: block;
 }
 .composite-button > .feedback-form {
   position: absolute;
-  left: 90px;
-  top: -342px;
   display: none;
+  transform: translate(-11vw, var(--spacing-56));
+  margin: var(--spacing-24);
 }
 .composite-button > .feedback-form.show {
   display: block;

app/components/Article/FeedbackForm/index.tsx

@@ -3,30 +3,17 @@ import Button from '~/components/Button'
 import './feedbackForm.css'
 
 export interface FeedbackFormProps {
-  /**
-   * Article ID
-   */
   pageid: string
-  /**
-   * Class name
-   */
   className?: string
-  /**
-   * onBlur
-   */
+  onClose?: () => void
   onBlur?: () => void
-  /**
-   * onFocus
-   */
   onFocus?: () => void
-  /**
-   * Has Options
-   */
   hasOptions?: boolean
 }
 const FeedbackForm = ({
   pageid,
   className = 'feedback-form',
+  onClose,
   onBlur,
   onFocus,
   hasOptions = true,
@@ -73,7 +60,9 @@ const FeedbackForm = ({
     [onBlur]
   )
 
-  const handleSubmit = () => {}
+  const handleSubmit = () => {
+    onClose && onClose()
+  }
 
   return (
     <div key={pageid} className={className} onBlur={handleBlur} onFocus={onFocus}>

app/components/Article/index.tsx

@@ -36,6 +36,11 @@ const ArticleFooter = (question: Question) => {
     return () => clearInterval(timeoutId)
   }, [showFeedbackForm, isFormFocused])
 
+  React.useEffect(() => {
+    const timeout = setInterval(() => setShowFeedback(false), 6000)
+    return () => clearInterval(timeout)
+  }, [showFeedback])
+
   return (
     !isLoading(question) && (
       <div className="footer-comtainer padding-bottom-40">
@@ -65,15 +70,19 @@ const ArticleFooter = (question: Question) => {
             actionType={ActionType.UNHELPFUL}
             onSuccess={() => setShowFeedbackForm(true)}
           />
-          <span className={['action-feedback-text', showFeedback ? 'show' : ''].join(' ')}>
+          <div className={['action-feedback-text', showFeedback ? 'show' : ''].join(' ')}>
             Thanks for your feedback!
-          </span>
+          </div>
           <FeedbackForm
             pageid={question.pageid}
             className={['feedback-form', showFeedbackForm ? 'show' : ''].join(' ')}
+            onClose={() => {
+              setShowFeedback(true)
+              setShowFeedbackForm(false)
+            }}
             onBlur={() => setIsFormFocused(false)}
             onFocus={() => setIsFormFocused(true)}
-            hasOptions={false}
+            hasOptions={true}
           />
         </CompositeButton>
       </div>

app/components/ArticlesDropdown/index.tsx

@@ -2,7 +2,7 @@ import {useState, useEffect} from 'react'
 import {Link as LinkElem} from '@remix-run/react'
 import type {Tag} from '~/server-utils/stampy'
 import {TOCItem, Category, ADVANCED, INTRODUCTORY} from '~/routes/questions.toc'
-import {sortFuncs} from '~/routes/tags.$'
+import {sortFuncs} from '~/routes/categories.$'
 import {questionUrl, tagsUrl, tagUrl} from '~/routesMapper'
 import Button from '~/components/Button'
 import './dropdown.css'

app/components/ContentBox/index.tsx

@@ -62,23 +62,23 @@ export const ContentBoxMain = () => (
 )
 
 export const ContentBoxSecond = () => {
-  const article = {pageid: '9TDI', title: 'Not convinced? Explore the arguments.'}
+  const article = {pageid: '9TDI', title: 'Objections and responses'}
   return (
     <ContentBox
-      title="Not convinced?"
+      title="Objections and responses"
       action={questionUrl(article)}
-      actionTitle="Explore the arguments"
+      actionTitle="Explore the debate"
     >
       <ListTable
         sameTab
         elements={[
-          {title: 'What are the main sources of AI existential risk?', pageid: '8503'},
+          {title: 'Why can’t we just use Asimov’s Three Laws of Robotics?', pageid: '6224'},
           {
-            title: 'Do people seriously worry about existential risk from AI?',
-            pageid: '6953',
+            title: 'Why would misaligned AI pose a threat that we can’t deal with?',
+            pageid: 'MNAK',
             className: 'desktop-only',
           },
-          {title: 'Why would an AI do bad things?', pageid: '2400'},
+          {title: 'Isn’t the real concern with AI something else?', pageid: '1001'},
         ]}
       />
     </ContentBox>

app/hooks/useCachedObjects.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useState, createContext, useContext, ReactElement} from 'react'
 import type {Tag, Glossary} from '~/server-utils/stampy'
-import {fetchTags} from '~/routes/tags.all'
+import {fetchTags} from '~/routes/categories.all'
 import {fetchTOC, TOCItem} from '~/routes/questions.toc'
 import {fetchGlossary} from '~/routes/questions.glossary'
 

app/routes/tags.$.tsx → app/routes/categories.$.tsx

@@ -2,7 +2,7 @@ import {useState, useEffect} from 'react'
 import {useLoaderData} from '@remix-run/react'
 import Page from '~/components/Page'
 import ListTable from '~/components/Table'
-import {loader} from '~/routes/tags.all'
+import {loader} from '~/routes/categories.all'
 import {CategoriesNav} from '~/components/CategoriesNav/Menu'
 import type {Tag as TagType} from '~/server-utils/stampy'
 import useIsMobile from '~/hooks/isMobile'

app/routes/questions.actions.tsx

@@ -1,7 +1,7 @@
 import {useState, useEffect, MouseEvent, useCallback, ReactNode} from 'react'
 import type {ActionFunctionArgs} from '@remix-run/cloudflare'
 import {Form, useSearchParams} from '@remix-run/react'
-import {redirect, json} from '@remix-run/cloudflare'
+import {json} from '@remix-run/cloudflare'
 import {makeColumnIncrementer} from '~/server-utils/stampy'
 import ThumbUpIcon from '~/components/icons-generated/ThumbUp'
 import ThumbDownIcon from '~/components/icons-generated/ThumbDown'
@@ -83,9 +83,7 @@ export const action = async ({request}: ActionFunctionArgs) => {
     console.log(`Got unhandled action: ${actionType} for page ${pageid}`)
   }
 
-  const state = formData.get('stateString')
-  if (state) return redirect(`/?state=${state}`)
-  return redirect('/')
+  return {result: 'ok'}
 }
 
 type Props = {
@@ -146,8 +144,11 @@ export const Action = ({
     })
     const response = await fetch('/questions/actions', {method: 'POST', body: searchParams})
 
-    if (response.ok !== true) setActionTaken(!actionTaken)
-    else if (onSuccess) onSuccess()
+    if (response.ok !== true) {
+      setActionTaken(!actionTaken)
+    } else if (onSuccess) {
+      onSuccess()
+    }
   }
 
   const className = 'secondary icon-link' + (actionTaken ? ' focused' : '')