add deserialization

chapters/06_frontend.md

@@ -71,6 +71,10 @@
 
 <br>
 
+### Instruction Serialization
+
+<br>
+
 * Instruction data must be serialized into a byte buffer to send to clients. 
 
 * Every transaction contains:
@@ -84,29 +88,45 @@
     - an array listing every account that will be read from or written to during execution
     - a byte buffer of instruction data
 
+<br>
+
+---
+
+### Libraries
+
 * [@solana/web3.js](https://solana-labs.github.io/solana-web3.js/) simplifies this process, so developers can focus on adding instructions and signatures. 
     - The library builds the array of accounts based on that information and handles the logic for including a recent blockhash.
 
 
 * To facilitate this process of serialization, we can use [Binary Object Representation Serializer for Hashin (Borsh)](https://borsh.io/) and the library [@coral-xyz/borsh](https://github.com/coral-xyz).
     - Borsh can be used in security-critical projects as it prioritizes consistency, safety, speed; and comes with a strict specification.
 
-* Finally, programs store data in PDAs (Program Derived Address):
-    - PDAs can be thought as a key value store, where the address is the key, and the data inside the account is the value (like records in a database, with the address being the primary key used to look up the values inside).
-    - PDAs do not have a corresponding secret key
-    - To store and locate data, we derive a PDA using the `findProgramAddress(seeds, programid)` method
-    - The accounts belonging to a program can be retrieved with `getProgramAccounts(programId)`
+<br>
+
+---
+
+### PDA
+
+<br>
+
+* Programs store data in PDAs (Program Derived Address), which can be thought as a key value store, where the address is the key, and the data inside the account is the value.
+    - Like records in a database, with the address being the primary key used to look up the values inside.
+
+* PDAs do not have a corresponding secret key. 
+    - To store and locate data, we derive a PDA using the `findProgramAddress(seeds, programid)` method.
+
+* The accounts belonging to a program can be retrieved with `getProgramAccounts(programId)`.
     - Account data needs to be deserialized using the same layout used to store it in the first place.
+    - Accounts created by a program can be fetched with `connection.getProgramAccounts(programId)`.
 
-* 
 
 
 <br>
 
 
 ---
 
-### Frontend demos
+### Demos
 
 <br>
 

demos/frontend/05_serialize_custom_data/README.md

@@ -227,30 +227,30 @@ export const Form: FC = () => {
                 <FormControl isRequired>
                     <FormLabel color='gray.200'>
                         Movie Title
-                    </FormLabel>
-                    <Input
-                        id='title'
-                        color='gray.400'
-                        onChange={event => setTitle(event.currentTarget.value)}
-                    />
+                        </FormLabel>
+                    <Input 
+                    id='title' 
+                    color='gray.400'
+                    onChange={event => setTitle(event.currentTarget.value)}
+                />
                 </FormControl>
                 <FormControl isRequired>
                     <FormLabel color='gray.200'>
                         Add your review
-                    </FormLabel>
-                    <Textarea
-                        id='review'
+                        </FormLabel>
+                    <Textarea 
+                        id='review' 
                         color='gray.400'
                         onChange={event => setDescription(event.currentTarget.value)}
                     />
                 </FormControl>
                 <FormControl isRequired>
                     <FormLabel color='gray.200'>
                         Rating
-                    </FormLabel>
-                    <NumberInput
-                        max={5}
-                        min={1}
+                        </FormLabel>
+                    <NumberInput 
+                        max={5} 
+                        min={1} 
                         onChange={(valueString) => setRating(parseInt(valueString))}
                     >
                         <NumberInputField id='amount' color='gray.400' />
@@ -359,7 +359,7 @@ export class MovieCoordinator {
 
 <br>
 
-* Finally, we add the component to create the movie cards:
+* Finally, we add the component to create the movie cards, under `components/Cards.tsx`:
 
 <br>
 
@@ -413,8 +413,6 @@ export const Card: FC<CardProps> = (props) => {
         </Box>
     )
 }
-
-
 ```
 
 <br>
@@ -425,60 +423,38 @@ export const Card: FC<CardProps> = (props) => {
 
 ```javascript
 import { Card } from './Card'
-import { FC, useEffect, useMemo, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { Movie } from '../models/Movie'
 import * as web3 from '@solana/web3.js'
-import { MovieCoordinator } from '../coordinators/MovieCoordinator'
-import { Button, Center, HStack, Input, Spacer } from '@chakra-ui/react'
+
+const MOVIE_REVIEW_PROGRAM_ID = 'CenYq6bDRB7p73EjsPEpiYN7uveyPUTdXkDkgUduboaN'
 
 export const MovieList: FC = () => {
     const connection = new web3.Connection(web3.clusterApiUrl('devnet'))
     const [movies, setMovies] = useState<Movie[]>([])
-    const [page, setPage] = useState(1)
-    const [search, setSearch] = useState('')
 
     useEffect(() => {
-        MovieCoordinator.fetchPage(
-            connection, 
-            page, 
-            5,
-            search,
-            search !== ''
-        ).then(setMovies)
-    }, [page, search])
+        connection.getProgramAccounts(new web3.PublicKey(MOVIE_REVIEW_PROGRAM_ID)).then(async (accounts) => {
+            const movies: Movie[] = accounts.reduce((accum: Movie[], { pubkey, account }) => {
+                const movie = Movie.deserialize(account.data)
+                if (!movie) {
+                    return accum
+                }
+
+                return [...accum, movie]
+            }, [])
+            setMovies(movies)
+        })
+    }, [])
 
     return (
         <div>
-            <Center>
-                <Input
-                    id='search'
-                    color='gray.400'
-                    onChange={event => setSearch(event.currentTarget.value)}
-                    placeholder='Search'
-                    w='97%'
-                    mt={2}
-                    mb={2}
-                />
-            </Center>
             {
                 movies.map((movie, i) => <Card key={i} movie={movie} /> )
             }
-            <Center>
-                <HStack w='full' mt={2} mb={8} ml={4} mr={4}>
-                    {
-                        page > 1 && <Button onClick={() => setPage(page - 1)}>Previous</Button>
-                    }
-                    <Spacer />
-                    {
-                        MovieCoordinator.accounts.length > page * 5 &&
-                        <Button onClick={() => setPage(page + 1)}>Next</Button>
-                    }
-                </HStack>
-            </Center>
         </div>
     )
 }
-
 ```
 
 

demos/frontend/05_serialize_custom_data/components/AppBar.tsx

@@ -7,7 +7,7 @@ export const AppBar: FC = () => {
     return (
         <div className={styles.AppHeader}>
             <Image src="/solanaLogo.png" height={30} width={200} />
-            <span>Demo 5: Serialization + PDA</span>
+            <span>Movie Reviews</span>
             <WalletMultiButton />
         </div>
     )

demos/frontend/05_serialize_custom_data/components/Form.tsx

@@ -82,30 +82,30 @@ export const Form: FC = () => {
                 <FormControl isRequired>
                     <FormLabel color='gray.200'>
                         Movie Title
-                    </FormLabel>
-                    <Input
-                        id='title'
-                        color='gray.400'
-                        onChange={event => setTitle(event.currentTarget.value)}
-                    />
+                        </FormLabel>
+                    <Input 
+                    id='title' 
+                    color='gray.400'
+                    onChange={event => setTitle(event.currentTarget.value)}
+                />
                 </FormControl>
                 <FormControl isRequired>
                     <FormLabel color='gray.200'>
                         Add your review
-                    </FormLabel>
-                    <Textarea
-                        id='review'
+                        </FormLabel>
+                    <Textarea 
+                        id='review' 
                         color='gray.400'
                         onChange={event => setDescription(event.currentTarget.value)}
                     />
                 </FormControl>
                 <FormControl isRequired>
                     <FormLabel color='gray.200'>
                         Rating
-                    </FormLabel>
-                    <NumberInput
-                        max={5}
-                        min={1}
+                        </FormLabel>
+                    <NumberInput 
+                        max={5} 
+                        min={1} 
                         onChange={(valueString) => setRating(parseInt(valueString))}
                     >
                         <NumberInputField id='amount' color='gray.400' />

demos/frontend/05_serialize_custom_data/components/MovieList.tsx

@@ -1,54 +1,33 @@
 import { Card } from './Card'
-import { FC, useEffect, useMemo, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import { Movie } from '../models/Movie'
 import * as web3 from '@solana/web3.js'
-import { MovieCoordinator } from '../coordinators/MovieCoordinator'
-import { Button, Center, HStack, Input, Spacer } from '@chakra-ui/react'
+
+const MOVIE_REVIEW_PROGRAM_ID = 'CenYq6bDRB7p73EjsPEpiYN7uveyPUTdXkDkgUduboaN'
 
 export const MovieList: FC = () => {
     const connection = new web3.Connection(web3.clusterApiUrl('devnet'))
     const [movies, setMovies] = useState<Movie[]>([])
-    const [page, setPage] = useState(1)
-    const [search, setSearch] = useState('')
 
     useEffect(() => {
-        MovieCoordinator.fetchPage(
-            connection, 
-            page, 
-            5,
-            search,
-            search !== ''
-        ).then(setMovies)
-    }, [page, search])
+        connection.getProgramAccounts(new web3.PublicKey(MOVIE_REVIEW_PROGRAM_ID)).then(async (accounts) => {
+            const movies: Movie[] = accounts.reduce((accum: Movie[], { pubkey, account }) => {
+                const movie = Movie.deserialize(account.data)
+                if (!movie) {
+                    return accum
+                }
+
+                return [...accum, movie]
+            }, [])
+            setMovies(movies)
+        })
+    }, [])
 
     return (
         <div>
-            <Center>
-                <Input
-                    id='search'
-                    color='gray.400'
-                    onChange={event => setSearch(event.currentTarget.value)}
-                    placeholder='Search'
-                    w='97%'
-                    mt={2}
-                    mb={2}
-                />
-            </Center>
             {
                 movies.map((movie, i) => <Card key={i} movie={movie} /> )
             }
-            <Center>
-                <HStack w='full' mt={2} mb={8} ml={4} mr={4}>
-                    {
-                        page > 1 && <Button onClick={() => setPage(page - 1)}>Previous</Button>
-                    }
-                    <Spacer />
-                    {
-                        MovieCoordinator.accounts.length > page * 5 &&
-                        <Button onClick={() => setPage(page + 1)}>Next</Button>
-                    }
-                </HStack>
-            </Center>
         </div>
     )
 }

demos/frontend/05_serialize_custom_data/models/Movie.ts

@@ -38,17 +38,16 @@ export class Movie {
         return buffer.slice(0, this.borshInstructionSchema.getSpan(buffer))
     }
 
-    static deserialize(buffer?: Buffer): Movie | null {
+    static deserialize(buffer?: Buffer): Movie|null {
         if (!buffer) {
             return null
         }
 
         try {
             const { title, rating, description } = this.borshAccountSchema.decode(buffer)
             return new Movie(title, rating, description)
-        } catch (e) {
+        } catch(e) {
             console.log('Deserialization error:', e)
-            console.log(buffer)
             return null
         }
     }