Version 3.5.7 - Read full commit

* Fix bold text regex
* Restructure the bookwork listing to maintain 1 responsibility principle
* Add button for deleting a bookwork item

extension/manifest.json

@@ -1,6 +1,6 @@
 {
     "name": "Azalea",
-    "version": "3.5.6",
+    "version": "3.5.7",
     "description": "The cutest SparxMaths extension for Chromium ~!",
     "manifest_version": 3,
     "author": "Rosie",

src/core/components/katex/constants.ts

@@ -17,7 +17,7 @@ export const patterns = {
     hazardousComma: /(?<!\s)\\,/g,
     hazardousCharacters: /[&<>"']/,
     maths: /\$|(?:\\.|[^$])+/g,
-    bold: /\*\*(.*)\*\*/g
+    bold: /\*\*(.*?)\*\*/g
 };
 
 export const brackets = {

src/core/handlers/bookwork.ts

@@ -34,7 +34,9 @@ export function validateItem(item: unknown) {
 }
 
 export function validateAnswers(answers: unknown) {
-    if (!Array.isArray(answers) || !answers.every(answer => typeof answer === 'string')) {
+    if (!Array.isArray(answers)
+        || !answers.every(answer => typeof answer === 'string')
+    ) {
         return { valid: false, answers: null };
     }
 

src/core/patches/menu/bookwork/Answer.tsx

@@ -0,0 +1,59 @@
+import components from '@core/components';
+import Row from '@core/components/row';
+import { common } from '@core/modules';
+import { storages } from '@core/handlers/state';
+import { commonStyles } from '@core/stylesheet';
+import { AnswerProps } from '@azalea/bookwork';
+import { styles } from './bookwork.styles';
+
+const { React } = common;
+const { bookwork } = storages;
+
+export default function Answer({ index, store, array, code, plural, answers, forceRender }: AnswerProps) {
+    const { textAnswers, imageAnswers } = answers;
+
+    return <React.Fragment key={index}>
+        <Row 
+            label={'Question:'}
+            sublabel={store.id}
+            trailing={<div style={commonStyles.merge(x => [x.flex, x.row])}>
+                <div 
+                    style={{ 
+                        marginTop: '0.5em', 
+                        marginRight: '0.5em'
+                    }}
+                >
+                    <h6 style={{ color: 'var(--palette-dark-blue-90)'}}>Date stored:</h6>
+                    <h4 style={{ fontWeight: 'normal' }}>
+                        {new Date(store.date).toLocaleString()}
+                    </h4>
+                </div>
+                <components.SolidButton 
+                    text={'✖'}
+                    style={styles.delete}
+                    onClick={() => {
+                        bookwork.set(code, bookwork.get(code).filter(item => item.id !== store.id));
+                        forceRender({});
+                    }}
+                />
+            </div>}
+            centerTrailing={false}
+        />
+        <components.Dividers.Small />
+        <Row 
+            label={`Answer${plural}:`}
+            sublabel={<div>
+                {imageAnswers.length > 0 && (
+                    <div style={commonStyles.merge(x => [x.flex, x.row, styles.images])}>
+                        {imageAnswers.map((answer, idx) => <img src={answer} key={idx} />)}
+                    </div>
+                )}
+                {textAnswers.length > 0 && <components.TextWithMaths 
+                    text={textAnswers.join('$,\\;\\;$')}
+                    style={{ margin: 0, padding: 0 }}
+                />}
+            </div>}
+        />
+        {index !== array.length - 1 && <components.Dividers.Large />}
+    </React.Fragment>;
+}

src/core/patches/menu/bookwork/Bookwork.tsx

@@ -9,58 +9,18 @@ import { validateData, validateItem, validateAnswers } from '@core/handlers/book
 import Toggle from './Toggle';
 import Listing from './Listing';
 import logger from '@core/logger';
+import { merge, styles } from './bookwork.styles';
 
 const { React } = common;
 const { navigate } = utilities;
 const { bookwork } = storages;
-const { merge, styles } = createStyleSheet({
-    common: {
-        marginLeft: '1em'
-    },
-
-    input: {
-        borderRadius: '10em', 
-        height: 'auto'
-    },
-
-    message: {
-        marginInline: '2em',
-        background: 'var(--palette-light-blue-20)'
-    },
-
-    navigation: {
-        marginBlock: '1em'
-    },
-
-    collapsable: {
-        overflow: 'hidden',
-        transition: 'max-height 300ms ease, opacity 300ms ease'
-    },
-
-    answers: {
-        fontSize: '1.25rem', 
-        justifyContent: 'end',
-        marginRight: '2em'
-    },
-
-    actions: {
-        justifyContent: 'start',
-        marginInline: '2em',
-        gap: '0.5em',
-        flexGrow: 1
-    },
-
-    paragraph: {
-        marginBlock: 0, 
-        marginRight: '0.25em'
-    }
-});
+
 
 function Bookwork() {
     const [enabled, setEnabled] = useStorageValue<boolean>('autoBookwork', 'preferences');
     const [query, setQuery] = React.useState<string>('');
     const [force, forceRender] = React.useState({});
-    const listing = React.useMemo(() => bookwork.list(), [query, force]);
+    const listing = React.useMemo(() => bookwork.list(), [force]);
 
     return <>
         <div style={commonStyles.merge(x => [x.flex, x.justify, x.row, styles.navigation])}>
@@ -226,7 +186,7 @@ function Bookwork() {
             </components.SectionBody>
         </div>
 
-        <Listing query={query} force={force} listing={listing} />
+        <Listing query={query} listing={listing} forceRender={forceRender} />
     </>;
 }
 

src/core/patches/menu/bookwork/Listing.tsx

@@ -1,24 +1,12 @@
 import components from '@core/components';
 import { common } from '@core/modules';
-import { createStyleSheet, commonStyles } from '@core/stylesheet';
-import { TextWithMaths } from '@core/components/katex';
+import { commonStyles } from '@core/stylesheet';
 import { ListingProps } from '@azalea/bookwork';
+import { styles } from './bookwork.styles';
+import AnswerSection from './Section';
 
 const { React } = common;
-const { Section, SectionBody, Row, Dividers } = components;
-const { styles } = createStyleSheet({
-    fallback: {
-        marginInline: '2em',
-        paddingBlock: '1em',
-        background: 'var(--palette-light-blue-20)',
-    },
-
-    images: {
-        maxWidth: '20%', 
-        gap: '1em', 
-        marginBlock: '0.5em'
-    }
-});
+const { SectionBody } = components;
 
 function sortCodes([a]: [string, any[]], [b]: [string, any[]]) {
     const numberA = Number(a.slice(0, -1));
@@ -33,65 +21,19 @@ function sortCodes([a]: [string, any[]], [b]: [string, any[]]) {
     return letterA.localeCompare(letterB);
 }
 
-function Listing({ query, listing }: ListingProps) {
+function Listing({ query, listing, forceRender }: ListingProps) {
     const entries = React.useMemo(
         () => Object.entries(listing).filter(([k]) => k.toLowerCase().includes(query.toLowerCase())), 
-        [listing]
+        [listing, query]
     );
 
     return entries.length > 0 ? entries.sort(sortCodes).map(([key, value]: [string, any[]]) => {
-        return value.length > 0 && <Section title={key} key={key}>
-            {value
-                .filter(store => Array.isArray(store.answers) && store.answers.length > 0)
-                .sort((a, b) => b.date - a.date)
-                .map((store, index, array) => {
-                    // Add 's' to the word 'Answer' if the amount of answers is more than 1
-                    // You will never have 0 or -1 answers due to the filter above
-                    // Therefore 'len > 1' is valid for this use case
-                    const plural = store.answers.length > 1 ? 's' : '';
-
-                    // Convert plain numbers to latex formatting
-                    const answers = store.answers.map(answer => isNaN(+answer) ? answer : `$${answer}$`);
-                    const imageAnswers = answers.filter(answer => answer.includes('assets.sparxhomework.uk'));
-                    const textAnswers = answers.filter(answer => !answer.includes('assets.sparxhomework.uk'));
-
-                    return <React.Fragment key={index}>
-                        <Row 
-                            label={'Question:'}
-                            sublabel={store.id}
-                            trailing={<div 
-                                style={{ 
-                                    marginTop: '0.5em', 
-                                    marginRight: '0.5em',
-                                    marginLeft: '1em'
-                                }}
-                            >
-                                <h6 style={{ color: 'var(--palette-dark-blue-90)'}}>Date stored:</h6>
-                                <h4 style={{ fontWeight: 'normal' }}>
-                                    {new Date(store.date).toLocaleString()}
-                                </h4>
-                            </div>}
-                            centerTrailing={false}
-                        />
-                        <Dividers.Small />
-                        <Row 
-                            label={`Answer${plural}:`}
-                            sublabel={<div>
-                                {imageAnswers.length > 0 && (
-                                    <div style={commonStyles.merge(x => [x.flex, x.row, styles.images])}>
-                                        {imageAnswers.map((answer, idx) => <img src={answer} key={idx} />)}
-                                    </div>
-                                )}
-                                {textAnswers.length > 0 && <TextWithMaths 
-                                    text={textAnswers.join('$,\\;\\;$')}
-                                    style={{ margin: 0, padding: 0 }}
-                                />}
-                            </div>}
-                        />
-                        {index !== array.length - 1 && <Dividers.Large />}
-                    </React.Fragment>;
-                })}
-        </Section>;
+        return value.length > 0 && <AnswerSection 
+            key={key}
+            code={key}
+            value={value}
+            forceRender={forceRender}
+        />;
     }) : <SectionBody style={styles.fallback}>
         <h2 style={commonStyles.merge(x => [x.flex, x.justify, x.align, x.textCenter])}>
             No bookwork codes found :(

src/core/patches/menu/bookwork/Section.tsx

@@ -0,0 +1,36 @@
+import { common } from '@core/modules';
+import { Section } from '@core/components/section';
+import { AnswerSectionProps } from '@azalea/bookwork';
+import Answer from './Answer';
+
+const { React } = common;
+
+export default function AnswerSection({ code, value, forceRender }: AnswerSectionProps) {
+    return <Section title={code} key={code}>
+        {value
+            .filter(store => Array.isArray(store.answers) && store.answers.length > 0)
+            .sort((a, b) => b.date - a.date)
+            .map((store, index, array) => {
+                // Add 's' to the word 'Answer' if the amount of answers is more than 1
+                // You will never have 0 or -1 answers due to the filter above
+                // Therefore 'len > 1' is valid for this use case
+                const plural = store.answers.length > 1 ? 's' : '';
+
+                // Convert plain numbers to latex formatting
+                const answers = store.answers.map(answer => isNaN(+answer) ? answer : `$${answer}$`);
+                const imageAnswers = answers.filter(answer => answer.includes('assets.sparxhomework.uk'));
+                const textAnswers = answers.filter(answer => !answer.includes('assets.sparxhomework.uk'));
+
+                return <Answer
+                    key={index}
+                    code={code} 
+                    store={store} 
+                    index={index} 
+                    array={array} 
+                    plural={plural} 
+                    forceRender={forceRender} 
+                    answers={{ imageAnswers, textAnswers }} 
+                />;
+            })}
+    </Section>;
+}

src/core/patches/menu/bookwork/bookwork.styles.ts

@@ -0,0 +1,67 @@
+import { createStyleSheet } from '@core/stylesheet';
+
+export const { merge, styles } = createStyleSheet({
+    common: {
+        marginLeft: '1em'
+    },
+
+    input: {
+        borderRadius: '10em',
+        height: 'auto'
+    },
+
+    message: {
+        marginInline: '2em',
+        background: 'var(--palette-light-blue-20)'
+    },
+
+    navigation: {
+        marginBlock: '1em'
+    },
+
+    collapsable: {
+        overflow: 'hidden',
+        transition: 'max-height 300ms ease, opacity 300ms ease'
+    },
+
+    answers: {
+        fontSize: '1.25rem',
+        justifyContent: 'end',
+        marginRight: '2em'
+    },
+
+    actions: {
+        justifyContent: 'start',
+        marginInline: '2em',
+        gap: '0.5em',
+        flexGrow: 1
+    },
+
+    paragraph: {
+        marginBlock: 0,
+        marginRight: '0.25em'
+    },
+
+    delete: {
+        width: 'fit-content',
+        height: 'fit-content',
+        aspectRatio: 1,
+        borderRadius: '100000px',
+        transform: 'scale(0.5)',
+        marginTop: '0.125em',
+        marginRight: '-0.25em',
+        fontSize: '1.5rem'
+    },
+
+    fallback: {
+        marginInline: '2em',
+        paddingBlock: '1em',
+        background: 'var(--palette-light-blue-20)',
+    },
+
+    images: {
+        maxWidth: '20%',
+        gap: '1em',
+        marginBlock: '0.5em'
+    }
+});

src/types/types.d.ts

@@ -114,9 +114,25 @@ declare module '@azalea/bookwork' {
 
     export type ListingProps = {
         query: string,
-        readonly force: Record<string, any>,
+        forceRender: (arg: AnyProps) => void,
         listing: ReturnType<typeof storages['bookwork']['list']>
     }
+
+    type AnswerProps = {
+        store: AnyProps;
+        index: number;
+        array: AnyProps[];
+        code: string;
+        plural: string;
+        forceRender: (arg: AnyProps) => void;
+        answers: AnyProps<Record<string, any[]>>;
+    }
+
+    type AnswerSectionProps = {
+        code: string;
+        value: any[];
+        forceRender: (arg: AnyProps) => void;
+    }
 }
 
 declare module '@azalea/buttons' {