Merge remote-tracking branch 'benma/functional-entry'

thisconnect · Oct 19, 2022 · dd1cabb · dd1cabb
2 parents 37c5587 + d008aeb
commit dd1cabb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 68 deletions.
diff --git a/frontends/web/src/components/guide/entry.tsx b/frontends/web/src/components/guide/entry.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
+import { FunctionComponent, useState } from 'react';
 import A from '../anchor/anchor';
 import style from './guide.module.css';
 
@@ -28,73 +28,39 @@ export interface EntryProp {
 }
 
 interface EntryProps {
-    entry: EntryProp | string; // string could be the entry translation key in cimode, e.g. 'guide.waiting.1'.
+    entry: EntryProp;
     shown?: boolean;
-    highlighted?: boolean;
 }
 
 type Props = EntryProps;
 
-interface State {
-    shown: boolean;
-    highlighted: boolean;
-}
-
-export class Entry extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = {
-      shown: props.shown || props.highlighted || false,
-      highlighted: props.highlighted || false,
-    };
-  }
+export const Entry: FunctionComponent<Props> = props => {
+  const [shown, setShown] = useState<boolean>(props.shown || false);
 
-  private toggle = () => {
-    this.setState(state => ({
-      shown: !state.shown,
-      highlighted: false,
-    }));
+  const toggle = () => {
+    setShown(shown => !shown);
   };
 
-  public render() {
-    const props = this.props;
-    const {
-      shown,
-      highlighted,
-    } = this.state;
-    let entry: EntryProp;
-    if (typeof props.entry === 'string') {
-      entry = {
-        title: props.entry + '.title',
-        text: props.entry + '.text',
-        link: {
-          url: props.entry + '.link.url',
-          text: props.entry + '.link.text',
-        },
-      };
-    } else {
-      entry = props.entry;
-    }
-    return (
-      <div className={highlighted ? style.highlighted : style.entry}>
-        <div className={style.entryTitle} onClick={this.toggle}>
-          <div className={style.entryToggle}>{shown ? '–' : '+'}</div>
-          <div className={style.entryTitleText}>
-            <h2>{entry.title}</h2>
-          </div>
-        </div>
-        <div className={[style.entryContent, shown ? style.expanded : ''].join(' ')}>
-          {shown ? (
-            <div className="flex-1">
-              {entry.text.trim().split('\n').map(p => <p key={p}>{p}</p>)}
-              {entry.link && (
-                <p><A href={entry.link.url}>{entry.link.text}</A></p>
-              )}
-              {props.children}
-            </div>
-          ) : null}
+  const entry = props.entry;
+  return (
+    <div className={style.entry}>
+      <div className={style.entryTitle} onClick={toggle}>
+        <div className={style.entryToggle}>{shown ? '–' : '+'}</div>
+        <div className={style.entryTitleText}>
+          <h2>{entry.title}</h2>
         </div>
       </div>
-    );
-  }
-}
+      <div className={[style.entryContent, shown ? style.expanded : ''].join(' ')}>
+        {shown ? (
+          <div className="flex-1">
+            {entry.text.trim().split('\n').map(p => <p key={p}>{p}</p>)}
+            {entry.link && (
+              <p><A href={entry.link.url}>{entry.link.text}</A></p>
+            )}
+            {props.children}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
diff --git a/frontends/web/src/components/guide/guide.module.css b/frontends/web/src/components/guide/guide.module.css
@@ -88,12 +88,6 @@
     margin-top: var(--space-default);
 }
 
-.highlighted {
-    margin: 1.1em -1em;
-    padding: 0.5em 1em;
-    background-color: var(--color-darkblue);
-}
-
 .entryTitle {
     display: flex;
     flex-direction: row;
@@ -151,7 +145,7 @@
         transform: translateX(100%);
         transition-delay: 0.2s;
     }
-    
+
     .show {
         opacity: 1;
         z-index: 4002;