Refactor ReadAll content

components/OrganizedContent.tsx

@@ -35,23 +35,20 @@ export const OrganizedContent: React.FC<Props> = ({
 }) => {
   const isReadAll = headings[currentIndex].name === "Read All";
   const isMobile = false;
+  const readAllContent = headings
+    .filter((heading: { name: string }) => heading.name !== "Read All")
+    .map((heading) => (
+      <div key={heading.url}>
+        <h2 className={styles.contentHeading}>{heading.name}</h2>
+        {heading.content}
+      </div>
+    ));
 
   if (isMobile) {
     return (
       <div>
         {isReadAll ? (
-          <div>
-            {headings
-              .filter(
-                (heading: { name: string }) => heading.name !== "Read All"
-              )
-              .map((heading) => (
-                <div key={heading.url}>
-                  <h2 className={styles.contentHeading}>{heading.name}</h2>
-                  {heading.content}
-                </div>
-              ))}
-          </div>
+          <div>{readAllContent}</div>
         ) : (
           <h2 className={styles.contentHeading}>
             {headings[currentIndex].name}
@@ -67,18 +64,7 @@ export const OrganizedContent: React.FC<Props> = ({
         <Nav headings={headings} currentIndex={currentIndex} link={Link} />
         <div>
           {isReadAll ? (
-            <div>
-              {headings
-                .filter(
-                  (heading: { name: string }) => heading.name !== "Read All"
-                )
-                .map((heading) => (
-                  <div key={heading.url}>
-                    <h2 className={styles.contentHeading}>{heading.name}</h2>
-                    {heading.content}
-                  </div>
-                ))}
-            </div>
+            <div>{readAllContent}</div>
           ) : (
             <h2 className={styles.contentHeading}>
               {headings[currentIndex].name}