Merge pull request #154 from xsnippet/snippet-id-as-string

Pass snippet id and marker as strings without additional convertation

Author: lotrien

src/api/index.ts

@@ -3,7 +3,7 @@ import parseLinkHeader from 'parse-link-header'
 import { getApiUri } from '../misc/url'
 import { Snippet } from '../store'
 
-export const fetchSnippet = (id: number): Promise<Snippet> => {
+export const fetchSnippet = (id: string): Promise<Snippet> => {
   return fetch(getApiUri(`snippets/${id}`))
     .then(response => response.json())
 }
@@ -13,7 +13,7 @@ export const fetchSyntaxes = (): Promise<string[]> => {
     .then(response => response.json())
 }
 
-export const fetchRecentSnippets = (marker: number): Promise<{ snippets: Snippet[], pagination: parseLinkHeader.Links | null}> => {
+export const fetchRecentSnippets = (marker: string): Promise<{ snippets: Snippet[], pagination: parseLinkHeader.Links | null}> => {
   let qs = ''
   if (marker) { qs = `&marker=${marker}` }
   let pagination: parseLinkHeader.Links

src/components/RecentSnippets.jsx

@@ -22,7 +22,7 @@ const RecentSnippets = () => {
   setSnippets(snippets)
 
   const getSetOfSnippets = (direction) => {
-    setMarker(Number(pagination[direction].marker))
+    setMarker(pagination[direction].marker)
     scrollTop()
   }
 

src/components/Snippet.jsx

@@ -18,7 +18,7 @@ import '../styles/Snippet.styl'
 
 const Snippet = ({ match }) => {
   const [isShowEmbed, setIsShowEmbed] = useState(false)
-  const fetchedSnippet = useRecoilValueLoadable(snippetById(Number(match.params.id)))
+  const fetchedSnippet = useRecoilValueLoadable(snippetById(match.params.id))
   const embeddedRef = useRef()
 
   if (fetchedSnippet.state !== 'hasValue') return <Spinner />

src/misc/url.ts

@@ -1,6 +1,6 @@
 import conf from '../conf'
 
-export const getRawUrl = (id: number): string => conf.RAW_SNIPPET_URI_FORMAT.replace('%s', id)
+export const getRawUrl = (id: string): string => conf.RAW_SNIPPET_URI_FORMAT.replace('%s', id)
 
 export const getApiUri = (endpoint: string, version = 'v1'): string => (
   `${conf.API_BASE_URI}/${version}/${endpoint}`

src/store/index.ts

@@ -4,12 +4,12 @@ import { fetchSnippet, fetchSyntaxes, fetchRecentSnippets } from '../api'
 import { normalizedSyntaxes } from '../misc/modes'
 
 export type Snippet = {
-  content: string;
-  created_at: string;
-  id: number;
+  id: string;
+  title: string;
   syntax: string;
+  content: string;
   tags: string[];
-  title: string;
+  created_at: string;
   updated_at: string;
 }
 
@@ -28,7 +28,7 @@ export const syntaxesQuery = selector({
 
 export const recentSnippetsQuery = selectorFamily({
   key: 'recentSnippetsQuery',
-  get: (marker: number) => async () => {
+  get: (marker: string) => async () => {
     const { snippets, pagination } = await fetchRecentSnippets(marker)
 
     return {
@@ -41,7 +41,7 @@ export const recentSnippetsQuery = selectorFamily({
 
 export const snippetById = selectorFamily({
   key: 'snippetById',
-  get: (id: number) => async ({ get }) => {
+  get: (id: string) => async ({ get }) => {
     const snippets = get(recentSnippetsState)
 
     if (snippets) {