User Avatar

https://freecode.academy/tasks/cklwqmzzmcyb60730w8e0mesx
gorodskie-bani-ru · Mar 5, 2021 · f236558 · f236558
1 parent ee6b807
commit f236558
Show file tree

Hide file tree

Showing 15 changed files with 127 additions and 16 deletions.
diff --git a/next.config.js b/next.config.js
@@ -10,7 +10,7 @@ const webpack = (config, options) => {
    */
   config.plugins.push(
     new MomentLocalesPlugin({
-      localesToKeep: ['ru', 'en'],
+      localesToKeep: ['ru'],
     })
   )
 

diff --git a/server/nexus/generated/nexus.ts b/server/nexus/generated/nexus.ts
@@ -473,13 +473,15 @@ export interface NexusGenObjects {
     // root type
     Attributes?: NexusGenRootTypes['UserAttributes'] | null // UserAttributes
     active: boolean // Boolean!
+    createdon: NexusGenScalars['DateTime'] // DateTime!
     id: number // Int!
     username?: string | null // String
   }
   UserAttributes: {
     // root type
     fullname: string // String!
     id: number // Int!
+    photo: string // String!
   }
   bani684_site_tmplvar_contentvalues: {
     // root type
@@ -588,14 +590,17 @@ export interface NexusGenFieldTypes {
     // field return type
     Attributes: NexusGenRootTypes['UserAttributes'] | null // UserAttributes
     active: boolean // Boolean!
+    createdon: NexusGenScalars['DateTime'] // DateTime!
     fullname: string | null // String
     id: number // Int!
+    image: string | null // String
     username: string | null // String
   }
   UserAttributes: {
     // field return type
     fullname: string // String!
     id: number // Int!
+    photo: string // String!
   }
   bani684_site_tmplvar_contentvalues: {
     // field return type
@@ -683,14 +688,17 @@ export interface NexusGenFieldTypeNames {
     // field return type name
     Attributes: 'UserAttributes'
     active: 'Boolean'
+    createdon: 'DateTime'
     fullname: 'String'
     id: 'Int'
+    image: 'String'
     username: 'String'
   }
   UserAttributes: {
     // field return type name
     fullname: 'String'
     id: 'Int'
+    photo: 'String'
   }
   bani684_site_tmplvar_contentvalues: {
     // field return type name

diff --git a/server/nexus/generated/schema.graphql b/server/nexus/generated/schema.graphql
@@ -278,8 +278,14 @@ input StringNullableFilter {
 type User {
   Attributes: UserAttributes
   active: Boolean!
+  createdon: DateTime!
   fullname: String
   id: Int!
+
+  """
+  Аватар
+  """
+  image: String
   username: String
 }
 
@@ -289,6 +295,7 @@ type User {
 type UserAttributes {
   fullname: String!
   id: Int!
+  photo: String!
 }
 
 input bani684_site_contentOrderByInput {

diff --git a/server/nexus/types/Query/definitions/User.ts b/server/nexus/types/Query/definitions/User.ts
@@ -7,6 +7,7 @@ const select = {
   active: true,
   username: true,
   sudo: true,
+  createdon: true,
   Attributes: true,
 }
 
@@ -47,6 +48,16 @@ export default (t: ObjectDefinitionBlock<'Query'>) => {
         ...variables,
         select,
       })
+      // .then((users) => {
+
+      //   return users.map((user) => {
+
+      //     return {
+      //       ...user,
+      //       createdon: new Date(user.createdon * 1000),
+      //     }
+      //   })
+      // })
     },
   })
 }
diff --git a/server/nexus/types/User/index.ts b/server/nexus/types/User/index.ts
@@ -11,6 +11,7 @@ export const UserAttributes = objectType({
   definition(t) {
     t.nonNull.int('id')
     t.nonNull.string('fullname')
+    t.nonNull.string('photo')
   },
 })
 
@@ -25,10 +26,19 @@ export const User = objectType({
     t.nonNull.int('id')
     t.nonNull.boolean('active')
     // t.nonNull.boolean('blocked')
-    // t.nonNull.date('createdon')
+    t.nonNull.date('createdon')
     // t.string('email')
     t.string('username')
-    // t.string('image')
+    t.string('image', {
+      description: 'Аватар',
+      resolve(user) {
+        const image = user.Attributes?.photo || 'anonymous.jpg'
+
+        return image.startsWith('lazy/')
+          ? `assets/images/${image}`
+          : `assets/society/uploads/images/${image}`
+      },
+    })
     // t.boolean('sudo')
 
     t.field('Attributes', {

diff --git a/src/components/ui/Link/User/index.tsx b/src/components/ui/Link/User/index.tsx
@@ -1,21 +1,27 @@
 import React, { useMemo } from 'react'
+import { imageFormats } from 'src/helpers/imageFormats'
 
 import Link from '..'
 import { UserLinkProps } from './interfaces'
+import { UserLinkStyled } from './styled'
 
 /**
  * Ссылка на страницу пользователя
  */
 const UserLink: React.FC<UserLinkProps> = ({ user, ...other }) => {
   return useMemo(() => {
     return (
-      <Link
-        href={`/profile/${user.username}`}
-        title={user.fullname || user.username || undefined}
-        {...other}
-      >
-        {user.fullname || user.username}
-      </Link>
+      <UserLinkStyled {...other}>
+        <Link
+          href={`/profile/${user.username}`}
+          title={user.fullname || user.username || undefined}
+        >
+          {user.image && (
+            <img src={imageFormats(user.image, 'thumb')} className="avatar" />
+          )}{' '}
+          {user.fullname || user.username}
+        </Link>
+      </UserLinkStyled>
     )
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [other, user.username])

diff --git a/src/components/ui/Link/User/styled.ts b/src/components/ui/Link/User/styled.ts
@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const UserLinkStyled = styled.span`
+  img.avatar {
+    border-radius: 50%;
+    height: 40px;
+    width: 40px;
+  }
+`
diff --git a/src/gql/users.graphql b/src/gql/users.graphql
@@ -20,4 +20,6 @@ fragment user_ on User {
   username
   fullname
   active
+  createdon
+  image
 }
diff --git a/src/modules/gql/generated/helpers/apollo-helpers.ts b/src/modules/gql/generated/helpers/apollo-helpers.ts
@@ -71,18 +71,21 @@ export type ResourceFieldPolicy = {
 	template?: FieldPolicy<any> | FieldReadFunction<any>,
 	uri?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type UserKeySpecifier = ('Attributes' | 'active' | 'fullname' | 'id' | 'username' | UserKeySpecifier)[];
+export type UserKeySpecifier = ('Attributes' | 'active' | 'createdon' | 'fullname' | 'id' | 'image' | 'username' | UserKeySpecifier)[];
 export type UserFieldPolicy = {
 	Attributes?: FieldPolicy<any> | FieldReadFunction<any>,
 	active?: FieldPolicy<any> | FieldReadFunction<any>,
+	createdon?: FieldPolicy<any> | FieldReadFunction<any>,
 	fullname?: FieldPolicy<any> | FieldReadFunction<any>,
 	id?: FieldPolicy<any> | FieldReadFunction<any>,
+	image?: FieldPolicy<any> | FieldReadFunction<any>,
 	username?: FieldPolicy<any> | FieldReadFunction<any>
 };
-export type UserAttributesKeySpecifier = ('fullname' | 'id' | UserAttributesKeySpecifier)[];
+export type UserAttributesKeySpecifier = ('fullname' | 'id' | 'photo' | UserAttributesKeySpecifier)[];
 export type UserAttributesFieldPolicy = {
 	fullname?: FieldPolicy<any> | FieldReadFunction<any>,
-	id?: FieldPolicy<any> | FieldReadFunction<any>
+	id?: FieldPolicy<any> | FieldReadFunction<any>,
+	photo?: FieldPolicy<any> | FieldReadFunction<any>
 };
 export type bani684_site_tmplvar_contentvaluesKeySpecifier = ('contentid' | 'id' | 'tmplvarid' | 'value' | bani684_site_tmplvar_contentvaluesKeySpecifier)[];
 export type bani684_site_tmplvar_contentvaluesFieldPolicy = {

diff --git a/src/modules/gql/generated/schema.json b/src/modules/gql/generated/schema.json
@@ -2578,6 +2578,22 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "createdon",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "DateTime",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "fullname",
             "description": null,
@@ -2606,6 +2622,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "image",
+            "description": "Аватар",
+            "args": [],
+            "type": {
+              "kind": "SCALAR",
+              "name": "String",
+              "ofType": null
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "username",
             "description": null,
@@ -2660,6 +2688,22 @@
             },
             "isDeprecated": false,
             "deprecationReason": null
+          },
+          {
+            "name": "photo",
+            "description": null,
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": {
+                "kind": "SCALAR",
+                "name": "String",
+                "ofType": null
+              }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
           }
         ],
         "inputFields": null,

diff --git a/src/modules/gql/generated/types.ts b/src/modules/gql/generated/types.ts
@@ -281,8 +281,11 @@ export interface User {
   __typename?: 'User';
   Attributes?: Maybe<UserAttributes>;
   active: Scalars['Boolean'];
+  createdon: Scalars['DateTime'];
   fullname?: Maybe<Scalars['String']>;
   id: Scalars['Int'];
+  /** Аватар */
+  image?: Maybe<Scalars['String']>;
   username?: Maybe<Scalars['String']>;
 }
 
@@ -291,6 +294,7 @@ export interface UserAttributes {
   __typename?: 'UserAttributes';
   fullname: Scalars['String'];
   id: Scalars['Int'];
+  photo: Scalars['String'];
 }
 
 export interface Bani684SiteContentOrderByInput {

diff --git a/src/modules/gql/generated/user_.ts b/src/modules/gql/generated/user_.ts
@@ -9,13 +9,15 @@
 import * as Types from './types';
 
 import { gql } from '@apollo/client';
-export type UserFragment = { __typename?: 'User', id: number, username?: Types.Maybe<string>, fullname?: Types.Maybe<string>, active: boolean };
+export type UserFragment = { __typename?: 'User', id: number, username?: Types.Maybe<string>, fullname?: Types.Maybe<string>, active: boolean, createdon: globalThis.Date, image?: Types.Maybe<string> };
 
 export const UserFragmentDoc = gql`
     fragment user_ on User {
   id
   username
   fullname
   active
+  createdon
+  image
 }
     `;
diff --git a/src/pages/Users/View/User/index.tsx b/src/pages/Users/View/User/index.tsx
@@ -5,6 +5,7 @@ import {
 } from 'src/components/ui/GridTable/styles'
 import UserLink from 'src/components/ui/Link/User'
 import { UsersPageViewUserProps } from './interfaces'
+import moment from 'moment'
 
 const UsersPageViewUser: React.FC<UsersPageViewUserProps> = ({
   user,
@@ -16,7 +17,9 @@ const UsersPageViewUser: React.FC<UsersPageViewUserProps> = ({
         <GridTableAttributeStyled>
           <UserLink user={user} />
         </GridTableAttributeStyled>
-        <GridTableAttributeStyled>Дава регистрации</GridTableAttributeStyled>
+        <GridTableAttributeStyled>
+          {moment(user.createdon).format('DD-MM-YYYY')}
+        </GridTableAttributeStyled>
 
         {/* <GridTableAttributeStyled>Email</GridTableAttributeStyled> */}
       </GridTableItemStyled>

diff --git a/src/pages/Users/index.tsx b/src/pages/Users/index.tsx
@@ -15,7 +15,6 @@ import { ParsedUrlQuery } from 'querystring'
 const take = 10
 
 const defaultVariables: UsersQueryVariables = {
-  where: {},
   take,
 }
 

diff --git a/src/pages/_App/index.tsx b/src/pages/_App/index.tsx
@@ -26,6 +26,9 @@ import ErrorPage from '../_Error'
 import Layout from './Layout'
 import { AppContext, AppContextValue } from './Context'
 import { GlobalStyle } from 'src/theme/GlobalStyle'
+import moment from 'moment'
+
+moment.locale('ru')
 
 // import chalk from 'chalk';
 // import Debug from 'debug';