---
# System prepended metadata

title: 'Finish off blog components - Fri 28th Sept, 2020'
tags: [C+, blogs, webview, injectingcss, programmingjournal, '2020', pagination]

---

# Finish off blog components - Fri 28th Sept, 2020

Today, I worked on various things necessary to get the C+ blog components done.

I added pagination to the blog tag feed:

```typescript=
const fetchMoreBlogCards = (): void => {
    setFetchMoreLoading(true)
    pageRef.current += 1
    fetchMore({
        variables: { page: pageRef.current, count: FEED_QUERY_COUNT },
        updateQuery: (prev, { fetchMoreResult }) => {
            if (!fetchMoreResult) {
                return prev
            }

            if (fetchMoreResult?.blogTagSearchResults.length === 0) {
                setEndOfFeed(true)
            }

            const updatedBlogPostFeed: BlogTagQuery = {
                ...prev,
                blogTagSearchResults: [...prev.blogTagSearchResults, ...fetchMoreResult.blogTagSearchResults],
            }
            setFetchMoreLoading(false)
            return updatedBlogPostFeed
        },
    })
}
```
Along with various other changes and improvements.

### Injecting CSS into WebView
```typescript=
const createDocumentWrapper = (html: string, css: string) => `
    <!DOCTYPE html>
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
            <style>
                ${css}
            </style>
        </head>
        <body>${html}</body>
    </html>
`
```

Both `html` and `css` are template tags.

###### tags: `programmingjournal` `2020` `C+` `blogs` `webview` `pagination` `injectingcss`