documents page fixed

pages/documents.tsx

@@ -5,12 +5,19 @@ import { Meta } from '../src/components/Meta'
 import menuModel from '../src/models/menu'
 import { buildMenu } from '../src/lib/menu'
 import { meta } from '../src/lib/meta'
+import { IDocument } from '../src/types'
 
-import DocumentList from '../src/components/DocumentList'
+import { DocumentList } from '../src/components/DocumentList'
 import { unique } from '../src/utils/common'
-import { createApiUrl, requestGet, wrapInitialProps } from '../src/next-lib'
+import { createApiUrl, requestGet, wrapInitialProps, IResponseItems } from '../src/next-lib'
+import { NextPage } from 'next'
 
-function getSorted(documents) {
+interface IDocumentCategory {
+    name: string
+    items: IDocument[]
+}
+
+function getSorted(documents: IDocument[]): IDocumentCategory[] {
     const compose = (...fns) => value => fns
         .map(fn => fn)
         .reverse()
@@ -23,7 +30,7 @@ function getSorted(documents) {
 
     const subtract = (a, b) => a - b
 
-    const uniqueCategories = unique(i => i.category)
+    const uniqueCategories = unique<IDocument, string>(i => i.category)
 
     const priority = {
         'Основные документы': [
@@ -53,13 +60,16 @@ function getSorted(documents) {
         'Документы для поступления',
     ]
 
-    const sortBy = fn => (a, b) => [a, b]
-        .map(fn)
-        .reduce(subtract)
+    function sortBy<T>(fn: (value: T) => number): (a: T, b: T) => number {
+        return (a, b) => [a, b].map(fn).reduce(subtract)
+    }
 
-    const getPriorityFn = (m, list) => value => list.includes(value)
-        ? list.indexOf(value)
-        : m
+    function getPriorityFn<T>(m: number, list: T[]): (value: T) => number {
+        return (value: T) => {
+            const has = list.includes(value)
+            return has ? list.indexOf(value) : m
+        }
+    }
 
     const safeSelect = (d, store, key) => key in store
         ? store[key]
@@ -84,7 +94,14 @@ function getSorted(documents) {
         }], [])
 }
 
-const Page = (props) => (
+interface IProps {
+    collections: IDocumentCategory[]
+    pageUrl: string
+    title: string
+    meta: any
+}
+
+const Page: NextPage<IProps> = props => (
     <App
         menu={buildMenu(props.pageUrl, menuModel)}
         showAuthor={true}
@@ -96,11 +113,11 @@ const Page = (props) => (
         </Head>
 
         <div className="content content_thin">
-            {props.collections.map(({ name, items }, index) => (
+            {props.collections.map((collection, index) => (
                 <DocumentList
                     key={index}
-                    name={name}
-                    documents={items}
+                    name={collection.name}
+                    documents={collection.items}
                 />
             ))}
         </div>
@@ -109,8 +126,8 @@ const Page = (props) => (
 
 Page.getInitialProps = wrapInitialProps(async (ctx) => {
     const pageUrl = '/documents'
-    const res = await requestGet(createApiUrl(ctx.req, '/api/files'), {})
-    const files = res.items || []
+    const res = await requestGet<IResponseItems<IDocument>>(createApiUrl(ctx.req, '/api/files'), { items: [] })
+    const files = res.items
     const title = 'Документы'
     const collections = getSorted(files)
 

pages/index.tsx

@@ -36,7 +36,7 @@ Page.getInitialProps = wrapInitialProps(async (ctx) => {
     const pageUrl = '/'
     const page = 1
     const pageSize = ctx.query.pageSize || 15
-    const res = await requestGet(createApiUrl(ctx.req, `/api/articles?page=${page}&pageSize=${pageSize}`), {})
+    const res = await requestGet(createApiUrl(ctx.req, `/api/articles?page=${page}&pageSize=${pageSize}`), {}) as any
     const articles = res.items || []
     const nextPage = res.nextPage
     const prevPage = res.prevPage

src/components/DocumentList.js

@@ -1,18 +0,0 @@
-const React = require('react')
-const Document = require('./DocumentListItem')
-
-const DocumentList = ({documents, name}) => (
-	<div className="documents-container">
-		<div className="documents-container__head">
-			<h2>{name}</h2>
-		</div>
-
-		<div className="documents-container__body">
-			{documents.map((d, i) => (
-				<Document key={i} {...d}/>
-			))}
-		</div>
-	</div>
-)
-
-module.exports = DocumentList

src/components/DocumentList/index.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { IDocument } from '../../types'
+import { DocumentListItem } from '../DocumentListItem'
+
+export interface IDocumentListProps {
+    documents: IDocument[]
+    name: string
+}
+
+export const DocumentList: React.FC<IDocumentListProps> = props => (
+    <div className="documents-container">
+        <div className="documents-container__head">
+            <h2>{props.name}</h2>
+        </div>
+
+        <div className="documents-container__body">
+            {props.documents.map((d, i) => (
+                <DocumentListItem key={i} {...d} />
+            ))}
+        </div>
+    </div>
+)

src/components/DocumentListItem.js

@@ -1,23 +0,0 @@
-const React = require('react')
-const {ext, size} = require('../lib/file')
-const {titleCase} = require('../lib/string')
-
-const Document = ({title, url, imageUrl, fileUrl, fileName, fileSize}) => (
-	<div className="document-row">
-		<a href={url} className="invisible">
-			<div className="document-row__image">
-				<img src={imageUrl} alt={title}/>
-			</div>
-		</a>
-
-		<div className="document-row__file">
-			<a href={url}>{titleCase(title)}</a>
-		</div>
-
-		<div className="document-row__file-info">
-			<a href={fileUrl} target="_blank">{ext(fileName)} ({size(fileSize)})</a>
-		</div>
-	</div>
-)
-
-module.exports = Document

src/components/DocumentListItem/index.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { ext, size } from '../../lib/file'
+import { titleCase } from '../../lib/string'
+
+export interface IDocumentListItemProps {
+    title: string
+    url: string
+    imageUrl: string
+    fileUrl: string
+    fileName: string
+    fileSize: number
+}
+
+export const DocumentListItem: React.FC<IDocumentListItemProps> = props => (
+    <div className="document-row">
+        <a href={props.url} className="invisible">
+            <div className="document-row__image">
+                <img src={props.imageUrl} alt={props.title} />
+            </div>
+        </a>
+
+        <div className="document-row__file">
+            <a href={props.url}>{titleCase(props.title)}</a>
+        </div>
+
+        <div className="document-row__file-info">
+            <a href={props.fileUrl} target="_blank">{ext(props.fileName)} ({size(props.fileSize)})</a>
+        </div>
+    </div>
+)

src/core/Document.ts

@@ -1,12 +1,12 @@
-const Data = require('./Data')
-const Image = require('./Image')
-const { find, findOne } = require('../lib/store')
+import Data from './Data'
+import Image from './Image'
+import { find, findOne } from '../lib/store'
 
-const store = () => Data.getStore(Document)
+const store = () => Data.getStore('Document')
 
-class Document {
+export default class Document {
     static async find(query, options = {}) {
-        const items = await find(store(), query, options)
+        const items = await find(store(), query, options as any)
 
         return Promise.all(items.map(processDocument))
     }
@@ -18,6 +18,17 @@ class Document {
         return processDocument(data)
     }
 
+    public id: any
+    public hash: any
+    public file: any
+    public fileInfo: any
+    public type: any
+    public title: any
+    public category: any
+    public url: any
+    public preview: any
+    public viewUrl: any
+
     constructor(data) {
         this.id = data.id
         this.hash = data.hash
@@ -37,6 +48,9 @@ class Document {
 }
 
 class DocumentFile {
+    public name: any
+    public size: any
+
     constructor(data) {
         this.name = data.name
         this.size = data.size
@@ -52,5 +66,3 @@ const processDocument = async data => {
         preview,
     })
 }
-
-module.exports = Document

src/core/db.ts

@@ -41,7 +41,7 @@ function init(db) {
     Data.setStore('Album', db.collection('albums'))
     Data.setStore('Image', db.collection('images'))
     Data.setStore('Teacher', db.collection('collective'))
-    Data.setStore(Document, db.collection('documents'))
+    Data.setStore('Document', db.collection('documents'))
     Data.setStore('Settings', db.collection('settings'))
 
     return db

src/lib/file.js

@@ -1,27 +0,0 @@
-function ext(filname) {
-	let getExt = name => /\.(\w+)$/.exec(name)[1]
-	let defaultExt = ext => ext.toUpperCase()
-
-	const exts = ['png', 'pdf', 'jpg', 'jpeg', 'gif', 'doc']
-	const extd = ['ПНГ', 'ПДФ', 'ЖПГ', 'ЖПГ', 'ГИФ', 'ДОК']
-
-	let ext = getExt(filname)
-	const i = exts.indexOf(ext)
-
-	return i > -1
-		? extd[i]
-		: defaultExt(ext)
-}
-
-function size(bytes, precision = 1) {
-	if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return ''
-
-	const units = ['байт', 'КБ', 'МБ', 'ГБ', 'ТБ', 'ПБ']
-	const number = Math.floor(Math.log(bytes) / Math.log(1024))
-
-	const size = (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision)
-	return `${size} ${units[number]}`
-}
-
-exports.ext = ext
-exports.size = size

src/lib/file.ts

@@ -0,0 +1,23 @@
+const getExt = (name: string) => /\.(\w+)$/.exec(name)[1]
+const defaultExt = (ext: string) => ext.toUpperCase()
+const exts = ['png', 'pdf', 'jpg', 'jpeg', 'gif', 'doc']
+const extd = ['ПНГ', 'ПДФ', 'ЖПГ', 'ЖПГ', 'ГИФ', 'ДОК']
+const units = ['байт', 'КБ', 'МБ', 'ГБ', 'ТБ', 'ПБ']
+
+export function ext(filname: string): string {
+    const ext = getExt(filname)
+    const i = exts.indexOf(ext)
+
+    return i > -1
+        ? extd[i]
+        : defaultExt(ext)
+}
+
+export function size(bytes: any, precision = 1): string {
+    if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return ''
+
+    const number = Math.floor(Math.log(bytes) / Math.log(1024))
+    const size = (bytes / Math.pow(1024, Math.floor(number))).toFixed(precision)
+
+    return `${size} ${units[number]}`
+}

src/next-lib.ts

@@ -1,8 +1,12 @@
 import axios from 'axios'
 
-export async function requestGet(url, defaultResponse) {
+export interface IResponseItems<T> {
+    items: T[]
+}
+
+export async function requestGet<T>(url: string, defaultResponse: T): Promise<T> {
     try {
-        const res = await axios.get(url)
+        const res = await axios.get<T>(url)
 
         return res.data
     } catch (e) {
@@ -19,7 +23,7 @@ export async function requestGet(url, defaultResponse) {
 export function wrapInitialProps(fn) {
     return async ctx => {
         if (process.env.NODE_ENV === 'production' && process.browser) {
-            return __NEXT_DATA__.props.pageProps;
+            return window['__NEXT_DATA__'].props.pageProps;
         }
 
         return fn(ctx)

src/types.ts

@@ -0,0 +1,9 @@
+export interface IDocument {
+    category: string
+    fileName: string
+    fileSize: number
+    fileUrl: string
+    imageUrl: string
+    title: string
+    url: string
+}

src/utils/common.ts

@@ -40,7 +40,7 @@ export function indexEquals(withNumber) {
  * @param map
  */
 export function select(byCondition, map = i => i) {
-    return (result, item) => byCondition(item) ? map(item): map(result)
+    return (result, item) => byCondition(item) ? map(item) : map(result)
 }
 
 /**
@@ -49,19 +49,21 @@ export function select(byCondition, map = i => i) {
  * @param selector
  * @returns {*}
  */
-export function choise(scope, selector){
+export function choise(scope, selector) {
     return scope.reduce(selector, null);
 }
 
-export function unique(fn) {
-    return list => [...new Set(list.map(fn))];
+export function unique<T, U>(fn: (value: T) => U): (list: T[]) => U[] {
+    return list => Array.from(
+        new Set(list.map(fn))
+    )
 }
 
 export function branch(fn) {
     let keys = unique(fn);
 
     return list => keys(list)
-        .reduce((dict, key) => {
+        .reduce((dict: any, key: any) => {
             dict[key] = list.filter(
                 i => fn(i) === key
             );
@@ -71,7 +73,7 @@ export function branch(fn) {
 
 }
 
-export function assign(dict, key, value){
+export function assign(dict, key, value) {
     dict[key] = value;
     return dict;
 }
@@ -88,7 +90,7 @@ export function map(v, fn) {
  * @param selector
  * @returns {*}
  */
-export function createMap(selector, list){
+export function createMap(selector, list) {
     return list.reduce((map, i) => map.set(selector(i), i), new Map());
 }
 
@@ -99,6 +101,6 @@ export function createMap(selector, list){
  * @param {function} fn
  * @returns {function(*=): null}
  */
-export function nullSafe(fn){
+export function nullSafe(fn) {
     return i => i ? fn(i) : null;
 }